├── .changeset ├── README.md └── config.json ├── .cursor ├── README.md ├── config.json └── rules │ ├── branch-naming.mdc │ ├── jira-ticket.mdc │ ├── styles.mdc │ └── text-formatting.mdc ├── .env.example ├── .eslintrc ├── .gitattributes ├── .github ├── CONTRIBUTING.md ├── GUIDE.md ├── ISSUE_TEMPLATE │ ├── --bug-report.md │ ├── --documentation-issue.md │ ├── --feature-request.md │ └── --support-request.md ├── PULL_REQUEST_TEMPLATE.md ├── QUICK-START.md ├── actions │ └── file-diff │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── action.yml │ │ ├── index.js │ │ ├── package.json │ │ └── utilities.js ├── renovate.json └── workflows │ ├── build.yml │ ├── compare-results.yml │ ├── development.yml │ ├── lint.yml │ ├── production.yml │ ├── publish-site.yml │ ├── release-snapshot.yml │ ├── release.yml │ └── vrt.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .markdownlint.json ├── .npmignore ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .storybook ├── CHANGELOG.md ├── README.md ├── assets │ ├── 404.html │ ├── base.css │ ├── favicon.png │ ├── images │ │ ├── adobe_logo.svg │ │ ├── example-ava.png │ │ ├── example-ava@2x.png │ │ ├── example-card-landscape.png │ │ ├── example-card-portrait.png │ │ ├── example-card-square.png │ │ ├── flowers.png │ │ ├── github_logo.svg │ │ ├── gradient-background-dark.png │ │ ├── gradient-background-light.png │ │ ├── gray_migration-guide.png │ │ ├── npm_logo.svg │ │ ├── spectrum-css_illustration_desktop.png │ │ ├── spectrum_illustration_2x.png │ │ ├── thumbnail.png │ │ └── wc_logo.svg │ ├── index.css │ └── logo.svg ├── blocks │ ├── ColorPalette.jsx │ ├── ComponentDetails.jsx │ ├── Layouts.jsx │ ├── PropertiesTable.jsx │ ├── Swatches.jsx │ ├── ThemeContainer.jsx │ ├── Typography.jsx │ ├── index.js │ └── utilities.js ├── decorators │ ├── arg-events.js │ ├── context.js │ ├── helpers.js │ ├── icon-sprites.js │ ├── index.js │ ├── language.js │ ├── reduce-motion.js │ ├── testing-preview.js │ ├── text-direction.js │ ├── underlay.js │ └── utilities.js ├── guides │ ├── code_of_conduct.mdx │ ├── color_palette.mdx │ ├── deprecation.mdx │ ├── develop.mdx │ ├── releasing.mdx │ └── s2_migration.mdx ├── loaders │ ├── font-loader.js │ ├── icon-loader.js │ └── index.js ├── main.js ├── manager.js ├── modes │ └── index.js ├── package.json ├── postcss.config.js ├── preview-head.html ├── preview.js ├── project.json ├── templates │ └── DocumentationTemplate.mdx └── types │ ├── args.js │ ├── global.js │ ├── index.js │ ├── states.js │ └── variants.js ├── .stylelintignore ├── .vscode ├── extensions.json └── settings.json ├── .yarn └── releases │ └── yarn-4.9.2.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── COPYRIGHT ├── LICENSE ├── README.md ├── commitlint.config.js ├── components ├── accordion │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── accordion.stories.js │ │ ├── accordion.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── actionbar │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── actionbar.stories.js │ │ ├── actionbar.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── actionbutton │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── actionbutton.stories.js │ │ ├── actionbutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── actiongroup │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── actiongroup.stories.js │ │ ├── actiongroup.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── actionmenu │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ └── stories │ │ ├── actionmenu.stories.js │ │ ├── actionmenu.test.js │ │ └── template.js ├── alertbanner │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── alertbanner.stories.js │ │ ├── alertbanner.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── alertdialog │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── alertdialog.stories.js │ │ ├── alertdialog.test.js │ │ └── template.js ├── asset │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── asset.stories.js │ │ ├── asset.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── assetcard │ ├── CHANGELOG.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── assetcard.stories.js │ │ ├── assetcard.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── assetlist │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── assetlist.stories.js │ │ ├── assetlist.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── avatar │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── avatar.stories.js │ │ ├── avatar.test.js │ │ └── template.js ├── badge │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── badge.stories.js │ │ ├── badge.test.js │ │ └── template.js ├── breadcrumb │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── breadcrumb.stories.js │ │ ├── breadcrumb.test.js │ │ └── template.js ├── button │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── button.stories.js │ │ ├── button.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── buttongroup │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── buttongroup.stories.js │ │ ├── buttongroup.test.js │ │ └── template.js ├── calendar │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── calendar.stories.js │ │ ├── calendar.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── card │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── card.stories.js │ │ ├── card.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── checkbox │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── checkbox.stories.js │ │ ├── checkbox.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── clearbutton │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── clearbutton.stories.js │ │ ├── clearbutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── closebutton │ ├── CHANGELOG.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── closebutton.stories.js │ │ ├── closebutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── coachindicator │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── coachindicator.stories.js │ │ ├── coachindicator.test.js │ │ └── template.js ├── coachmark │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── coachmark.stories.js │ │ ├── coachmark.test.js │ │ └── template.js ├── colorarea │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── colorarea.stories.js │ │ ├── colorarea.test.js │ │ └── template.js ├── colorhandle │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── colorhandle.stories.js │ │ ├── colorhandle.test.js │ │ └── template.js ├── colorloupe │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── colorloupe.stories.js │ │ ├── colorloupe.test.js │ │ └── template.js ├── colorslider │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── colorslider.stories.js │ │ ├── colorslider.test.js │ │ └── template.js ├── colorwheel │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── colorwheel.stories.js │ │ ├── colorwheel.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── combobox │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── combobox.stories.js │ │ ├── combobox.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── commons │ ├── CHANGELOG.md │ ├── README.md │ ├── basebutton.css │ ├── index.css │ ├── overlay.css │ ├── package.json │ └── project.json ├── contextualhelp │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── contextualhelp.stories.js │ │ ├── contextualhelp.test.js │ │ └── template.js ├── datepicker │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── datepicker.stories.js │ │ ├── datepicker.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── dial │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── dial.stories.js │ │ ├── dial.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── dialog │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── dialog.stories.js │ │ ├── dialog.test.js │ │ └── template.js ├── divider │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── divider.stories.js │ │ ├── divider.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── dropindicator │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── dropindicator.stories.js │ │ ├── dropindicator.test.js │ │ └── template.js ├── dropzone │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── dropzone.stories.js │ │ ├── dropzone.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── fieldgroup │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── fieldgroup.stories.js │ │ ├── fieldgroup.test.js │ │ └── template.js ├── fieldlabel │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── fieldlabel.stories.js │ │ ├── fieldlabel.test.js │ │ └── template.js ├── floatingactionbutton │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── floatingactionbutton.stories.js │ │ ├── floatingactionbutton.test.js │ │ └── template.js ├── form │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── form.stories.js │ │ ├── form.test.js │ │ └── template.js ├── helptext │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── helptext.stories.js │ │ ├── helptext.test.js │ │ └── template.js ├── icon │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── icons.css │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── icon.stories.js │ │ ├── icon.test.js │ │ ├── template.js │ │ └── utilities.js │ ├── ui-icons.css │ └── workflow-icons.css ├── illustratedmessage │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── illustratedmessage.stories.js │ │ ├── illustratedmessage.test.js │ │ └── template.js ├── infieldbutton │ ├── CHANGELOG.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── infieldbutton.stories.js │ │ ├── infieldbutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── inlinealert │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── inlinealert.stories.js │ │ ├── inlinealert.test.js │ │ └── template.js ├── link │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── link.stories.js │ │ ├── link.test.js │ │ └── template.js ├── logicbutton │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── logicbutton.stories.js │ │ ├── logicbutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── menu │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── menu.stories.js │ │ ├── menu.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── meter │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── meter.stories.js │ │ ├── meter.test.js │ │ └── template.js ├── miller │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── miller.stories.js │ │ ├── miller.test.js │ │ └── template.js ├── modal │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── modal.stories.js │ │ ├── modal.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── opacitycheckerboard │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── opacitycheckerboard.stories.js │ │ ├── opacitycheckerboard.test.js │ │ └── template.js ├── page │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── page.stories.js │ │ ├── page.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── pagination │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── pagination.stories.js │ │ ├── pagination.test.js │ │ └── template.js ├── picker │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── embed │ │ └── Down-Chevron.svg │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── picker.stories.js │ │ ├── picker.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── pickerbutton │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── pickerbutton.stories.js │ │ ├── pickerbutton.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── popover │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── popover.stories.js │ │ ├── popover.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── progressbar │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── progressbar.stories.js │ │ ├── progressbar.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── progresscircle │ ├── CHANGELOG.md │ ├── README.md │ ├── animation.css │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── progresscircle.stories.js │ │ ├── progresscircle.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── radio │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── radio.stories.js │ │ ├── radio.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── rating │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── embed │ │ ├── S_StarOutline_18_N@2x.svg │ │ └── S_Star_18_N@2x.svg │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── rating.stories.js │ │ ├── rating.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── search │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── search.stories.js │ │ ├── search.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── sidenav │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── sidenav.stories.js │ │ ├── sidenav.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── slider │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── slider.stories.js │ │ ├── slider.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── splitview │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── splitview.stories.js │ │ ├── splitview.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── statuslight │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── statuslight.stories.js │ │ ├── statuslight.test.js │ │ └── template.js ├── steplist │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── steplist.stories.js │ │ ├── steplist.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── stepper │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── stepper.stories.js │ │ ├── stepper.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── swatch │ ├── CHANGELOG.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── swatch.stories.js │ │ ├── swatch.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── swatchgroup │ ├── CHANGELOG.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── swatchgroup.stories.js │ │ ├── swatchgroup.test.js │ │ └── template.js ├── switch │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── switch.stories.js │ │ ├── switch.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── table │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── table.stories.js │ │ ├── table.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── tabs │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── tabs.stories.js │ │ ├── tabs.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── tag │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── tag.stories.js │ │ ├── tag.test.js │ │ └── template.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── taggroup │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── taggroup.stories.js │ │ ├── taggroup.test.js │ │ └── template.js ├── textfield │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── embed │ │ ├── AlertMedium.svg │ │ └── CheckmarkMedium.svg │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── template.js │ │ ├── textarea.stories.js │ │ ├── textarea.template.js │ │ ├── textarea.test.js │ │ ├── textfield.stories.js │ │ └── textfield.test.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── thumbnail │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── template.js │ │ ├── thumbnail.stories.js │ │ └── thumbnail.test.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── toast │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── template.js │ │ ├── toast.stories.js │ │ └── toast.test.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── tooltip │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── template.js │ │ ├── tooltip.stories.js │ │ └── tooltip.test.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── tray │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── template.js │ │ ├── tray.stories.js │ │ └── tray.test.js ├── treeview │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ │ ├── template.js │ │ ├── treeview.stories.js │ │ └── treeview.test.js │ └── themes │ │ ├── express.css │ │ ├── spectrum-two.css │ │ └── spectrum.css ├── typography │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── template.js │ │ ├── typography.mdx │ │ ├── typography.stories.js │ │ └── typography.test.js ├── underlay │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ └── stories │ │ ├── template.js │ │ └── underlay.stories.js └── well │ ├── CHANGELOG.md │ ├── README.md │ ├── dist │ └── metadata.json │ ├── index.css │ ├── package.json │ ├── project.json │ ├── stories │ ├── template.js │ ├── well.stories.js │ └── well.test.js │ └── themes │ ├── express.css │ ├── spectrum-two.css │ └── spectrum.css ├── lint-staged.config.js ├── netlify.toml ├── nx.json ├── package.json ├── plugins ├── README.md ├── postcss-add-theming-layer │ ├── CHANGELOG.md │ ├── README.md │ ├── expected │ │ └── basic.css │ ├── fixtures │ │ └── basic.css │ ├── index.js │ ├── package.json │ ├── project.json │ ├── test.js │ └── utilities.js ├── postcss-property-rollup │ ├── CHANGELOG.md │ ├── README.md │ ├── expected │ │ └── basic.css │ ├── fixtures │ │ └── basic.css │ ├── index.js │ ├── package.json │ ├── project.json │ └── test.js ├── postcss-rgb-mapping │ ├── CHANGELOG.md │ ├── README.md │ ├── expected │ │ ├── basic.css │ │ └── modern.css │ ├── fixtures │ │ └── basic.css │ ├── index.js │ ├── package.json │ ├── project.json │ └── test.js ├── stylelint-no-missing-var │ ├── CHANGELOG.md │ ├── README.md │ ├── fixtures │ │ ├── missing-var.css │ │ └── passing.css │ ├── index.js │ ├── package.json │ ├── project.json │ └── test.js ├── stylelint-no-unknown-custom-properties │ ├── CHANGELOG.md │ ├── README.md │ ├── fixtures │ │ ├── passing.css │ │ └── unknown-prop.css │ ├── index.js │ ├── package.json │ ├── project.json │ └── test.js ├── stylelint-no-unused-custom-properties │ ├── CHANGELOG.md │ ├── README.md │ ├── expected │ │ ├── unused.css │ │ └── varRefs.css │ ├── fixtures │ │ ├── passing.css │ │ ├── passthrough.css │ │ ├── unused.css │ │ └── varRefs.css │ ├── index.js │ ├── package.json │ ├── project.json │ └── test.js └── stylelint-theme-alignment │ ├── CHANGELOG.md │ ├── README.md │ ├── index.js │ ├── package.json │ └── project.json ├── postcss.config.js ├── schemas └── metadata.schema.json ├── stylelint.config.js ├── tasks ├── chromatic-config-creation.sh ├── clean-up-after-migration.sh ├── component-builder.js ├── component-compare.js ├── component-reporter.js ├── copy-env-from-root.sh ├── templates │ ├── compare-listing.njk │ ├── diff-preview.njk │ └── sidenav.njk └── utilities.js ├── tokens ├── CHANGELOG.md ├── README.md ├── custom │ ├── dark-vars.css │ ├── global-vars.css │ ├── large-vars.css │ ├── light-vars.css │ └── medium-vars.css ├── dist │ └── json │ │ └── tokens.json ├── package.json ├── postcss.config.js ├── project.json ├── style-dictionary.config.js ├── tasks │ └── token-rollup.js └── utilities │ ├── attribute-sets-transform.js │ ├── css-font-open-type-transform.js │ ├── css-sets-formatter.js │ ├── data-json-formatter.js │ ├── index.js │ ├── json-sets-formatter.js │ └── name-kebab-transform.js ├── tools ├── bundle │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── postcss.config.js │ ├── project.json │ ├── src │ │ └── index.css │ └── tasks │ │ └── bundler.js └── generator │ ├── CHANGELOG.md │ ├── package.json │ ├── plopfile.js │ └── templates │ ├── README.md.hbs │ ├── index.css.hbs │ ├── package.json.hbs │ ├── project.json.hbs │ └── stories │ ├── template.js.hbs │ ├── {{ folderName }}.stories.js.hbs │ └── {{ folderName }}.test.js.hbs ├── ui-icons ├── CHANGELOG.md ├── README.md ├── index.js ├── large │ ├── Arrow100.svg │ ├── Arrow200.svg │ ├── Arrow300.svg │ ├── Arrow400.svg │ ├── Arrow500.svg │ ├── Arrow600.svg │ ├── Arrow75.svg │ ├── Asterisk100.svg │ ├── Asterisk200.svg │ ├── Asterisk300.svg │ ├── Asterisk75.svg │ ├── Checkmark100.svg │ ├── Checkmark200.svg │ ├── Checkmark300.svg │ ├── Checkmark400.svg │ ├── Checkmark50.svg │ ├── Checkmark500.svg │ ├── Checkmark600.svg │ ├── Checkmark75.svg │ ├── Chevron100.svg │ ├── Chevron200.svg │ ├── Chevron300.svg │ ├── Chevron400.svg │ ├── Chevron50.svg │ ├── Chevron500.svg │ ├── Chevron600.svg │ ├── Chevron75.svg │ ├── CornerTriangle100.svg │ ├── CornerTriangle200.svg │ ├── CornerTriangle300.svg │ ├── CornerTriangle75.svg │ ├── Cross100.svg │ ├── Cross200.svg │ ├── Cross300.svg │ ├── Cross400.svg │ ├── Cross500.svg │ ├── Cross600.svg │ ├── Cross75.svg │ ├── Dash100.svg │ ├── Dash200.svg │ ├── Dash300.svg │ ├── Dash400.svg │ ├── Dash50.svg │ ├── Dash500.svg │ ├── Dash600.svg │ ├── Dash75.svg │ ├── DoubleGripper.svg │ ├── SingleGripper.svg │ └── TripleGripper.svg ├── medium │ ├── Arrow100.svg │ ├── Arrow200.svg │ ├── Arrow300.svg │ ├── Arrow400.svg │ ├── Arrow500.svg │ ├── Arrow600.svg │ ├── Arrow75.svg │ ├── Asterisk100.svg │ ├── Asterisk200.svg │ ├── Asterisk300.svg │ ├── Asterisk75.svg │ ├── Checkmark100.svg │ ├── Checkmark200.svg │ ├── Checkmark300.svg │ ├── Checkmark400.svg │ ├── Checkmark50.svg │ ├── Checkmark500.svg │ ├── Checkmark600.svg │ ├── Checkmark75.svg │ ├── Chevron100.svg │ ├── Chevron200.svg │ ├── Chevron300.svg │ ├── Chevron400.svg │ ├── Chevron50.svg │ ├── Chevron500.svg │ ├── Chevron600.svg │ ├── Chevron75.svg │ ├── CornerTriangle100.svg │ ├── CornerTriangle200.svg │ ├── CornerTriangle300.svg │ ├── CornerTriangle75.svg │ ├── Cross100.svg │ ├── Cross200.svg │ ├── Cross300.svg │ ├── Cross400.svg │ ├── Cross500.svg │ ├── Cross600.svg │ ├── Cross75.svg │ ├── Dash100.svg │ ├── Dash200.svg │ ├── Dash300.svg │ ├── Dash400.svg │ ├── Dash50.svg │ ├── Dash500.svg │ ├── Dash600.svg │ ├── Dash75.svg │ ├── DoubleGripper.svg │ ├── SingleGripper.svg │ └── TripleGripper.svg ├── package.json ├── project.json └── svgo.config.js ├── yarn.config.cjs └── yarn.lock /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json", 3 | "changelog": [ 4 | "@changesets/changelog-github", 5 | { 6 | "repo": "adobe/spectrum-css" 7 | } 8 | ], 9 | "commit": false, 10 | "fixed": [], 11 | "linked": [], 12 | "access": "public", 13 | "baseBranch": "main", 14 | "updateInternalDependencies": "minor", 15 | "ignore": [], 16 | "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { 17 | "onlyUpdatePeerDependentsWhenOutOfRange": true, 18 | "updateInternalDependents": "out-of-range" 19 | }, 20 | "snapshot": { 21 | "useCalculatedVersion": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.cursor/rules/styles.mdc: -------------------------------------------------------------------------------- 1 | --- 2 | description: Rules for consistent styling in component CSS 3 | globs: *.css 4 | alwaysApply: true 5 | --- 6 | 7 | 1. Auto-fix results based on settings defined by the `stylelint.config.js` unless it requires rewriting more than 30% of the line. Changes that impact more than 30% of the original content should prompt for update. 8 | 2. Copyrights should reflect the current year. 9 | 3. Comments added should always use sentence, never title case. 10 | 4. Any files removed should also be removed from the exports of the component's package.json. 11 | 5. Never rename a custom property without prompting for approval first or being expressly asked to update the custom property name. 12 | 6. Sort high-contrast and other media queries to the bottom of the CSS file. 13 | 7. Warn about or suggest fixes for duplicate properties; always opt to keep the definition that honors the CSS cascade. 14 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | CHROMATIC_PROJECT_TOKEN=1234abcd 2 | CHROMATIC_PROJECT_ID="Project:64762974a45b8bc5ca1705a2" 3 | # Note: the build script here should be defined in .storybook/package.json 4 | # this is used by the chromatic storybook addon to build the storybook on the fly 5 | CHROMATIC_BUILD_SCRIPT_NAME="build" 6 | CHROMATIC_STORYBOOK_BASE_DIR=".storybook" 7 | CHROMATIC_ZIP=true 8 | 9 | # NX settings 10 | NX_PREFER_TS_NODE=true 11 | NX_NATIVE_COMMAND_RUNNER=false 12 | NX_INTERACTIVE=true 13 | 14 | # Default dev environment settings 15 | NODE_ENV=development 16 | WATCH_MODE=true 17 | 18 | # Optional NX settings 19 | NX_VERBOSE_LOGGING=false 20 | NX_SKIP_NX_CACHE=false 21 | NX_PERF_LOGGING=false 22 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | README.md merge=ours 3 | 4 | # Treat yarn assets as binaries for diffing 5 | /.yarn/releases/** binary 6 | /.yarn/plugins/** binary 7 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--documentation-issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "📚 Documentation issue" 3 | about: Report an issue with the project documentation 4 | title: "" 5 | labels: documentation 6 | assignees: pfulton, castastrophe 7 | --- 8 | 9 | ## Description 10 | 11 | 12 | 13 | ## Link to documentation 14 | 15 | 16 | 17 | ## Additional context 18 | 19 | 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "✨ Feature request" 3 | about: Suggest a new feature or component 4 | title: "" 5 | labels: enhancement 6 | assignees: pfulton, castastrophe 7 | --- 8 | 9 | ## Description 10 | 11 | 12 | 13 | ## Why do you need this feature or component? 14 | 15 | 16 | 17 | ## Additional context 18 | 19 | 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/--support-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "📚 Support request" 3 | about: Ask for help with using Spectrum CSS 4 | title: "" 5 | labels: question 6 | assignees: pfulton, castastrophe 7 | --- 8 | 9 | ## Description 10 | 11 | 12 | 13 | ## Screenshots 14 | 15 | 16 | 17 | ## Environment 18 | 19 | - **Spectrum CSS version:** 20 | - **Browser(s) and OS(s):** 21 | 22 | ## Additional context 23 | 24 | 25 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | yarn commitlint --edit $1 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | yarn lint-staged --allow-empty --config lint-staged.config.js 2 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "markdownlint/style/prettier", 3 | "first-line-h1": false, 4 | "no-inline-html": false, 5 | "no-bare-urls": false, 6 | "no-duplicate-heading": { 7 | "siblings_only": true 8 | }, 9 | "code-block-style": { 10 | "style": "fenced" 11 | }, 12 | "code-fence-style": { 13 | "style": "backtick" 14 | }, 15 | "emphasis-style": { 16 | "style": "underscore" 17 | }, 18 | "strong-style": { 19 | "style": "asterisk" 20 | }, 21 | "ul-style": { 22 | "style": "dash" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /src 2 | /dist 3 | /node_modules 4 | /tasks 5 | /temp 6 | npm-debug.log 7 | /.github 8 | /components 9 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20.19.2 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Tooling config files 2 | **/.git 3 | **/.svn 4 | **/.hg 5 | **/node_modules 6 | 7 | # Compiled and generated files 8 | dist 9 | .storybook/storybook-static 10 | *-generated.css 11 | 12 | # Template files 13 | *.hbs 14 | 15 | # OS generated files 16 | .DS_Store* 17 | ehthumbs.db 18 | Icon? 19 | Thumbs.db 20 | *~ 21 | *.swp 22 | 23 | # Test files 24 | plugins/*/expected/*.css 25 | plugins/*/fixtures/*.css 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": true, 4 | "overrides": [ 5 | { 6 | "files": "*.css", 7 | "options": { 8 | "printWidth": 500 9 | } 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.storybook/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/preview 2 | 3 | The preview tool for Spectrum CSS is driven by [Storybook](https://storybook.js.org), a React-driven development environment that allows for in-depth exploration of components as they are being built. 4 | 5 | For more information on contributing to the Spectrum CSS project, please see the [development documentation](guides/develop.mdx) (rendered in storybook under the Guides category). 6 | 7 | To spin up the preview environment, run the following command: 8 | 9 | ```sh 10 | yarn start 11 | ``` 12 | 13 | This will start the Storybook server and open a new browser window with the preview environment. From there, you can explore the various components and their states, as well as the documentation for each component. Be sure to run commands from the root of the project. 14 | -------------------------------------------------------------------------------- /.storybook/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/favicon.png -------------------------------------------------------------------------------- /.storybook/assets/images/adobe_logo.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.storybook/assets/images/example-ava.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/example-ava.png -------------------------------------------------------------------------------- /.storybook/assets/images/example-ava@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/example-ava@2x.png -------------------------------------------------------------------------------- /.storybook/assets/images/example-card-landscape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/example-card-landscape.png -------------------------------------------------------------------------------- /.storybook/assets/images/example-card-portrait.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/example-card-portrait.png -------------------------------------------------------------------------------- /.storybook/assets/images/example-card-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/example-card-square.png -------------------------------------------------------------------------------- /.storybook/assets/images/flowers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/flowers.png -------------------------------------------------------------------------------- /.storybook/assets/images/github_logo.svg: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /.storybook/assets/images/gradient-background-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/gradient-background-dark.png -------------------------------------------------------------------------------- /.storybook/assets/images/gradient-background-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/gradient-background-light.png -------------------------------------------------------------------------------- /.storybook/assets/images/gray_migration-guide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/gray_migration-guide.png -------------------------------------------------------------------------------- /.storybook/assets/images/npm_logo.svg: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /.storybook/assets/images/spectrum-css_illustration_desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/spectrum-css_illustration_desktop.png -------------------------------------------------------------------------------- /.storybook/assets/images/spectrum_illustration_2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/spectrum_illustration_2x.png -------------------------------------------------------------------------------- /.storybook/assets/images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/.storybook/assets/images/thumbnail.png -------------------------------------------------------------------------------- /.storybook/decorators/arg-events.js: -------------------------------------------------------------------------------- 1 | import { makeDecorator, useArgs } from "@storybook/preview-api"; 2 | 3 | /** 4 | * @type import('@storybook/csf').Args 5 | */ 6 | 7 | /** 8 | * @type import('@storybook/csf').DecoratorFunction 9 | * @description Global properties added to each component; determines what stylesheets are loaded 10 | **/ 11 | export const withArgEvents = makeDecorator({ 12 | name: "withArgEvents", 13 | parameterName: "argEvents", 14 | wrapper: (StoryFn, context) => { 15 | /** @type {[Args, (newArgs: Partial) => void, (argNames?: (keyof Args)[]) => void]} */ 16 | const [, updateArgs] = useArgs(context.args); 17 | 18 | // Bind the updateArgs function for use in nested templates 19 | context.updateArgs = updateArgs; 20 | 21 | return StoryFn(context); 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /.storybook/loaders/font-loader.js: -------------------------------------------------------------------------------- 1 | export const FontLoader = async () => ({ 2 | fonts: new Promise((resolve) => { 3 | // First check if the fonts are already loaded 4 | if (typeof window.Typekit !== "undefined") resolve(); 5 | 6 | // Listen for a custom event indicating the Adobe Fonts have loaded 7 | document.addEventListener("typekit-loaded", () => { 8 | if (typeof window.Typekit !== "undefined") resolve(); 9 | }); 10 | }), 11 | }); 12 | -------------------------------------------------------------------------------- /.storybook/loaders/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | export { FontLoader } from "./font-loader.js"; 15 | export { IconLoader } from "./icon-loader.js"; 16 | -------------------------------------------------------------------------------- /.storybook/templates/DocumentationTemplate.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | Meta, 3 | Title, 4 | Subtitle, 5 | Description, 6 | Primary, 7 | ArgTypes, 8 | Stories, 9 | } from "@storybook/blocks"; 10 | import { ComponentDetails, TaggedReleases, PropertiesTable } from "../blocks"; 11 | 12 | 13 | 14 | 15 | <Subtitle /> 16 | <ComponentDetails /> 17 | 18 | <Description /> 19 | 20 | <Stories title="Variants" /> 21 | 22 | ## Properties 23 | 24 | The component accepts the following inputs (properties): 25 | 26 | <ArgTypes /> 27 | 28 | <PropertiesTable /> 29 | 30 | ## Tagged releases 31 | 32 | <TaggedReleases /> 33 | -------------------------------------------------------------------------------- /.storybook/types/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | import argTypes from "./args.js"; 15 | import globalTypes from "./global.js"; 16 | 17 | export * from "./states.js"; 18 | export * from "./variants.js"; 19 | export { argTypes, globalTypes }; 20 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | # Static utility assets 2 | tokens/custom-*/*.css 3 | generator 4 | 5 | # Compiled and generated files 6 | dist 7 | .storybook/storybook-static 8 | *-generated.css 9 | tools/bundle/src/*.css 10 | 11 | node_modules/**/*.css 12 | 13 | # Test files 14 | plugins/*/expected/*.css 15 | plugins/*/fixtures/*.css 16 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "atlassian.atlascode", 4 | "bierner.color-info", 5 | "bierner.lit-html", 6 | "dbaeumer.vscode-eslint", 7 | "esbenp.prettier-vscode", 8 | "figma.figma-vscode-extension", 9 | "github.copilot", 10 | "github.copilot-chat", 11 | "github.vscode-github-actions", 12 | "github.vscode-pull-request-github", 13 | "gruntfuggly.todo-tree", 14 | "joshbolduc.story-explorer", 15 | "kisstkondoros.csstriggers", 16 | "mariusschulz.yarn-lock-syntax", 17 | "me-dutour-mathieu.vscode-github-actions", 18 | "nrwl.angular-console", 19 | "oouo-diogo-perdigao.docthis", 20 | "rajdeepchandra.spectrum-design-tokens-for-vscode", 21 | "stylelint.vscode-stylelint", 22 | "vunguyentuan.vscode-css-variables", 23 | "vunguyentuan.vscode-postcss" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | cacheFolder: ./.yarn/cache 2 | 3 | nodeLinker: node-modules 4 | 5 | yarnPath: .yarn/releases/yarn-4.9.2.cjs 6 | -------------------------------------------------------------------------------- /COPYRIGHT: -------------------------------------------------------------------------------- 1 | Copyright 2024 Adobe. All rights reserved. 2 | 3 | This file is licensed to you under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. You may obtain a copy 5 | of the License at <http://www.apache.org/licenses/LICENSE-2.0> 6 | 7 | Unless required by applicable law or agreed to in writing, software distributed under 8 | the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 9 | OF ANY KIND, either express or implied. See the License for the specific language 10 | governing permissions and limitations under the License. 11 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["@commitlint/config-conventional"], 3 | rules: { 4 | "header-max-length": [0], 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /components/accordion/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/accordion 2 | 3 | > The Spectrum CSS accordion component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/accordion/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "accordion", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/accordion/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/actionbar/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/actionbar 2 | 3 | > The Spectrum CSS actionbar component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/actionbar/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "actionbar", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/actionbar/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/actionbutton/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/actionbutton 2 | 3 | > The Spectrum CSS action button component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/actionbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "actionbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/actiongroup/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/buttongroup 2 | 3 | > The Spectrum CSS buttongroup component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/actiongroup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "actiongroup", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/actiongroup/themes/spectrum.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--legacy */ 15 | 16 | @import "./spectrum-two.css"; 17 | -------------------------------------------------------------------------------- /components/actionmenu/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/actionmenu 2 | 3 | > The Spectrum CSS actionmenu component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/actionmenu/stories/actionmenu.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ActionMenuGroup = Variants({ 5 | Template, 6 | testData: [{ 7 | wrapperStyles: { 8 | "min-block-size": "200px", 9 | "align-items": "flex-start", 10 | }, 11 | }, { 12 | testHeading: "Closed menu", 13 | isOpen: false, 14 | wrapperStyles: { 15 | "min-block-size": "50px", 16 | }, 17 | }, { 18 | testHeading: "Custom icon", 19 | isOpen: false, 20 | iconName: "Add", 21 | iconSet: "workflow", 22 | wrapperStyles: { 23 | "min-block-size": "50px", 24 | }, 25 | }], 26 | }); 27 | -------------------------------------------------------------------------------- /components/alertbanner/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/alertbanner 2 | 3 | > The Spectrum CSS alertbanner component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/alertbanner/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "alertbanner", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/alertdialog/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/alertdialog 2 | 3 | > The Spectrum CSS alertdialog component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/alertdialog). 8 | -------------------------------------------------------------------------------- /components/alertdialog/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "alertdialog", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/asset/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/asset 2 | 3 | > The Spectrum CSS asset component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/asset/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "asset", 4 | "tags": ["component", "legacy"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/asset/stories/asset.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const AssetGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Image preset", 9 | }, 10 | { 11 | testHeading: "File preset", 12 | image: undefined, 13 | preset: "file", 14 | customStyles: { 15 | "min-inline-size": "150px", 16 | }, 17 | }, 18 | { 19 | testHeading: "Folder preset", 20 | image: undefined, 21 | preset: "folder", 22 | customStyles: { 23 | "min-inline-size": "150px", 24 | } 25 | }, 26 | ], 27 | }); 28 | -------------------------------------------------------------------------------- /components/asset/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/assetcard/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "assetcard", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/assetlist/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/assetlist 2 | 3 | > The Spectrum CSS assetlist component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/assetlist/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "assetlist", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/assetlist/stories/assetlist.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const AssetListGroup = Variants({ Template }); 5 | -------------------------------------------------------------------------------- /components/assetlist/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/avatar/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/avatar 2 | 3 | > The Spectrum CSS avatar component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/avatar/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "avatar", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/avatar/stories/avatar.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const AvatarGroup = Variants({ 5 | Template, 6 | stateData: [{ 7 | testHeading: "Not linked", 8 | hasLink: false, 9 | }, { 10 | testHeading: "Disabled", 11 | isDisabled: true, 12 | hasLink: false, 13 | }, { 14 | testHeading: "Focused", 15 | isFocused: true, 16 | }], 17 | sizeDirection: "row", 18 | }); 19 | -------------------------------------------------------------------------------- /components/badge/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/badge 2 | 3 | > The Spectrum CSS badge component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/badge/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "badge", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/breadcrumb/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/breadcrumb 2 | 3 | > The Spectrum CSS breadcrumb component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/breadcrumb/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "breadcrumb", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/button/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/button 2 | 3 | > The Spectrum CSS button component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/button/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "button", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/buttongroup/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/buttongroup 2 | 3 | > The Spectrum CSS buttongroup component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/buttongroup/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [ 4 | ".spectrum-ButtonGroup", 5 | ".spectrum-ButtonGroup-item", 6 | ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", 7 | ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" 8 | ], 9 | "modifiers": [ 10 | "--mod-buttongroup-justify-content", 11 | "--mod-buttongroup-spacing", 12 | "--mod-buttongroup-spacing-horizontal", 13 | "--mod-buttongroup-spacing-vertical" 14 | ], 15 | "component": [ 16 | "--spectrum-buttongroup-display", 17 | "--spectrum-buttongroup-flex-direction", 18 | "--spectrum-buttongroup-justify-content", 19 | "--spectrum-buttongroup-spacing" 20 | ], 21 | "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], 22 | "system-theme": [], 23 | "passthroughs": [], 24 | "high-contrast": [] 25 | } 26 | -------------------------------------------------------------------------------- /components/buttongroup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "buttongroup", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/calendar/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/calendar 2 | 3 | > The Spectrum CSS calendar component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/calendar/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "calendar", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/calendar/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/calendar/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-Calendar { 16 | --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/card/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/card 2 | 3 | > The Spectrum CSS card component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/card/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "card", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/card/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/checkbox/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/checkbox 2 | 3 | > The Spectrum CSS checkbox component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/checkbox/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "checkbox", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/clearbutton/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/clearbutton 2 | 3 | > The Spectrum CSS clearbutton component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/clearbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "clearbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/clearbutton/stories/clearbutton.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ClearButtonGroup = Variants({ 5 | Template, 6 | stateDirection: "row", 7 | sizeDirection: "row", 8 | testData: [ 9 | { 10 | testHeading: "Default", 11 | }, 12 | { 13 | testHeading: "Quiet", 14 | isQuiet: true, 15 | }, 16 | { 17 | testHeading: "Static white", 18 | staticColor: "white", 19 | }, 20 | { 21 | testHeading: "Static white - quiet", 22 | staticColor: "white", 23 | isQuiet: true, 24 | }, 25 | ], 26 | stateData: [ 27 | { 28 | testHeading: "Disabled", 29 | isDisabled: true, 30 | }, 31 | ] 32 | }); 33 | -------------------------------------------------------------------------------- /components/closebutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "closebutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/coachindicator/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/coachindicator 2 | 3 | > The Spectrum CSS Coach Indicator component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/coachindicator/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "coachindicator", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/coachindicator/stories/coachindicator.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const CoachIndicatorGroup = Variants({ 5 | Template, 6 | wrapperStyles: { 7 | "align-items": "center", 8 | "justify-content": "center", 9 | "border-radius": "4px", 10 | "min-inline-size": "60px", 11 | }, 12 | testData: [ 13 | { 14 | testHeading: "Default", 15 | variant: "default", 16 | }, 17 | { 18 | testHeading: "Static white", 19 | staticColor: "white" 20 | }, 21 | { 22 | testHeading: "Static black", 23 | staticColor: "black" 24 | }, 25 | ], 26 | stateData: [ 27 | { 28 | testHeading: "Quiet", 29 | isQuiet: true, 30 | }, 31 | ], 32 | }); 33 | -------------------------------------------------------------------------------- /components/coachmark/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/coachmark 2 | 3 | > The Spectrum CSS coachmark component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/coachmark/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "coachmark", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorarea/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/colorarea 2 | 3 | > The Spectrum CSS Color Area component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/colorarea/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "colorarea", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorarea/stories/colorarea.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ColorAreaGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Custom size", 12 | customWidth: "80px", 13 | customHeight: "80px", 14 | }, 15 | ], 16 | stateData: [ 17 | 18 | { 19 | testHeading: "Disabled", 20 | isDisabled: true, 21 | }, 22 | { 23 | testHeading: "Focused", 24 | isFocused: true, 25 | }, 26 | ], 27 | }); 28 | -------------------------------------------------------------------------------- /components/colorhandle/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/colorhandle 2 | 3 | > The Spectrum CSS Color Handle component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/colorhandle/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "colorhandle", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorhandle/stories/colorhandle.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ColorHandleGroup = Variants({ 5 | Template, 6 | wrapperStyles: { 7 | "justify-content": "center", 8 | }, 9 | testData: [ 10 | { 11 | testHeading: "Default", 12 | }, 13 | { 14 | testHeading: "With color loupe", 15 | isWithColorLoupe: true, 16 | }, 17 | ], 18 | stateData: [ 19 | { 20 | testHeading: "Disabled", 21 | isDisabled: true, 22 | isFocused: false, 23 | }, 24 | { 25 | testHeading: "Focused", 26 | isDisabled: false, 27 | isFocused: true, 28 | }, 29 | ], 30 | }); 31 | -------------------------------------------------------------------------------- /components/colorloupe/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/colorloupe 2 | 3 | > The Spectrum CSS Color Loupe component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/colorloupe/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "colorloupe", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorloupe/stories/colorloupe.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ColorLoupeGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | ], 11 | stateData: [ 12 | { 13 | testHeading: "Closed", 14 | isOpen: false, 15 | }, 16 | { 17 | testHeading: "Disabled", 18 | isDisabled: true, 19 | }, 20 | ], 21 | }); 22 | -------------------------------------------------------------------------------- /components/colorslider/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/colorslider 2 | 3 | > The Spectrum CSS Color slider component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/colorslider/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "colorslider", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorwheel/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/colorwheel 2 | 3 | > The Spectrum CSS Color Wheel component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/colorwheel/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "colorwheel", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/colorwheel/stories/colorwheel.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ColorWheelGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "With color area", 12 | isWithColorArea: true, 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Disabled", 18 | isDisabled: true, 19 | }, 20 | { 21 | testHeading: "Focused", 22 | isFocused: true, 23 | }, 24 | ], 25 | }); 26 | -------------------------------------------------------------------------------- /components/colorwheel/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/colorwheel/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-ColorWheel { 16 | --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/combobox/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/combobox 2 | 3 | > The Spectrum CSS combobox component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/combobox/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "combobox", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/commons/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/commons 2 | 3 | > Common mixins and variables for Spectrum CSS components 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/commons/index.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @import "./basebutton.css"; 15 | @import "./overlay.css"; 16 | -------------------------------------------------------------------------------- /components/commons/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "commons", 4 | "tags": ["utility"], 5 | "targets": { 6 | "build": { 7 | "executor": "nx:noop" 8 | }, 9 | "clean": { 10 | "executor": "nx:noop" 11 | }, 12 | "compare": { 13 | "executor": "nx:noop" 14 | }, 15 | "format": {}, 16 | "lint": {}, 17 | "report": { 18 | "executor": "nx:noop" 19 | }, 20 | "test": { 21 | "executor": "nx:noop" 22 | }, 23 | "validate": {} 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /components/contextualhelp/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/contextualhelp 2 | 3 | > The Spectrum CSS Contextual Help component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/contextualhelp). 8 | -------------------------------------------------------------------------------- /components/contextualhelp/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "contextualhelp", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/datepicker/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/datepicker 2 | 3 | > The Spectrum CSS datepicker component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/datepicker/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "datepicker", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/datepicker/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-DatePicker { 16 | --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/datepicker/themes/spectrum.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--legacy */ 15 | 16 | @import "./spectrum-two.css"; 17 | -------------------------------------------------------------------------------- /components/dial/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/components/dial/README.md -------------------------------------------------------------------------------- /components/dial/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "dial", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/dial/stories/dial.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const DialGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "With label", 12 | label: "Volume", 13 | withStates: false, 14 | }, 15 | ], 16 | stateData: [ 17 | { 18 | testHeading: "Disabled", 19 | isDisabled: true, 20 | }, 21 | { 22 | testHeading: "Focused", 23 | isFocusVisible: true, 24 | }, 25 | { 26 | testHeading: "Dragged", 27 | isDragged: true, 28 | }, 29 | ], 30 | }); 31 | -------------------------------------------------------------------------------- /components/dial/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/dialog/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/dialog 2 | 3 | > The Spectrum CSS dialog component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/dialog/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "dialog", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/divider/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/divider 2 | 3 | > The Spectrum CSS divider component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/divider/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "divider", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/divider/stories/divider.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const DividerGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | vertical: false, 10 | minDimensionValues: true, 11 | }, 12 | { 13 | testHeading: "Non-HR", 14 | tag: "div", 15 | vertical: false, 16 | minDimensionValues: true, 17 | }, 18 | { 19 | testHeading: "Vertical", 20 | vertical: true, 21 | minDimensionValues: true, 22 | }, 23 | { 24 | testHeading: "Static black", 25 | staticColor: "black", 26 | }, 27 | { 28 | testHeading: "Static white", 29 | staticColor: "white", 30 | }, 31 | ], 32 | }); 33 | -------------------------------------------------------------------------------- /components/divider/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/dropindicator/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/dropindicator 2 | 3 | > The Spectrum CSS dropindicator component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/dropindicator/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "dropindicator", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/dropindicator/stories/dropindicator.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const DropIndicatorGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Horizontal", 9 | direction: "horizontal", 10 | wrapperStyles: { 11 | "padding-block": "10px", 12 | } 13 | }, 14 | { 15 | testHeading: "Vertical", 16 | direction: "vertical", 17 | wrapperStyles: { 18 | "padding-inline": "10px", 19 | } 20 | }, 21 | ], 22 | }); 23 | -------------------------------------------------------------------------------- /components/dropzone/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/dropzone 2 | 3 | > The Spectrum CSS dropzone component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/dropzone/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "dropzone", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/dropzone/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/dropzone/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-DropZone { 16 | --spectrum-drop-zone-border-color: var(--spectrum-gray-200); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/fieldgroup/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/fieldgroup 2 | 3 | > The Spectrum CSS fieldgroup component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/fieldgroup/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [ 4 | ".spectrum-FieldGroup", 5 | ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout", 6 | ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-FieldGroup-item:not(:last-child)", 7 | ".spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-HelpText", 8 | ".spectrum-FieldGroup--sidelabel", 9 | ".spectrum-FieldGroup--toplabel", 10 | ".spectrum-FieldGroup--vertical .spectrum-FieldGroupInputLayout", 11 | ".spectrum-FieldGroupInputLayout" 12 | ], 13 | "modifiers": [], 14 | "component": [], 15 | "global": ["--spectrum-spacing-300"], 16 | "system-theme": [], 17 | "passthroughs": [], 18 | "high-contrast": [] 19 | } 20 | -------------------------------------------------------------------------------- /components/fieldgroup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "fieldgroup", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/fieldlabel/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/fieldlabel 2 | 3 | > The Spectrum CSS fieldlabel component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/fieldlabel/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "fieldlabel", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/floatingactionbutton/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/floatingactionbutton 2 | 3 | > The Spectrum CSS Floating action button component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/floatingactionbutton). 8 | -------------------------------------------------------------------------------- /components/floatingactionbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "floatingactionbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/floatingactionbutton/stories/floatingactionbutton.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const FloatingActionButtonGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Secondary", 12 | variant: "secondary", 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Hovered", 18 | isHovered: true, 19 | }, 20 | { 21 | testHeading: "Active", 22 | isActive: true, 23 | }, 24 | { 25 | testHeading: "Focused", 26 | isFocused: true, 27 | }, 28 | ] 29 | }); 30 | -------------------------------------------------------------------------------- /components/form/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/form 2 | 3 | > The Spectrum CSS form component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/form/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "form", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/form/stories/form.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const FormGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Side labels with left-aligned text", 12 | labelPosition: "side", 13 | }, 14 | { 15 | testHeading: "Side labels with right-aligned text", 16 | labelPosition: "side", 17 | fieldLabelAlignment: "right", 18 | } 19 | ], 20 | }); 21 | -------------------------------------------------------------------------------- /components/helptext/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adobe/spectrum-css/83f657879d61712605aa8317be31163fcfadc962/components/helptext/README.md -------------------------------------------------------------------------------- /components/helptext/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "helptext", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/icon/README.md: -------------------------------------------------------------------------------- 1 | # `@spectrum-css/icon` 2 | 3 | The icons component contains the CSS for UI and workflow icons. 4 | -------------------------------------------------------------------------------- /components/icon/index.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @import "./icons.css"; 15 | @import "./workflow-icons.css"; 16 | @import "./ui-icons.css"; 17 | -------------------------------------------------------------------------------- /components/icon/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "icon", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/illustratedmessage/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/illustratedmessage 2 | 3 | > The Spectrum CSS illustratedmessage component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/illustratedmessage/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "illustratedmessage", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/illustratedmessage/stories/illustratedmessage.test.js: -------------------------------------------------------------------------------- 1 | import { Template as Link } from "@spectrum-css/link/stories/template.js"; 2 | import { Variants } from "@spectrum-css/preview/decorators"; 3 | import { html } from "lit"; 4 | import { Template } from "./template.js"; 5 | 6 | export const IllustratedMessageGroup = Variants({ 7 | Template, 8 | testData: [{ 9 | heading: "Error 404: Page not found", 10 | description: [ 11 | "This page isn't available. Try checking the URL or visit a different page.", 12 | ], 13 | useAccentColor: false, 14 | }, { 15 | testHeading: "With accent color", 16 | heading: "Drag and drop your file", 17 | description: [ 18 | () => { 19 | return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; 20 | }, 21 | ], 22 | useAccentColor: true, 23 | } 24 | ], 25 | }); 26 | -------------------------------------------------------------------------------- /components/infieldbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "infieldbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/inlinealert/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/inlinealert 2 | 3 | > The Spectrum CSS in-line alert component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/inlinealert/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "inlinealert", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/link/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/link 2 | 3 | > The Spectrum CSS link component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/link/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "link", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/logicbutton/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/logicbutton 2 | 3 | > The Spectrum CSS logicbutton component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/logicbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "logicbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/logicbutton/stories/logicbutton.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const LogicButtonGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "And variant", 9 | }, 10 | { 11 | testHeading: "Or variant", 12 | variant: "or", 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Disabled", 18 | isDisabled: true, 19 | }, 20 | ] 21 | }); 22 | -------------------------------------------------------------------------------- /components/logicbutton/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/menu/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/menu 2 | 3 | > The Spectrum CSS menu component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/menu/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "menu", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/menu/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/meter/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/meter 2 | 3 | > The Spectrum CSS meter component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/meter/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "meter", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/miller/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/miller 2 | 3 | > The Spectrum CSS miller component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/miller/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [ 4 | ".spectrum-MillerColumns", 5 | ".spectrum-MillerColumns-item", 6 | ".spectrum-MillerColumns-item:first-child" 7 | ], 8 | "modifiers": [ 9 | "--mod-millercolumns-inline-size", 10 | "--mod-millercolumns-margin-inline-end", 11 | "--mod-millercolumns-margin-inline-start", 12 | "--mod-millercolumns-padding" 13 | ], 14 | "component": [], 15 | "global": ["--spectrum-spacing-100"], 16 | "system-theme": [], 17 | "passthroughs": [], 18 | "high-contrast": [] 19 | } 20 | -------------------------------------------------------------------------------- /components/miller/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "miller", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/modal/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/modal 2 | 3 | > The Spectrum CSS modal component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/modal/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "modal", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/modal/stories/modal.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ModalGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Standard", 9 | skipWrapper: false, 10 | }, 11 | ] 12 | }); 13 | -------------------------------------------------------------------------------- /components/modal/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/modal/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-Modal { 16 | --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/opacitycheckerboard/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/opacitycheckerboard 2 | 3 | > Opacity checkerboard is a class used to highlight background color opacity. 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/opacitycheckerboard). 8 | -------------------------------------------------------------------------------- /components/opacitycheckerboard/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [".spectrum-OpacityCheckerboard"], 4 | "modifiers": [ 5 | "--mod-opacity-checkerboard-dark", 6 | "--mod-opacity-checkerboard-light", 7 | "--mod-opacity-checkerboard-position", 8 | "--mod-opacity-checkerboard-size" 9 | ], 10 | "component": [ 11 | "--spectrum-opacity-checkerboard-square-dark", 12 | "--spectrum-opacity-checkerboard-square-light", 13 | "--spectrum-opacity-checkerboard-square-size" 14 | ], 15 | "global": [], 16 | "system-theme": [], 17 | "passthroughs": [], 18 | "high-contrast": [] 19 | } 20 | -------------------------------------------------------------------------------- /components/opacitycheckerboard/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "opacitycheckerboard", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/opacitycheckerboard/stories/opacitycheckerboard.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const OpacityCheckboardGroup = Variants({ 5 | Template, 6 | }); 7 | -------------------------------------------------------------------------------- /components/page/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/page 2 | 3 | > The Spectrum CSS page component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/page/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [":root"], 4 | "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], 5 | "component": [ 6 | "--spectrum-page-background-color", 7 | "--spectrum-page-content-tap-highlight" 8 | ], 9 | "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], 10 | "system-theme": [ 11 | "--system-root-page-background-color", 12 | "--system-root-page-content-tap-highlight" 13 | ], 14 | "passthroughs": [], 15 | "high-contrast": [] 16 | } 17 | -------------------------------------------------------------------------------- /components/page/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "page", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/page/stories/page.stories.js: -------------------------------------------------------------------------------- 1 | import metadata from "../dist/metadata.json"; 2 | import packageJson from "../package.json"; 3 | import { PageGroup } from "./page.test.js"; 4 | 5 | /** 6 | * A page component is... 7 | */ 8 | export default { 9 | title: "Page", 10 | component: "Page", 11 | argTypes: { 12 | content: { table: { disable: true } }, 13 | }, 14 | args: { 15 | content: [] 16 | }, 17 | parameters: { 18 | layout: "fullscreen", 19 | docs: { 20 | story: { 21 | inline: false, 22 | height: "400px", 23 | width: "800px" 24 | }, 25 | }, 26 | packageJson, 27 | metadata, 28 | }, 29 | tags: ["!autodocs", "!dev"] 30 | }; 31 | 32 | export const Default = PageGroup.bind({}); 33 | Default.args = { 34 | content: [], 35 | }; 36 | Default.parameters = { 37 | chromatic: { disableSnapshot: true }, 38 | }; 39 | -------------------------------------------------------------------------------- /components/page/stories/page.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const PageGroup = Variants({ 5 | Template, 6 | skipBorders: true, 7 | testData: [ 8 | { 9 | testHeading: "Standard", 10 | skipWrapper: true, 11 | }, 12 | ] 13 | }); 14 | -------------------------------------------------------------------------------- /components/page/stories/template.js: -------------------------------------------------------------------------------- 1 | import { renderContent } from "@spectrum-css/preview/decorators"; 2 | import { html } from "lit"; 3 | 4 | import "../index.css"; 5 | import "../themes/spectrum.css"; 6 | /* Must be imported last */ 7 | import "../themes/express.css"; 8 | 9 | export const Template = ({ content = [] } = {}, context = {}) => { 10 | return html`${renderContent(content, { context })}`; 11 | }; 12 | -------------------------------------------------------------------------------- /components/page/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/pagination/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/pagination 2 | 3 | > The Spectrum CSS pagination component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/pagination/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "pagination", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/pagination/stories/pagination.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const PaginationGroup = Variants({ 5 | Template, 6 | sizeDirection: "column", 7 | testData: [ 8 | { 9 | testHeading: "Listing", 10 | variant: "listing", 11 | }, 12 | { 13 | testHeading: "Explicit", 14 | variant: "explicit", 15 | }, 16 | ] 17 | }); 18 | -------------------------------------------------------------------------------- /components/picker/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/picker 2 | 3 | > The Spectrum CSS picker component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/picker/embed/Down-Chevron.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><rect x="1" y="1" width="10" height="6" style="fill:#ff13dc;opacity:0"/><path style="fill:var(--color,black)" d="M11 2a1 1 0 0 0-1.7-0.7L6 4.6 2.7 1.3A1 1 0 1 0 1.3 2.7l4 4a1 1 0 0 0 1.4 0l4-4A1 1 0 0 0 11 2Z"/></svg> -------------------------------------------------------------------------------- /components/picker/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "picker", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/pickerbutton/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/pickerbutton 2 | 3 | > The Spectrum CSS pickerbutton component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/pickerbutton/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "pickerbutton", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/pickerbutton/stories/pickerbutton.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const PickerGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "With label", 12 | label: "Select", 13 | }, 14 | { 15 | testHeading: "Quiet", 16 | isQuiet: true, 17 | }, 18 | { 19 | testHeading: "Rounded", 20 | isRounded: true, 21 | }, 22 | { 23 | testHeading: "Position: left", 24 | position: "left", 25 | } 26 | ], 27 | stateData: [ 28 | { 29 | testHeading: "Disabled", 30 | isDisabled: true, 31 | }, 32 | { 33 | testHeading: "Focused", 34 | isFocused: true, 35 | }, 36 | ] 37 | }); 38 | -------------------------------------------------------------------------------- /components/popover/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/popover 2 | 3 | > The Spectrum CSS popover component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/popover/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "popover", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/popover/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-Popover { 16 | --spectrum-popover-border-width: var(--spectrum-border-width-100); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/popover/themes/spectrum.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--legacy */ 15 | 16 | @import "./spectrum-two.css"; 17 | -------------------------------------------------------------------------------- /components/progressbar/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/progressbar 2 | 3 | > The Spectrum CSS progressbar component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/progressbar/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "progressbar", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/progressbar/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/progresscircle/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/progresscircle 2 | 3 | > The Spectrum CSS progresscircle component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/progresscircle/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "progresscircle", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/progresscircle/stories/progresscircle.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const ProgressCircleGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Static white", 12 | staticColor: "white", 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Indeterminate", 18 | isIndeterminate: true, 19 | } 20 | ] 21 | }); 22 | -------------------------------------------------------------------------------- /components/progresscircle/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/radio/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/radio 2 | 3 | > The Spectrum CSS radio component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/radio/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "radio", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/radio/stories/radio.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const RadioGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default" 9 | }, 10 | { 11 | testHeading: "Emphasized", 12 | isEmphasized: true, 13 | }, 14 | { 15 | testHeading: "Truncation", 16 | withStates: false, 17 | label: "Emphasized radio button label that is so long it has to wrap", 18 | customStyles: { 19 | "max-width": "220px", 20 | } 21 | 22 | } 23 | ], 24 | stateData: [ 25 | { 26 | testHeading: "Checked", 27 | isChecked: true, 28 | }, 29 | { 30 | testHeading: "Disabled", 31 | isDisabled: true, 32 | }, 33 | { 34 | testHeading: "Read-only", 35 | isReadOnly: true, 36 | }, 37 | ] 38 | }); 39 | -------------------------------------------------------------------------------- /components/rating/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/rating 2 | 3 | > The Spectrum CSS rating component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/rating/embed/S_StarOutline_18_N@2x.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" enable-background="new 0 0 36 36"><path style="fill:var(--color, black);" d="M18 7.9l2.2 5.8.7 1.9 2 .1 6.3.3-4.9 3.9-1.5 1.2.5 1.9 1.6 6-5.2-3.4-1.7-1.1-1.6 1.1-5.3 3.5 1.7-6.1.5-1.9-1.5-1.2-4.9-3.9 6.3-.3 1.9-.1.7-1.8 2.2-5.9m.1-7.1c-.3 0-.6.2-.7.5l-4.4 11.4-12.2.5c-.4 0-.7.4-.7.8 0 .2.1.4.3.5l9.5 7.6-3.3 11.9c-.1.4.1.8.5.9h.2c.1 0 .3 0 .4-.1l10.3-6.7 10.2 6.6c.1.1.3.1.4.1.4 0 .8-.3.8-.8v-.2l-3.2-11.7 9.5-7.7c.3-.3.4-.7.1-1.1-.1-.2-.3-.3-.5-.3l-12.3-.3-4.2-11.4c-.1-.3-.4-.5-.7-.5z"/></svg> 2 | -------------------------------------------------------------------------------- /components/rating/embed/S_Star_18_N@2x.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"> 2 | <path style="fill:var(--color, black);" d="M18.477.593,22.8,12.029l12.212.578a.51.51,0,0,1,.295.907l-9.54,7.646,3.224,11.793a.51.51,0,0,1-.772.561L18,26.8,7.78,33.515a.51.51,0,0,1-.772-.561l3.224-11.793L.692,13.515a.51.51,0,0,1,.295-.907L13.2,12.029,17.523.593A.51.51,0,0,1,18.477.593Z"/> 3 | </svg> -------------------------------------------------------------------------------- /components/rating/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "rating", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/rating/stories/rating.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const RatingGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Emphasized", 12 | isEmphasized: true, 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Disabled", 18 | isDisabled: true, 19 | }, 20 | { 21 | testHeading: "Focused", 22 | isFocused: true, 23 | }, 24 | { 25 | testHeading: "Read-only", 26 | isReadOnly: true, 27 | }, 28 | ] 29 | }); 30 | -------------------------------------------------------------------------------- /components/search/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/search 2 | 3 | > The Spectrum CSS search component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/search/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "search", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/search/stories/search.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const SearchGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Quiet", 12 | isQuiet: true, 13 | }, 14 | ], 15 | stateData: [ 16 | { 17 | testHeading: "Disabled", 18 | isDisabled: true, 19 | }, 20 | ] 21 | }); 22 | -------------------------------------------------------------------------------- /components/sidenav/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/sidenav 2 | 3 | > The Spectrum CSS sidenav component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/sidenav/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "sidenav", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/sidenav/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/slider/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/slider 2 | 3 | > The Spectrum CSS slider component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/slider/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "slider", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/splitview/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/splitview 2 | 3 | > The Spectrum CSS splitview component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/splitview/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "splitview", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/splitview/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/statuslight/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/statuslight 2 | 3 | > The Spectrum CSS statuslight component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/statuslight/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "statuslight", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/steplist/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/steplist 2 | 3 | > The Spectrum CSS steplist component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/steplist/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "steplist", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/steplist/stories/steplist.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const SteplistGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Small", 12 | isSmall: true, 13 | }, 14 | { 15 | testHeading: "Interactive", 16 | isInteractive: true, 17 | }, 18 | { 19 | testHeading: "With tooltip", 20 | withTooltip: true, 21 | }, 22 | ], 23 | }); 24 | -------------------------------------------------------------------------------- /components/steplist/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/stepper/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/stepper 2 | 3 | > The Spectrum CSS stepper component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/stepper/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "stepper", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/swatch/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "swatch", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/swatch/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/swatchgroup/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [ 4 | ".spectrum-SwatchGroup", 5 | ".spectrum-SwatchGroup--compact", 6 | ".spectrum-SwatchGroup--spacious" 7 | ], 8 | "modifiers": [ 9 | "--mod-swatchgroup-spacing-compact", 10 | "--mod-swatchgroup-spacing-regular", 11 | "--mod-swatchgroup-spacing-spacious" 12 | ], 13 | "component": ["--spectrum-swatchgroup-spacing"], 14 | "global": [ 15 | "--spectrum-spacing-100", 16 | "--spectrum-spacing-50", 17 | "--spectrum-spacing-75" 18 | ], 19 | "system-theme": [], 20 | "passthroughs": [], 21 | "high-contrast": [] 22 | } 23 | -------------------------------------------------------------------------------- /components/swatchgroup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "swatchgroup", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/switch/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/switch 2 | 3 | > The Spectrum CSS switch component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/switch/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "switch", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/switch/stories/switch.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const SwitchGroup = Variants({ 5 | Template, 6 | testData: [ 7 | { 8 | testHeading: "Default", 9 | }, 10 | { 11 | testHeading: "Emphasized", 12 | isEmphasized: true, 13 | }, 14 | { 15 | testHeading: "Wrapped", 16 | label: "A longer switch label that will wrap if there is not enough space", 17 | customStyles: {"max-width": "200px"}, 18 | withStates: false, 19 | }, 20 | ], 21 | stateData: [ 22 | { 23 | testHeading: "Disabled", 24 | isDisabled: true, 25 | }, 26 | { 27 | testHeading: "Checked", 28 | isChecked: true, 29 | }, 30 | { 31 | testHeading: "Checked and disabled", 32 | isChecked: true, 33 | isDisabled: true, 34 | }, 35 | ] 36 | }); 37 | -------------------------------------------------------------------------------- /components/table/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/table 2 | 3 | > The Spectrum CSS table component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/table/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "table", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/table/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/tabs/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/tabs 2 | 3 | > The Spectrum CSS tabs component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/tabs/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "tabs", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/tag/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/tag 2 | 3 | > The Spectrum CSS tags component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/tag/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "tag", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/taggroup/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/taggroup 2 | 3 | > The Spectrum CSS tags component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/taggroup/dist/metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceFile": "index.css", 3 | "selectors": [".spectrum-TagGroup", ".spectrum-TagGroup-item"], 4 | "modifiers": [ 5 | "--mod-tag-group-item-margin-block", 6 | "--mod-tag-group-item-margin-inline" 7 | ], 8 | "component": [ 9 | "--spectrum-tag-group-item-margin-block", 10 | "--spectrum-tag-group-item-margin-inline" 11 | ], 12 | "global": ["--spectrum-spacing-75"], 13 | "system-theme": [], 14 | "passthroughs": [], 15 | "high-contrast": [] 16 | } 17 | -------------------------------------------------------------------------------- /components/taggroup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "taggroup", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/textfield/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/textfield 2 | 3 | > The Spectrum CSS textfield component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/textfield/embed/AlertMedium.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18"><path style="fill:var(--color,black)" d="M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z"/></svg> -------------------------------------------------------------------------------- /components/textfield/embed/CheckmarkMedium.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 12 12" width="12"><path style="fill:var(--color,black)" d="M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z"/></svg> -------------------------------------------------------------------------------- /components/textfield/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "textfield", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/thumbnail/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/thumbnail 2 | 3 | > The Spectrum CSS thumbnail component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/thumbnail/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "thumbnail", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/thumbnail/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/thumbnail/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-Thumbnail { 16 | --spectrum-thumbnail-border-radius: 2px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/toast/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/toast 2 | 3 | > The Spectrum CSS toast component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/toast/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "toast", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/tooltip/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/tooltip 2 | 3 | > The Spectrum CSS tooltip component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/tooltip/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "tooltip", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/tooltip/themes/spectrum.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--legacy */ 15 | 16 | @import "./spectrum-two.css"; 17 | -------------------------------------------------------------------------------- /components/tray/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/tray 2 | 3 | > The Spectrum CSS tray component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/tray/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "tray", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/tray/stories/tray.test.js: -------------------------------------------------------------------------------- 1 | import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js"; 2 | import { Variants } from "@spectrum-css/preview/decorators"; 3 | import { Template } from "./template.js"; 4 | 5 | export const TrayGroup = Variants({ 6 | Template, 7 | testData: [ 8 | { 9 | content: [ 10 | (passthroughs, context) => Dialog({ 11 | ...passthroughs, 12 | heading: "You have new messages waiting in your inbox", 13 | content: ["You have 5 new messages! This notification is extra long so it wraps to the next line"], 14 | isDismissible: true, 15 | }, context) 16 | ], 17 | }, 18 | ], 19 | }); 20 | -------------------------------------------------------------------------------- /components/treeview/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/treeview 2 | 3 | > The Spectrum CSS treeview component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/treeview/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "treeview", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/treeview/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/typography/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/typography 2 | 3 | > The Spectrum CSS typography component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/typography/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "typography", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/underlay/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/underlay 2 | 3 | > The Spectrum CSS underlay component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/underlay/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "underlay", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/well/README.md: -------------------------------------------------------------------------------- 1 | # @spectrum-css/well 2 | 3 | > The Spectrum CSS well component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. 8 | -------------------------------------------------------------------------------- /components/well/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "well", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/well/stories/well.test.js: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const WellGroup = Variants({ 5 | Template, 6 | testData: [{}], 7 | }); 8 | -------------------------------------------------------------------------------- /components/well/themes/express.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | /* @combine .spectrum.spectrum--express */ 15 | 16 | @import "./spectrum.css"; 17 | -------------------------------------------------------------------------------- /components/well/themes/spectrum-two.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright 2024 Adobe. All rights reserved. 3 | * 4 | * This file is licensed to you under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. You may obtain a copy 6 | * of the License at <http://www.apache.org/licenses/LICENSE-2.0> 7 | * 8 | * Unless required by applicable law or agreed to in writing, software distributed under 9 | * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS 10 | * OF ANY KIND, either express or implied. See the License for the specific language 11 | * governing permissions and limitations under the License. 12 | */ 13 | 14 | @container style(--system: spectrum) { 15 | .spectrum-Well { 16 | --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist/" 3 | command = "yarn build:docs" 4 | 5 | # If skip_processing = true, all other settings are ignored 6 | [build.processing] 7 | skip_processing = false 8 | [build.processing.css] 9 | bundle = true 10 | minify = true 11 | [build.processing.js] 12 | bundle = true 13 | minify = true 14 | [build.processing.html] 15 | pretty_urls = true 16 | [build.processing.images] 17 | compress = true 18 | 19 | # Skip all post processing in deploy previews, 20 | # ignoring any other settings 21 | [context.deploy-preview.processing] 22 | skip_processing = true 23 | -------------------------------------------------------------------------------- /plugins/postcss-add-theming-layer/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "postcss-add-theming-layer", 4 | "tags": ["tooling", "postcss"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/postcss-property-rollup/expected/basic.css: -------------------------------------------------------------------------------- 1 | .spectrum--express { 2 | --spectrum-actionbutton-background-color: purple; 3 | --spectrum-actionbutton-border-color: transparent; 4 | } 5 | -------------------------------------------------------------------------------- /plugins/postcss-property-rollup/fixtures/basic.css: -------------------------------------------------------------------------------- 1 | /* @combine */ 2 | .spectrum { 3 | --spectrum-actionbutton-background-color: blue; 4 | --spectrum-actionbutton-border-color: transparent; 5 | } 6 | 7 | .spectrum--express { 8 | --spectrum-actionbutton-background-color: purple; 9 | } 10 | -------------------------------------------------------------------------------- /plugins/postcss-property-rollup/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "postcss-property-rollup", 4 | "tags": ["tooling", "postcss"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/postcss-rgb-mapping/fixtures/basic.css: -------------------------------------------------------------------------------- 1 | .elements { 2 | --seafoam-100: rgba(206, 247, 243); 3 | --seafoam-200: rgba(206, 247, 243, 0.5); 4 | --seafoam-300: rgb(206, 247, 243); 5 | --spectrum-transparent-white-100: rgba(100, 100, 100, 0.5); 6 | --disabled-static-white-background-color: var(--spectrum-transparent-white-100); 7 | } 8 | -------------------------------------------------------------------------------- /plugins/postcss-rgb-mapping/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "postcss-rgb-mapping", 4 | "tags": ["tooling", "postcss", "plugin"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/stylelint-no-missing-var/fixtures/missing-var.css: -------------------------------------------------------------------------------- 1 | .spectrum-Button { 2 | color: --spectrum-well-color; 3 | background-color: (--spectrum-well-background-color); 4 | border-color: var(--spectrum-well-border-color); 5 | } 6 | -------------------------------------------------------------------------------- /plugins/stylelint-no-missing-var/fixtures/passing.css: -------------------------------------------------------------------------------- 1 | .spectrum-Button { 2 | color: var(--spectrum-well-color); 3 | background-color: var(--spectrum-well-background-color); 4 | border-color: var(--spectrum-well-border-color); 5 | } 6 | -------------------------------------------------------------------------------- /plugins/stylelint-no-missing-var/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "stylelint-no-missing-var", 4 | "tags": ["tooling", "stylelint", "plugin"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unknown-custom-properties/fixtures/passing.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --prefix-component-background-color: blue; 3 | --prefix-component-width: 10px; 4 | --prefix-component-height: 10px; 5 | } 6 | 7 | .component { 8 | background-color: var(--prefix-component-background-color); 9 | 10 | width: var(--prefix-component-width); 11 | height: var(--prefix-component-height); 12 | } 13 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unknown-custom-properties/fixtures/unknown-prop.css: -------------------------------------------------------------------------------- 1 | .component { 2 | --prefix-component-background-color: blue; 3 | 4 | background-color: var(--prefix-component-background-color); 5 | 6 | width: var(--prefix-component-width); 7 | height: var(--prefix-component-height); 8 | } 9 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unknown-custom-properties/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "stylelint-no-unknown-custom-properties", 4 | "tags": ["tooling", "stylelint"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/expected/unused.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --prefix-component-background-color: blue; 3 | --prefix-component-border-color: blue; 4 | --prefix-component-width: 10px; 5 | --prefix-component-height: 10px; 6 | } 7 | 8 | .component { 9 | inline-size: var(--prefix-component-width); 10 | block-size: var(--prefix-component-height); 11 | background-color: var(--prefix-component-background-color); 12 | border-color: var(--other-color, var(--prefix-component-border-color)); 13 | } 14 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/expected/varRefs.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: gray; 3 | --blue: blue; 4 | --orange: orange; 5 | --default: var(--gray); 6 | --focus: var(--blue); 7 | } 8 | 9 | .component { 10 | background-color: var(--default); 11 | } 12 | 13 | .component:focus { 14 | background-color: var(--focus); 15 | } 16 | 17 | .component:active { 18 | background-color: var(--orange); 19 | } 20 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/fixtures/passing.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --prefix-component-background-color: blue; 3 | --prefix-component-border-color: blue; 4 | --prefix-component-width: 10px; 5 | --prefix-component-height: 10px; 6 | } 7 | 8 | .component { 9 | background-color: var(--prefix-component-background-color); 10 | 11 | border-color: var(--other-color, var(--prefix-component-border-color)); 12 | 13 | width: var(--prefix-component-width); 14 | height: var(--prefix-component-height); 15 | } 16 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/fixtures/passthrough.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: gray; 3 | --blue: blue; 4 | --green: green; 5 | --orange: orange; 6 | --default: var(--gray); 7 | --focus: var(--blue); 8 | --active: var(--orange); 9 | } 10 | 11 | .component { 12 | /* @passthrough */ 13 | --nested-component-property: var(--green); 14 | 15 | background-color: var(--default); 16 | } 17 | 18 | .component:focus { 19 | background-color: var(--focus); 20 | } 21 | 22 | .component:active { 23 | /* @passthroughs start */ 24 | --nested-component-color: var(--active); 25 | --nested-component-background-color: var(--orange); 26 | /* @passthroughs end */ 27 | 28 | background-color: var(--orange); 29 | } 30 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/fixtures/unused.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --prefix-component-background-color: blue; 3 | --prefix-component-border-color: blue; 4 | --prefix-component-width: 10px; 5 | --prefix-component-height: 10px; 6 | --prefix-component-size: 10px; 7 | } 8 | 9 | .component { 10 | background-color: var(--prefix-component-background-color); 11 | 12 | border-color: var(--other-color, var(--prefix-component-border-color)); 13 | 14 | width: var(--prefix-component-width); 15 | height: var(--prefix-component-height); 16 | } 17 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/fixtures/varRefs.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray: gray; 3 | --blue: blue; 4 | --green: green; 5 | --orange: orange; 6 | --default: var(--gray); 7 | --focus: var(--blue); 8 | --selected: var(--green); 9 | --active: var(--orange); 10 | } 11 | 12 | .component { 13 | background-color: var(--default); 14 | } 15 | 16 | .component:focus { 17 | background-color: var(--focus); 18 | } 19 | 20 | .component:active { 21 | background-color: var(--orange); 22 | } 23 | -------------------------------------------------------------------------------- /plugins/stylelint-no-unused-custom-properties/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "stylelint-no-unused-custom-properties", 4 | "tags": ["tooling", "stylelint"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | }, 12 | "test": { 13 | "defaultConfiguration": "plugins" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /plugins/stylelint-theme-alignment/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "stylelint-theme-alignment", 4 | "tags": ["tooling", "stylelint"], 5 | "targets": { 6 | "format": { 7 | "defaultConfiguration": "plugins" 8 | }, 9 | "lint": { 10 | "defaultConfiguration": "plugins" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tokens/utilities/attribute-sets-transform.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: "attribute", 3 | name: "attribute/sets", 4 | filter: (token) => token.path.includes("sets"), 5 | transform: (token) => { 6 | return { 7 | sets: token.path.filter( 8 | (_, index, array) => array[index - 1] == "sets" 9 | ), 10 | }; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /tokens/utilities/index.js: -------------------------------------------------------------------------------- 1 | export { default as AttributeSetsTransform } from "./attribute-sets-transform.js"; 2 | export { default as CSSOpenTypeTransform } from "./css-font-open-type-transform.js"; 3 | export { default as CSSSetsFormatter } from "./css-sets-formatter.js"; 4 | export { default as DataJsonFormatter } from "./data-json-formatter.js"; 5 | export { default as NameKebabTransfom } from "./name-kebab-transform.js"; 6 | -------------------------------------------------------------------------------- /tokens/utilities/name-kebab-transform.js: -------------------------------------------------------------------------------- 1 | import { kebabCase } from "lodash-es"; 2 | 3 | export default { 4 | type: "name", 5 | name: "name/kebab", 6 | transform: (token, options) => 7 | kebabCase([options.prefix].concat(token.path).join(" ")), 8 | }; 9 | -------------------------------------------------------------------------------- /tools/bundle/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.0.1 4 | 5 | ### Patch Changes 6 | 7 | - [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project. 8 | 9 | ## 1.0.0 10 | 11 | ### Major Changes 12 | 13 | 📝 [#3477](https://github.com/adobe/spectrum-css/pull/3477) [`d52c701`](https://github.com/adobe/spectrum-css/commit/d52c70196bf2d17433c239313a82f00f75d77e79) Thanks [@castastrophe](https://github.com/castastrophe)! 14 | 15 | - Resurrecting the CSS bundle for development use. Excellent resource for generating quick demo pages by loading all the CSS components in the library in a pre-bundled package with tokens pre-loaded and minified to remove unused tokens. 16 | -------------------------------------------------------------------------------- /tools/bundle/README.md: -------------------------------------------------------------------------------- 1 | # @adobe/spectrum-css bundle 2 | 3 | This package builds a bundle package containing backwards-compatible versions of all Spectrum CSS components. 4 | 5 | This package should be used for demo or development purposes only and is not designed to be used in a production environment. 6 | -------------------------------------------------------------------------------- /tools/generator/templates/README.md.hbs: -------------------------------------------------------------------------------- 1 | # @spectrum-css/{{ folderName }} 2 | 3 | > The Spectrum CSS {{ name }} component 4 | 5 | This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). 6 | 7 | See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/{{ folderName }}). 8 | -------------------------------------------------------------------------------- /tools/generator/templates/project.json.hbs: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 3 | "name": "{{ folderName }}", 4 | "tags": ["component"], 5 | "targets": { 6 | "build": {}, 7 | "clean": {}, 8 | "compare": {}, 9 | "format": {}, 10 | "lint": {}, 11 | "report": {}, 12 | "test": { 13 | "defaultConfiguration": "scope" 14 | }, 15 | "validate": {} 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tools/generator/templates/stories/{{ folderName }}.test.js.hbs: -------------------------------------------------------------------------------- 1 | import { Variants } from "@spectrum-css/preview/decorators"; 2 | import { Template } from "./template.js"; 3 | 4 | export const {{ pascalCase name }}Group = Variants({ 5 | Template, 6 | testData: [{}], 7 | stateData: [{ 8 | testHeading: "Disabled", 9 | isDisabled: true, 10 | }], 11 | }); 12 | -------------------------------------------------------------------------------- /ui-icons/large/Arrow100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M12.93 6.227L9.023 2.32a1.094 1.094 0 10-1.546 1.547l2.039 2.04H1.844a1.094 1.094 0 100 2.187h7.672l-2.04 2.039a1.094 1.094 0 001.547 1.547l3.907-3.907a1.093 1.093 0 000-1.546z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.606 7.194l-4.458-4.459a1.14 1.14 0 10-1.612 1.612L11.05 6.86H2.108a1.14 1.14 0 000 2.28h8.942l-2.514 2.513a1.14 1.14 0 101.611 1.612l4.46-4.46a1.139 1.139 0 000-1.61z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M15.364 7.161l-5.083-5.083a1.186 1.186 0 00-1.678 1.678l3.057 3.058H1.277a1.187 1.187 0 100 2.373H11.66l-3.056 3.057a1.186 1.186 0 101.677 1.678l5.083-5.083a1.185 1.185 0 000-1.678z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M17.216 8.126l-5.79-5.79a1.236 1.236 0 00-1.746 1.75l3.683 3.683c-.008 0-.014-.004-.021-.004H1.337a1.236 1.236 0 000 2.472H13.34c.007 0 .013-.004.02-.004l-3.68 3.682a1.236 1.236 0 101.748 1.748l5.789-5.789a1.237 1.237 0 000-1.748zm-2.643.895c0-.008.004-.014.004-.021s-.004-.013-.004-.02l.02.02z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M20.17 10.089l-6.585-6.585a1.289 1.289 0 00-1.822 1.822l4.386 4.386H2.276a1.288 1.288 0 000 2.576h13.873l-4.386 4.386a1.289 1.289 0 001.822 1.822l6.585-6.585a1.289 1.289 0 000-1.822z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.24 11.052l-7.485-7.485a1.341 1.341 0 00-1.897 1.897l5.194 5.194H2.079a1.342 1.342 0 000 2.684h15.973l-5.194 5.194a1.341 1.341 0 101.897 1.897l7.484-7.485a1.34 1.34 0 000-1.896z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Arrow75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11.325 5.258L7.91 1.84a1.05 1.05 0 00-1.486 1.484L8.048 4.95H1.494a1.05 1.05 0 000 2.1h6.554L6.423 8.675a1.05 1.05 0 001.486 1.484l3.416-3.417a1.05 1.05 0 000-1.484z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Asterisk100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M8.176 8.281c.069.07.115.163 0 .255l-1.437.927c-.115.07-.161.024-.208-.092l-1.783-3.1-2.339 2.571c-.024.045-.093.091-.161 0L1.136 7.678c-.116-.069-.093-.139 0-.208l2.639-2.2-3.01-1.134c-.046 0-.115-.092-.07-.209l.788-1.574a.123.123 0 01.151-.083.128.128 0 01.058.038l2.639 1.713L4.494.64a.122.122 0 01.1-.139.172.172 0 01.038 0l1.922.255c.116 0 .139.046.116.163l-.9 3.31 3.057-.927c.069-.046.139-.046.185.092l.3 1.713c.023.116 0 .162-.093.162l-3.2.255z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Asterisk200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M9.575 9.696c.077.079.129.183 0 .287L7.96 11.025c-.129.079-.182.027-.234-.1L5.72 7.433l-2.633 2.893c-.027.051-.1.1-.182 0l-1.251-1.3c-.131-.077-.1-.156 0-.234l2.97-2.476-3.388-1.285c-.052 0-.129-.1-.079-.235l.886-1.771a.138.138 0 01.17-.093.144.144 0 01.065.042l2.97 1.928.183-3.8a.137.137 0 01.114-.156.197.197 0 01.042 0l2.163.287c.131 0 .156.052.131.183L6.86 5.136l3.44-1.043c.077-.052.156-.052.208.1l.339 1.928c.025.13 0 .183-.1.183l-3.6.287z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Asterisk300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M10.024 10.155c.087.089.146.206 0 .323l-1.819 1.173c-.146.089-.2.03-.263-.117L5.685 7.605l-2.962 3.254c-.03.057-.117.116-.2 0L1.116 9.392c-.147-.087-.117-.176 0-.263l3.339-2.785L.642 4.908c-.059 0-.146-.117-.089-.264l1-1.993a.156.156 0 01.192-.1.163.163 0 01.073.048l3.337 2.163.206-4.28a.155.155 0 01.128-.176.23.23 0 01.047 0l2.433.323c.147 0 .176.059.147.206l-1.144 4.19 3.87-1.173c.087-.06.176-.06.234.117l.381 2.169c.028.147 0 .206-.117.206l-4.046.323z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Asterisk75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.825 6.903c.061.062.1.144 0 .227l-1.277.824c-.1.062-.143.02-.185-.082L3.78 5.112 1.7 7.398c-.021.04-.082.08-.143 0L.569 6.367c-.1-.061-.082-.123 0-.185l2.347-1.957-2.68-1.007c-.041 0-.1-.082-.062-.186l.7-1.4a.109.109 0 01.135-.073.114.114 0 01.051.033l2.347 1.523.145-3.006a.109.109 0 01.09-.123.14.14 0 01.033 0l1.709.227c.1 0 .123.04.1.144l-.8 2.943 2.718-.824c.061-.041.123-.041.165.082l.268 1.523c.02.1 0 .144-.082.144l-2.842.227z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M5.125 12.625a1.25 1.25 0 01-.96-.45L1.04 8.425a1.25 1.25 0 011.92-1.6l2.136 2.563 5.922-7.536a1.25 1.25 0 111.964 1.545l-6.874 8.75a1.25 1.25 0 01-.965.478z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M4.891 13.224a1.304 1.304 0 01-1.005-.474l-3.54-4.3a1.302 1.302 0 012.011-1.655l2.508 3.046 6.758-8.647a1.302 1.302 0 112.05 1.604l-7.756 9.926a1.301 1.301 0 01-1.01.5z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.627 14.894a1.357 1.357 0 01-1.042-.488l-4.1-4.92A1.357 1.357 0 012.569 7.75l3.027 3.631L13.4 1.448a1.356 1.356 0 012.133 1.675l-8.84 11.252a1.356 1.356 0 01-1.048.519z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.33 16.642a1.415 1.415 0 01-1.086-.509l-4.683-5.62a1.413 1.413 0 012.171-1.81l3.566 4.28 8.936-11.374a1.413 1.413 0 012.223 1.746L7.441 16.102a1.415 1.415 0 01-1.09.54z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M4.519 10.608a1.151 1.151 0 01-.885-.414L1.27 7.358a1.152 1.152 0 011.77-1.476l1.453 1.743 4.45-5.665a1.152 1.152 0 011.813 1.424l-5.331 6.784a1.153 1.153 0 01-.89.44z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.997 18.48a1.47 1.47 0 01-1.13-.53L.521 11.538a1.471 1.471 0 112.26-1.885l4.182 5.017L17.18 1.666a1.472 1.472 0 112.314 1.818L8.154 17.917a1.472 1.472 0 01-1.135.562z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.621 21.417a1.535 1.535 0 01-1.178-.552l-6.091-7.31a1.533 1.533 0 112.355-1.962l4.879 5.854L20.249 2.602a1.533 1.533 0 112.41 1.895L9.826 20.831a1.53 1.53 0 01-1.182.585z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Checkmark75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M4.333 11.09a1.2 1.2 0 01-.922-.433L.69 7.392a1.2 1.2 0 111.844-1.536l1.772 2.126 5.14-6.542a1.2 1.2 0 111.886 1.482L5.277 10.63a1.2 1.2 0 01-.927.459z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M4.5 13.25a1.094 1.094 0 01-.773-1.868L8.109 7 3.727 2.618A1.094 1.094 0 015.273 1.07l5.157 5.156a1.094 1.094 0 010 1.546L5.273 12.93a1.091 1.091 0 01-.773.321z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.123 15.005a1.14 1.14 0 01-.806-1.945L9.377 8l-5.06-5.06a1.14 1.14 0 011.612-1.61l5.865 5.864a1.139 1.139 0 010 1.612L5.929 14.67a1.135 1.135 0 01-.806.334z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.696 15.853a1.187 1.187 0 01-.84-2.026L9.684 8 3.856 2.173A1.187 1.187 0 015.536.495L12.2 7.16a1.187 1.187 0 010 1.678l-6.666 6.666a1.183 1.183 0 01-.84.348z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.213 17.805a1.236 1.236 0 01-.874-2.11L11.034 9 4.34 2.305A1.236 1.236 0 016.087.557l7.57 7.569a1.235 1.235 0 010 1.748l-7.57 7.569a1.232 1.232 0 01-.874.362z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M6.27 3.438l-.007-.004V3.43L3.228.435a.799.799 0 10-1.124 1.138L4.562 4 2.085 6.446A.8.8 0 003.21 7.585l3.053-3.016a.8.8 0 00.008-1.131z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5.667 19.876a1.288 1.288 0 01-.91-2.199L12.433 10 4.756 2.323A1.288 1.288 0 016.578.502l8.588 8.587a1.288 1.288 0 010 1.822l-8.588 8.588a1.284 1.284 0 01-.911.377z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.05 23.078a1.341 1.341 0 01-.948-2.29L14.89 12 6.102 3.212a1.341 1.341 0 011.896-1.898l9.737 9.737a1.34 1.34 0 010 1.898l-9.737 9.737a1.335 1.335 0 01-.948.392z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Chevron75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M3.833 11.578a1.05 1.05 0 01-.742-1.793L6.876 6 3.091 2.215A1.05 1.05 0 114.575.73l4.529 4.527a1.05 1.05 0 010 1.486L4.575 11.27a1.047 1.047 0 01-.742.308z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/CornerTriangle100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"><path d="M6.687.75a.311.311 0 00-.221.091L.842 6.466a.312.312 0 00.221.533h5.624a.312.312 0 00.312-.312V1.062A.312.312 0 006.687.75z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/CornerTriangle200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M7.65.97a.35.35 0 00-.249.1L1.07 7.401a.352.352 0 00.249.6H7.65a.352.352 0 00.352-.352V1.322A.352.352 0 007.65.97z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/CornerTriangle300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M7.605.09a.394.394 0 00-.28.116L.206 7.325A.4.4 0 00.49 8h7.115a.4.4 0 00.4-.4V.49a.4.4 0 00-.4-.4z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/CornerTriangle75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M5.718.44a.277.277 0 00-.2.081l-5 5a.278.278 0 00.2.474h5a.278.278 0 00.278-.278v-5A.278.278 0 005.718.44z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M6.548 5L9.63 1.917A1.094 1.094 0 008.084.371L5.001 3.454 1.917.37A1.094 1.094 0 00.371 1.917L3.454 5 .37 8.085A1.094 1.094 0 101.917 9.63l3.084-3.083L8.084 9.63a1.094 1.094 0 101.547-1.546z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M7.611 6l3.654-3.653A1.14 1.14 0 009.653.735L6 4.39 2.347.735A1.14 1.14 0 00.735 2.347L4.39 6 .735 9.653a1.14 1.14 0 101.612 1.612L6 7.61l3.653 3.654a1.14 1.14 0 001.612-1.612z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.678 7l4.245-4.244a1.186 1.186 0 00-1.678-1.678L7.001 5.323 2.755 1.077a1.187 1.187 0 00-1.678 1.678L5.322 7l-4.244 4.244a1.187 1.187 0 001.678 1.678l4.245-4.245 4.244 4.245a1.186 1.186 0 001.678-1.678z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.748 8l4.915-4.915a1.236 1.236 0 00-1.748-1.748L8 6.252 3.085 1.337a1.236 1.236 0 00-1.748 1.748L6.252 8l-4.915 4.915a1.236 1.236 0 101.748 1.748L8 9.748l4.915 4.915a1.236 1.236 0 001.748-1.748z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.823 8l5.674-5.674A1.289 1.289 0 1013.675.504L8 6.179 2.326.503A1.288 1.288 0 00.504 2.326l5.674 5.675-5.674 5.674a1.288 1.288 0 001.822 1.822L8 9.822l5.674 5.675a1.289 1.289 0 101.823-1.822z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M10.897 9l6.537-6.536A1.341 1.341 0 1015.537.567L9 7.104 2.465.567A1.341 1.341 0 00.567 2.464L7.104 9 .567 15.537a1.341 1.341 0 101.897 1.897L9 10.897l6.536 6.537a1.341 1.341 0 101.897-1.897z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Cross75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M6.485 5l2.674-2.674A1.05 1.05 0 107.674.84L5 3.515 2.326.84A1.05 1.05 0 00.84 2.326L3.515 5 .84 7.674A1.05 1.05 0 002.326 9.16L5 6.485 7.674 9.16A1.05 1.05 0 109.16 7.674z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M10.375 7.25h-8.75a1.25 1.25 0 010-2.5h8.75a1.25 1.25 0 010 2.5z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M12.026 8.302H1.974a1.302 1.302 0 010-2.604h10.052a1.302 1.302 0 010 2.604z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M13.763 9.356H2.237a1.356 1.356 0 010-2.712h11.526a1.356 1.356 0 010 2.712z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.596 10.413H2.404a1.413 1.413 0 010-2.826h13.192a1.413 1.413 0 010 2.826z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M8.293 6.152H1.708a1.152 1.152 0 010-2.304h6.585a1.152 1.152 0 110 2.304z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M17.54 11.472H2.461a1.472 1.472 0 010-2.944h15.077a1.472 1.472 0 010 2.944z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><path d="M19.604 12.533H2.398a1.533 1.533 0 110-3.066h17.206a1.533 1.533 0 010 3.066z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/Dash75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M8.75 6.2h-7.5a1.2 1.2 0 010-2.4h7.5a1.2 1.2 0 110 2.4z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/DoubleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 6"><path d="M19.375 1.75H.625a.625.625 0 010-1.25h18.75a.625.625 0 010 1.25zM20 4.875a.626.626 0 00-.625-.625H.625a.625.625 0 000 1.25h18.75A.626.626 0 0020 4.875z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/SingleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 4"><path d="M28.75 3.25H1.25a1.25 1.25 0 010-2.5h27.5a1.25 1.25 0 010 2.5z"/></svg> -------------------------------------------------------------------------------- /ui-icons/large/TripleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 10"><path d="M12.625 1.25H1.375a.625.625 0 010-1.25h11.25a.625.625 0 010 1.25zm.625 3.125a.626.626 0 00-.625-.625H1.375a.625.625 0 000 1.25h11.25a.626.626 0 00.625-.625zm0 3.75a.626.626 0 00-.625-.625H1.375a.625.625 0 000 1.25h11.25a.626.626 0 00.625-.625z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M9.7 4.387L6.623 1.262a.875.875 0 10-1.247 1.226l1.61 1.637H.925a.875.875 0 000 1.75h6.062l-1.61 1.637a.875.875 0 101.247 1.226l3.075-3.125a.874.874 0 000-1.226z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M11.284 5.356L7.718 1.788a.911.911 0 10-1.29 1.29l2.012 2.01H1.286a.911.911 0 100 1.823H8.44L6.429 8.923a.911.911 0 001.289 1.289l3.566-3.567a.912.912 0 000-1.29z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M12.893 6.33L8.826 2.261a.95.95 0 10-1.344 1.341L9.93 6.051H1.621a.95.95 0 100 1.898H9.93l-2.447 2.447a.95.95 0 001.344 1.342l4.067-4.067a.95.95 0 000-1.342z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.572 7.3l-4.63-4.63a.989.989 0 00-1.399 1.398l2.942 2.943H1.87a.99.99 0 000 1.978h9.615l-2.942 2.943a.989.989 0 101.398 1.398l4.631-4.63a.988.988 0 000-1.4z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M16.336 8.271l-5.269-5.267A1.03 1.03 0 109.61 4.46l3.51 3.509H2.021a1.03 1.03 0 000 2.06H13.12l-3.51 3.51a1.03 1.03 0 101.457 1.456l5.269-5.268a1.03 1.03 0 000-1.456z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18.191 9.241l-5.986-5.987a1.073 1.073 0 00-1.518 1.517l4.155 4.156H2.063a1.073 1.073 0 100 2.146h12.779l-4.154 4.155a1.073 1.073 0 101.517 1.518l5.986-5.987a1.073 1.073 0 000-1.518z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Arrow75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M9.26 4.406L6.528 1.672A.84.84 0 005.34 2.859l1.3 1.301H1.396a.84.84 0 000 1.68H6.64l-1.301 1.3a.84.84 0 001.188 1.188l2.734-2.734a.84.84 0 000-1.188z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Asterisk100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.575 6.555c.055.056.092.13 0 .2l-1.149.741c-.092.056-.129.019-.166-.074L3.834 4.94 1.963 7c-.019.036-.074.073-.129 0l-.889-.927c-.093-.055-.074-.111 0-.166l2.111-1.76L.648 3.24c-.037 0-.092-.074-.056-.167l.63-1.259a.097.097 0 01.167-.036L3.5 3.148l.13-2.7a.1.1 0 01.081-.111.15.15 0 01.03 0l1.537.2c.093 0 .111.037.093.13l-.723 2.647 2.445-.741c.055-.037.111-.037.148.074l.241 1.37c.018.093 0 .13-.074.13l-2.556.2z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Asterisk200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M7.861 7.953c.062.063.1.146 0 .23l-1.293.834c-.1.063-.145.021-.187-.083l-1.6-2.793-2.105 2.314c-.021.04-.083.082-.145 0l-1-1.043c-.1-.062-.083-.125 0-.187l2.375-1.981-2.715-1.026c-.042 0-.1-.083-.063-.188l.707-1.412a.111.111 0 01.136-.074.116.116 0 01.052.034l2.378 1.54.146-3.043A.11.11 0 014.638.95a.161.161 0 01.034 0l1.73.23c.1 0 .125.042.1.146l-.814 2.979 2.751-.834c.062-.042.125-.042.167.083l.271 1.542c.02.1 0 .146-.083.146l-2.876.23z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Asterisk300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M8.266 8.324c.07.071.116.164 0 .258l-1.454.938c-.116.071-.163.024-.21-.094l-1.8-3.141-2.367 2.6c-.024.045-.094.092-.163 0l-1.13-1.167c-.118-.07-.094-.141 0-.21l2.671-2.227L.766 4.13c-.047 0-.116-.094-.071-.211l.8-1.593a.124.124 0 01.153-.084.13.13 0 01.058.038l2.669 1.738.164-3.422a.124.124 0 01.1-.14.186.186 0 01.038 0l1.945.258c.118 0 .14.047.118.164l-.915 3.349 3.094-.938c.07-.047.14-.047.187.094l.3 1.734c.023.118 0 .164-.094.164l-3.234.258z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Asterisk75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.26 6.463c.049.05.082.116 0 .181l-1.022.659c-.082.05-.115.017-.148-.066L3.822 5.03 2.16 6.859c-.017.032-.066.065-.115 0l-.79-.824c-.083-.049-.066-.1 0-.148l1.877-1.565L.99 3.516c-.033 0-.082-.066-.05-.148l.56-1.119a.087.087 0 01.108-.059.09.09 0 01.04.027l1.878 1.218.116-2.4a.087.087 0 01.072-.1h.027l1.367.181c.083 0 .1.033.083.116L4.55 3.581l2.174-.659c.049-.033.1-.033.132.066l.214 1.218c.016.083 0 .115-.066.115l-2.273.181z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3.5 9.5a.999.999 0 01-.774-.368l-2.45-3a1 1 0 111.548-1.264l1.657 2.028 4.68-6.01A1 1 0 019.74 2.114l-5.45 7a1 1 0 01-.777.386z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M4.313 10.98a1.042 1.042 0 01-.8-.375L.647 7.165a1.042 1.042 0 011.6-1.333l2.042 2.45 5.443-6.928a1.042 1.042 0 011.64 1.287l-6.24 7.94a1.04 1.04 0 01-.804.399z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M5.102 12.514a1.087 1.087 0 01-.834-.39L.988 8.19A1.085 1.085 0 012.656 6.8l2.421 2.906 6.243-7.947a1.085 1.085 0 011.707 1.34L5.955 12.1a1.089 1.089 0 01-.838.415z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.864 14.114a1.13 1.13 0 01-.868-.407L1.25 9.21a1.13 1.13 0 111.736-1.448l2.854 3.425 7.148-9.1a1.13 1.13 0 111.778 1.397L6.753 13.682a1.13 1.13 0 01-.872.432z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3.815 8.687a.921.921 0 01-.708-.332l-1.891-2.27a.921.921 0 011.416-1.18L3.794 6.3l3.56-4.531a.921.921 0 111.45 1.138L4.54 8.335a.921.921 0 01-.712.351z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.597 14.784a1.177 1.177 0 01-.905-.424L.417 9.229a1.177 1.177 0 111.809-1.508l3.343 4.013 8.174-10.402a1.177 1.177 0 011.852 1.456L6.523 14.334a1.178 1.178 0 01-.91.45z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.297 16.534a1.228 1.228 0 01-.942-.442L.48 10.244a1.227 1.227 0 011.885-1.57l3.904 4.684L15.6 1.482a1.227 1.227 0 011.93 1.516L7.262 16.065a1.229 1.229 0 01-.947.469z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Checkmark75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3.667 9.07a.96.96 0 01-.737-.344L.753 6.114a.96.96 0 111.474-1.23l1.418 1.701 4.112-5.233a.96.96 0 011.51 1.186L4.422 8.704a.962.962 0 01-.741.367z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3 9.95a.875.875 0 01-.615-1.498L5.88 5 2.385 1.547A.875.875 0 013.615.302L7.74 4.377a.876.876 0 010 1.246L3.615 9.698A.872.872 0 013 9.95z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M9.034 5.356L4.343.663a.911.911 0 00-1.29 1.289L7.102 6l-4.047 4.047a.911.911 0 101.289 1.29l4.691-4.692a.912.912 0 000-1.29z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M10.639 7a.947.947 0 00-.278-.671l-.003-.002-5.33-5.33a.95.95 0 00-1.342 1.342L8.346 7l-4.661 4.66a.95.95 0 101.342 1.343l5.33-5.33.003-.001A.947.947 0 0010.64 7z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.97 15.044a.989.989 0 01-.698-1.688L9.627 8 4.27 2.644a.989.989 0 011.4-1.398L11.726 7.3a.988.988 0 010 1.398L5.67 14.754a.985.985 0 01-.7.29z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6"><path d="M1.985 5.961a.695.695 0 01-.7-.704.695.695 0 01.209-.493L3.279 3 1.51 1.251A.695.695 0 011.3.757.696.696 0 012.492.255l2.275 2.247a.7.7 0 010 .996L2.477 5.76a.697.697 0 01-.492.201z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.133 7.271L5.263.401a1.03 1.03 0 00-1.457 1.457L9.947 8l-6.141 6.142a1.03 1.03 0 001.457 1.457l6.87-6.87a1.03 1.03 0 000-1.457z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.04 17.863a1.073 1.073 0 01-.759-1.832L11.313 9 4.28 1.969A1.073 1.073 0 015.8.45l7.79 7.79a1.073 1.073 0 010 1.518l-7.79 7.79a1.07 1.07 0 01-.759.314z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Chevron75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M7.482 4.406l-.001-.001L3.86.783a.84.84 0 00-1.188 1.188L5.702 5l-3.03 3.03A.84.84 0 003.86 9.216l3.621-3.622h.001a.84.84 0 000-1.19z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/CornerTriangle100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><path d="M4.763 0a.248.248 0 00-.177.073l-4.5 4.5A.25.25 0 00.263 5h4.5a.25.25 0 00.25-.25V.25a.25.25 0 00-.25-.25z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/CornerTriangle200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M5.719.37a.281.281 0 00-.2.082L.452 5.519a.281.281 0 00.2.481h5.067A.281.281 0 006 5.719V.652A.281.281 0 005.72.37z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/CornerTriangle300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"><path d="M6.683.67a.315.315 0 00-.223.093l-5.7 5.7a.316.316 0 00.224.54h5.7A.316.316 0 007 6.687V.986A.316.316 0 006.684.67z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/CornerTriangle75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5"><path d="M4.78.558a.222.222 0 00-.157.065l-4 4a.222.222 0 00.157.379h4a.222.222 0 00.222-.222v-4A.222.222 0 004.78.558z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M5.238 4l2.456-2.457A.875.875 0 106.456.306L4 2.763 1.543.306A.875.875 0 00.306 1.544L2.763 4 .306 6.457a.875.875 0 101.238 1.237L4 5.237l2.456 2.457a.875.875 0 101.238-1.237z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M6.29 5l2.922-2.922a.911.911 0 00-1.29-1.29L5 3.712 2.078.789a.911.911 0 00-1.29 1.289L3.712 5 .79 7.922a.911.911 0 101.289 1.29L5 6.288 7.923 9.21a.911.911 0 001.289-1.289z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M7.344 6l3.395-3.396a.95.95 0 00-1.344-1.342L6 4.657 2.604 1.262a.95.95 0 00-1.342 1.342L4.657 6 1.262 9.396a.95.95 0 001.343 1.343L6 7.344l3.395 3.395a.95.95 0 001.344-1.344z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M7.398 6l3.932-3.932A.989.989 0 009.932.67L6 4.602 2.068.67A.989.989 0 00.67 2.068L4.602 6 .67 9.932a.989.989 0 101.398 1.398L6 7.398l3.932 3.932a.989.989 0 001.398-1.398z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8.457 7l4.54-4.54a1.03 1.03 0 00-1.458-1.456L7 5.543l-4.54-4.54a1.03 1.03 0 00-1.457 1.458L5.543 7l-4.54 4.54a1.03 1.03 0 101.457 1.456L7 8.457l4.54 4.54a1.03 1.03 0 001.456-1.458z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.518 8l5.23-5.228a1.073 1.073 0 00-1.518-1.518L8.001 6.483l-5.229-5.23a1.073 1.073 0 00-1.518 1.519L6.483 8l-5.23 5.229a1.073 1.073 0 101.518 1.518l5.23-5.23 5.228 5.23a1.073 1.073 0 001.518-1.518z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Cross75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M5.188 4l2.14-2.14A.84.84 0 106.141.672L4 2.812 1.86.672A.84.84 0 00.672 1.86L2.812 4 .672 6.14A.84.84 0 101.86 7.328L4 5.188l2.14 2.14A.84.84 0 107.328 6.14z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash100.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M8.5 6h-7a1 1 0 010-2h7a1 1 0 010 2z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash200.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M10.021 7.042H1.98a1.042 1.042 0 110-2.083h8.043a1.042 1.042 0 010 2.083z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash300.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path d="M10.61 7.085H1.39a1.085 1.085 0 010-2.17h9.22a1.085 1.085 0 010 2.17z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash400.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M12.277 8.13H1.723a1.13 1.13 0 110-2.26h10.554a1.13 1.13 0 110 2.26z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash50.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.634 4.921H1.366a.921.921 0 010-1.842h5.268a.921.921 0 110 1.842z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash500.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.03 9.178H1.969a1.178 1.178 0 110-2.356H14.03a1.178 1.178 0 010 2.356z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash600.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.882 10.227H2.117a1.227 1.227 0 010-2.454h13.765a1.227 1.227 0 010 2.454z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/Dash75.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><path d="M6.99 4.96H1.01a.96.96 0 010-1.92h5.98a.96.96 0 010 1.92z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/DoubleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 4"><path d="M15.45 1.05H.55a.5.5 0 010-1h14.9a.5.5 0 010 1zm.5 2.4a.5.5 0 00-.5-.5H.55a.5.5 0 000 1h14.9a.5.5 0 00.5-.5z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/SingleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 2"><path d="M23 2H1a1 1 0 010-2h22a1 1 0 010 2z"/></svg> -------------------------------------------------------------------------------- /ui-icons/medium/TripleGripper.svg: -------------------------------------------------------------------------------- 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.45 1.05H.55a.5.5 0 010-1h8.9a.5.5 0 010 1zm.5 2.45a.5.5 0 00-.5-.5H.55a.5.5 0 000 1h8.9a.5.5 0 00.5-.5zm0 3a.5.5 0 00-.5-.5H.55a.5.5 0 000 1h8.9a.5.5 0 00.5-.5z"/></svg> --------------------------------------------------------------------------------