├── .eslintrc.cjs ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── bug-report.md │ ├── documentation.md │ ├── feature-request.md │ └── rfc.md ├── auto-assign.yml ├── pull_request_template.md └── workflows │ ├── auto-assign.yml │ ├── ci-validate-pr.yml │ ├── proof-html.yml │ └── publish-packages.yml ├── .gitignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── CONTRIBUTING.md ├── README.md ├── api-extractor.json ├── beachball.config.cjs ├── build └── transform-fragments.js ├── change ├── @adaptive-web-adaptive-ui-65457e29-816e-41a0-b84d-d5eb76b92e78.json ├── @adaptive-web-adaptive-ui-a3f2c827-911c-4906-a735-78bd8f38bd99.json ├── @adaptive-web-adaptive-ui-designer-core-2547a09a-053d-486e-a3bf-3e015478db71.json ├── @adaptive-web-adaptive-ui-designer-core-289da1f2-dd15-46e7-b788-14bff1e6223a.json ├── @adaptive-web-adaptive-ui-designer-figma-4e1269e6-8c1d-48af-8d6e-6e1d944d1ebf.json ├── @adaptive-web-adaptive-ui-e17e5bd7-2c91-4d33-a2cf-7554ac72eb6a.json └── @adaptive-web-adaptive-web-components-f26fdf42-e841-46c7-bcf2-927d4a453ab2.json ├── examples ├── README.md ├── customize-component │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── assets │ │ │ ├── check.svg │ │ │ └── indeterminate.svg │ │ ├── gobal.d.ts │ │ ├── index.ts │ │ └── init-ds.ts │ ├── tsconfig.json │ └── vite.config.js └── use-adaptive-components │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── vite.config.js ├── package-lock.json ├── package.json ├── packages ├── adaptive-ui-designer-core │ ├── .npmignore │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── package.json │ ├── src │ │ ├── controller.ts │ │ ├── index.ts │ │ ├── model.ts │ │ ├── node.ts │ │ ├── registry │ │ │ ├── design-token-registry.ts │ │ │ └── recipes.ts │ │ └── serialization.ts │ └── tsconfig.json ├── adaptive-ui-designer-figma-plugin │ ├── README.md │ ├── manifest.json │ ├── package.json │ ├── src │ │ ├── core │ │ │ ├── code-gen.ts │ │ │ ├── messages.ts │ │ │ └── tsconfig.json │ │ ├── figma │ │ │ ├── .eslintrc.json │ │ │ ├── controller.ts │ │ │ ├── main.ts │ │ │ ├── node.ts │ │ │ ├── tsconfig.json │ │ │ └── utility.ts │ │ └── ui │ │ │ ├── app.ts │ │ │ ├── assets │ │ │ ├── blob.svg │ │ │ ├── checkmark.svg │ │ │ ├── detach.svg │ │ │ ├── refresh.svg │ │ │ ├── revert.svg │ │ │ └── subtract.svg │ │ │ ├── components │ │ │ ├── corner-radius │ │ │ │ └── index.ts │ │ │ ├── design-token-add │ │ │ │ └── index.ts │ │ │ ├── design-token-field │ │ │ │ └── index.ts │ │ │ ├── design-tokens-form │ │ │ │ └── index.ts │ │ │ ├── drawer │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── stealth-button │ │ │ │ └── index.ts │ │ │ ├── style-token-item │ │ │ │ └── index.ts │ │ │ └── token-glyph │ │ │ │ └── index.ts │ │ │ ├── global.css │ │ │ ├── index.html │ │ │ ├── index.ts │ │ │ ├── tsconfig.json │ │ │ ├── ui-controller-code.ts │ │ │ ├── ui-controller-elements.ts │ │ │ ├── ui-controller-states.ts │ │ │ ├── ui-controller-styles.ts │ │ │ ├── ui-controller-tokens.ts │ │ │ ├── ui-controller.ts │ │ │ ├── util.ts │ │ │ └── vite-env.d.ts │ └── vite.config.js ├── adaptive-ui-designer-figma │ ├── .npmignore │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── bin │ │ └── aui-figma-compiler.js │ ├── package.json │ ├── src │ │ ├── cli │ │ │ ├── anatomy.ts │ │ │ ├── dom-shim.ts │ │ │ ├── figma-rest-client.ts │ │ │ ├── library-config.ts │ │ │ ├── library-schema.ts │ │ │ ├── logger.ts │ │ │ ├── main.ts │ │ │ ├── schema-validator.ts │ │ │ ├── string-utils.ts │ │ │ ├── stylesheet.ts │ │ │ └── tsconfig.json │ │ └── lib │ │ │ ├── anatomy.ts │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── node-parser.ts │ │ │ └── tsconfig.json │ └── tsconfig.json ├── adaptive-ui-explorer │ ├── .eslintrc.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── app.ts │ │ ├── colors.ts │ │ ├── component-type.ts │ │ ├── components │ │ │ ├── adaptive-component.ts │ │ │ ├── color-block.ts │ │ │ ├── control-pane │ │ │ │ ├── control-pane.styles.ts │ │ │ │ ├── control-pane.template.ts │ │ │ │ ├── control-pane.ts │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── layer-background │ │ │ │ └── index.ts │ │ │ ├── palette-gradient │ │ │ │ ├── index.ts │ │ │ │ ├── palette-gradient.styles.ts │ │ │ │ ├── palette-gradient.template.ts │ │ │ │ └── palette-gradient.ts │ │ │ ├── style-example.ts │ │ │ └── swatch.ts │ │ ├── index.ts │ │ ├── sample │ │ │ ├── assets.ts │ │ │ ├── index.ts │ │ │ ├── sample-app │ │ │ │ ├── index.ts │ │ │ │ ├── sample-app.styles.ts │ │ │ │ ├── sample-app.template.ts │ │ │ │ └── sample-app.ts │ │ │ └── sample-page │ │ │ │ ├── index.ts │ │ │ │ ├── sample-page.styles.ts │ │ │ │ ├── sample-page.template.ts │ │ │ │ └── sample-page.ts │ │ └── state.ts │ └── tsconfig.json ├── adaptive-ui │ ├── .eslintrc.json │ ├── .mocharc.json │ ├── .npmignore │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── api-extractor.json │ ├── bin │ │ └── aui.js │ ├── docs │ │ └── api-report.md │ ├── package.json │ ├── src │ │ ├── bin │ │ │ ├── aui.ts │ │ │ └── install-dom-shim.ts │ │ ├── core │ │ │ ├── adaptive-design-tokens.ts │ │ │ ├── apply-mixins.ts │ │ │ ├── color │ │ │ │ ├── README.md │ │ │ │ ├── color.spec.ts │ │ │ │ ├── color.ts │ │ │ │ ├── index.ts │ │ │ │ ├── paint.ts │ │ │ │ ├── palette-base.ts │ │ │ │ ├── palette-okhsl.ts │ │ │ │ ├── palette-rgb.spec.ts │ │ │ │ ├── palette-rgb.ts │ │ │ │ ├── palette.ts │ │ │ │ ├── recipe.ts │ │ │ │ ├── recipes │ │ │ │ │ ├── black-or-white-by-contrast-set.ts │ │ │ │ │ ├── black-or-white-by-contrast.spec.ts │ │ │ │ │ ├── black-or-white-by-contrast.ts │ │ │ │ │ ├── contrast-and-delta-swatch-set.ts │ │ │ │ │ ├── contrast-swatch.spec.ts │ │ │ │ │ ├── contrast-swatch.ts │ │ │ │ │ ├── delta-swatch-set.ts │ │ │ │ │ ├── delta-swatch.ts │ │ │ │ │ ├── ideal-color-delta-swatch-set.spec.ts │ │ │ │ │ ├── ideal-color-delta-swatch-set.ts │ │ │ │ │ └── index.ts │ │ │ │ ├── swatch.spec.ts │ │ │ │ ├── swatch.ts │ │ │ │ └── utilities │ │ │ │ │ ├── binary-search.ts │ │ │ │ │ ├── color-constants.ts │ │ │ │ │ ├── conditional.ts │ │ │ │ │ ├── direction-by-is-dark.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── is-dark.ts │ │ │ │ │ ├── luminance-swatch.ts │ │ │ │ │ ├── opacity.ts │ │ │ │ │ └── relative-luminance.ts │ │ │ ├── density │ │ │ │ └── index.ts │ │ │ ├── elevation │ │ │ │ ├── index.ts │ │ │ │ └── recipe.ts │ │ │ ├── index.ts │ │ │ ├── modules │ │ │ │ ├── css.ts │ │ │ │ ├── element-styles-renderer.ts │ │ │ │ ├── index.ts │ │ │ │ ├── selector.ts │ │ │ │ ├── styles.ts │ │ │ │ └── types.ts │ │ │ ├── recipes.ts │ │ │ ├── shadow │ │ │ │ └── index.ts │ │ │ ├── token-helpers-color.ts │ │ │ ├── token-helpers.ts │ │ │ └── types.ts │ │ ├── migration │ │ │ ├── appearance.ts │ │ │ ├── color.ts │ │ │ ├── index.ts │ │ │ ├── type-ramp.ts │ │ │ └── type.ts │ │ └── reference │ │ │ ├── README.md │ │ │ ├── appearance.ts │ │ │ ├── color.ts │ │ │ ├── density.ts │ │ │ ├── elevation.ts │ │ │ ├── index.ts │ │ │ ├── layer.ts │ │ │ ├── modules.ts │ │ │ ├── palette.ts │ │ │ ├── token-naming.ts │ │ │ └── type.ts │ └── tsconfig.json └── adaptive-web-components │ ├── .eslintrc.json │ ├── .npmignore │ ├── .npmrc │ ├── .storybook │ ├── main.cjs │ ├── manager.mjs │ ├── preview-head.html │ └── preview.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── api-extractor.json │ ├── cem.config.mjs │ ├── cem.plugins.mjs │ ├── docs │ └── api-report.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ ├── assets.ts │ ├── components │ │ ├── accordion-item │ │ │ ├── accordion-item.compose.ts │ │ │ ├── accordion-item.definition.ts │ │ │ ├── accordion-item.stories.ts │ │ │ ├── accordion-item.styles.modules.ts │ │ │ ├── accordion-item.styles.ts │ │ │ ├── accordion-item.template.ts │ │ │ └── index.ts │ │ ├── accordion │ │ │ ├── accordion.compose.ts │ │ │ ├── accordion.definition.ts │ │ │ ├── accordion.stories.ts │ │ │ ├── accordion.styles.modules.ts │ │ │ ├── accordion.styles.ts │ │ │ ├── accordion.template.ts │ │ │ └── index.ts │ │ ├── anchor │ │ │ ├── anchor.compose.ts │ │ │ ├── anchor.definition.ts │ │ │ ├── anchor.stories.ts │ │ │ ├── anchor.styles.modules.ts │ │ │ ├── anchor.styles.ts │ │ │ ├── anchor.template.ts │ │ │ ├── anchor.ts │ │ │ └── index.ts │ │ ├── anchored-region │ │ │ ├── anchored-region.compose.ts │ │ │ ├── anchored-region.definition.ts │ │ │ ├── anchored-region.stories.ts │ │ │ ├── anchored-region.styles.modules.ts │ │ │ ├── anchored-region.styles.ts │ │ │ ├── anchored-region.template.ts │ │ │ └── index.ts │ │ ├── avatar │ │ │ ├── avatar.compose.ts │ │ │ ├── avatar.definition.ts │ │ │ ├── avatar.stories.ts │ │ │ ├── avatar.styles.modules.ts │ │ │ ├── avatar.styles.ts │ │ │ ├── avatar.template.ts │ │ │ └── index.ts │ │ ├── badge │ │ │ ├── badge.compose.ts │ │ │ ├── badge.definition.ts │ │ │ ├── badge.stories.ts │ │ │ ├── badge.styles.modules.ts │ │ │ ├── badge.styles.ts │ │ │ ├── badge.template.ts │ │ │ └── index.ts │ │ ├── breadcrumb-item │ │ │ ├── breadcrumb-item.compose.ts │ │ │ ├── breadcrumb-item.definition.ts │ │ │ ├── breadcrumb-item.stories.ts │ │ │ ├── breadcrumb-item.styles.modules.ts │ │ │ ├── breadcrumb-item.styles.ts │ │ │ ├── breadcrumb-item.template.ts │ │ │ ├── breadcrumb-item.ts │ │ │ └── index.ts │ │ ├── breadcrumb │ │ │ ├── breadcrumb.compose.ts │ │ │ ├── breadcrumb.definition.ts │ │ │ ├── breadcrumb.stories.ts │ │ │ ├── breadcrumb.styles.modules.ts │ │ │ ├── breadcrumb.styles.ts │ │ │ ├── breadcrumb.template.ts │ │ │ └── index.ts │ │ ├── button │ │ │ ├── button.compose.ts │ │ │ ├── button.definition.ts │ │ │ ├── button.stories.ts │ │ │ ├── button.styles.modules.ts │ │ │ ├── button.styles.ts │ │ │ ├── button.template.ts │ │ │ ├── button.ts │ │ │ └── index.ts │ │ ├── calendar │ │ │ ├── calendar.compose.ts │ │ │ ├── calendar.definition.ts │ │ │ ├── calendar.stories.ts │ │ │ ├── calendar.styles.modules.ts │ │ │ ├── calendar.styles.ts │ │ │ ├── calendar.template.ts │ │ │ └── index.ts │ │ ├── card │ │ │ ├── card.compose.ts │ │ │ ├── card.definition.ts │ │ │ ├── card.stories.ts │ │ │ ├── card.styles.modules.ts │ │ │ ├── card.styles.ts │ │ │ ├── card.template.ts │ │ │ └── index.ts │ │ ├── checkbox │ │ │ ├── checkbox.compose.ts │ │ │ ├── checkbox.definition.ts │ │ │ ├── checkbox.stories.ts │ │ │ ├── checkbox.styles.modules.ts │ │ │ ├── checkbox.styles.ts │ │ │ ├── checkbox.template.ts │ │ │ └── index.ts │ │ ├── combobox │ │ │ ├── combobox.compose.ts │ │ │ ├── combobox.definition.ts │ │ │ ├── combobox.stories.ts │ │ │ ├── combobox.styles.modules.ts │ │ │ ├── combobox.styles.ts │ │ │ ├── combobox.template.ts │ │ │ ├── combobox.ts │ │ │ └── index.ts │ │ ├── data-grid-cell │ │ │ ├── data-grid-cell.compose.ts │ │ │ ├── data-grid-cell.definition.ts │ │ │ ├── data-grid-cell.styles.modules.ts │ │ │ ├── data-grid-cell.styles.ts │ │ │ ├── data-grid-cell.template.ts │ │ │ └── index.ts │ │ ├── data-grid-row │ │ │ ├── data-grid-row.compose.ts │ │ │ ├── data-grid-row.definition.ts │ │ │ ├── data-grid-row.styles.modules.ts │ │ │ ├── data-grid-row.styles.ts │ │ │ ├── data-grid-row.template.ts │ │ │ └── index.ts │ │ ├── data-grid │ │ │ ├── data-grid.compose.ts │ │ │ ├── data-grid.definition.ts │ │ │ ├── data-grid.stories.ts │ │ │ ├── data-grid.styles.modules.ts │ │ │ ├── data-grid.styles.ts │ │ │ ├── data-grid.template.ts │ │ │ └── index.ts │ │ ├── dialog │ │ │ ├── dialog.compose.ts │ │ │ ├── dialog.definition.ts │ │ │ ├── dialog.stories.ts │ │ │ ├── dialog.styles.modules.ts │ │ │ ├── dialog.styles.ts │ │ │ ├── dialog.template.ts │ │ │ └── index.ts │ │ ├── disclosure │ │ │ ├── disclosure.compose.ts │ │ │ ├── disclosure.definition.ts │ │ │ ├── disclosure.stories.ts │ │ │ ├── disclosure.styles.modules.ts │ │ │ ├── disclosure.styles.ts │ │ │ ├── disclosure.template.ts │ │ │ └── index.ts │ │ ├── divider │ │ │ ├── divider.compose.ts │ │ │ ├── divider.definition.ts │ │ │ ├── divider.stories.ts │ │ │ ├── divider.styles.modules.ts │ │ │ ├── divider.styles.ts │ │ │ ├── divider.template.ts │ │ │ └── index.ts │ │ ├── flipper │ │ │ ├── flipper.compose.ts │ │ │ ├── flipper.definition.ts │ │ │ ├── flipper.stories.ts │ │ │ ├── flipper.styles.modules.ts │ │ │ ├── flipper.styles.ts │ │ │ ├── flipper.template.ts │ │ │ └── index.ts │ │ ├── horizontal-scroll │ │ │ ├── horizontal-scroll.compose.ts │ │ │ ├── horizontal-scroll.definition.ts │ │ │ ├── horizontal-scroll.stories.ts │ │ │ ├── horizontal-scroll.styles.modules.ts │ │ │ ├── horizontal-scroll.styles.ts │ │ │ ├── horizontal-scroll.template.ts │ │ │ ├── horizontal-scroll.ts │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── listbox-option │ │ │ ├── index.ts │ │ │ ├── listbox-option.compose.ts │ │ │ ├── listbox-option.definition.ts │ │ │ ├── listbox-option.stories.ts │ │ │ ├── listbox-option.styles.modules.ts │ │ │ ├── listbox-option.styles.ts │ │ │ └── listbox-option.template.ts │ │ ├── listbox │ │ │ ├── index.ts │ │ │ ├── listbox.compose.ts │ │ │ ├── listbox.definition.ts │ │ │ ├── listbox.stories.ts │ │ │ ├── listbox.styles.modules.ts │ │ │ ├── listbox.styles.ts │ │ │ └── listbox.template.ts │ │ ├── menu-item │ │ │ ├── index.ts │ │ │ ├── menu-item.compose.ts │ │ │ ├── menu-item.definition.ts │ │ │ ├── menu-item.stories.ts │ │ │ ├── menu-item.styles.modules.ts │ │ │ ├── menu-item.styles.ts │ │ │ ├── menu-item.template.ts │ │ │ └── menu-item.ts │ │ ├── menu │ │ │ ├── index.ts │ │ │ ├── menu.compose.ts │ │ │ ├── menu.definition.ts │ │ │ ├── menu.stories.ts │ │ │ ├── menu.styles.modules.ts │ │ │ ├── menu.styles.ts │ │ │ ├── menu.template.ts │ │ │ └── menu.ts │ │ ├── number-field │ │ │ ├── index.ts │ │ │ ├── number-field.compose.ts │ │ │ ├── number-field.definition.ts │ │ │ ├── number-field.stories.ts │ │ │ ├── number-field.styles.modules.ts │ │ │ ├── number-field.styles.ts │ │ │ ├── number-field.template.ts │ │ │ └── number-field.ts │ │ ├── picker-list-item │ │ │ ├── index.ts │ │ │ ├── picker-list-item.compose.ts │ │ │ ├── picker-list-item.definition.ts │ │ │ ├── picker-list-item.styles.modules.ts │ │ │ ├── picker-list-item.styles.ts │ │ │ └── picker-list-item.template.ts │ │ ├── picker-list │ │ │ ├── index.ts │ │ │ ├── picker-list.compose.ts │ │ │ ├── picker-list.definition.ts │ │ │ ├── picker-list.styles.modules.ts │ │ │ ├── picker-list.styles.ts │ │ │ └── picker-list.template.ts │ │ ├── picker-menu-option │ │ │ ├── index.ts │ │ │ ├── picker-menu-option.compose.ts │ │ │ ├── picker-menu-option.definition.ts │ │ │ ├── picker-menu-option.styles.modules.ts │ │ │ ├── picker-menu-option.styles.ts │ │ │ └── picker-menu-option.template.ts │ │ ├── picker-menu │ │ │ ├── index.ts │ │ │ ├── picker-menu.compose.ts │ │ │ ├── picker-menu.definition.ts │ │ │ ├── picker-menu.styles.modules.ts │ │ │ ├── picker-menu.styles.ts │ │ │ └── picker-menu.template.ts │ │ ├── picker │ │ │ ├── index.ts │ │ │ ├── picker.compose.ts │ │ │ ├── picker.definition.ts │ │ │ ├── picker.stories.ts │ │ │ ├── picker.styles.modules.ts │ │ │ ├── picker.styles.ts │ │ │ └── picker.template.ts │ │ ├── progress-ring │ │ │ ├── index.ts │ │ │ ├── progress-ring.compose.ts │ │ │ ├── progress-ring.definition.ts │ │ │ ├── progress-ring.stories.ts │ │ │ ├── progress-ring.styles.modules.ts │ │ │ ├── progress-ring.styles.ts │ │ │ └── progress-ring.template.ts │ │ ├── progress │ │ │ ├── index.ts │ │ │ ├── progress.compose.ts │ │ │ ├── progress.definition.ts │ │ │ ├── progress.stories.ts │ │ │ ├── progress.styles.modules.ts │ │ │ ├── progress.styles.ts │ │ │ └── progress.template.ts │ │ ├── radio-group │ │ │ ├── index.ts │ │ │ ├── radio-group.compose.ts │ │ │ ├── radio-group.definition.ts │ │ │ ├── radio-group.stories.ts │ │ │ ├── radio-group.styles.modules.ts │ │ │ ├── radio-group.styles.ts │ │ │ └── radio-group.template.ts │ │ ├── radio │ │ │ ├── index.ts │ │ │ ├── radio.compose.ts │ │ │ ├── radio.definition.ts │ │ │ ├── radio.stories.ts │ │ │ ├── radio.styles.modules.ts │ │ │ ├── radio.styles.ts │ │ │ └── radio.template.ts │ │ ├── search │ │ │ ├── index.ts │ │ │ ├── search.compose.ts │ │ │ ├── search.definition.ts │ │ │ ├── search.stories.ts │ │ │ ├── search.styles.modules.ts │ │ │ ├── search.styles.ts │ │ │ ├── search.template.ts │ │ │ └── search.ts │ │ ├── select │ │ │ ├── index.ts │ │ │ ├── select.compose.ts │ │ │ ├── select.definition.ts │ │ │ ├── select.stories.ts │ │ │ ├── select.styles.modules.ts │ │ │ ├── select.styles.ts │ │ │ ├── select.template.ts │ │ │ └── select.ts │ │ ├── skeleton │ │ │ ├── index.ts │ │ │ ├── skeleton.compose.ts │ │ │ ├── skeleton.definition.ts │ │ │ ├── skeleton.stories.ts │ │ │ ├── skeleton.styles.modules.ts │ │ │ ├── skeleton.styles.ts │ │ │ └── skeleton.template.ts │ │ ├── slider-label │ │ │ ├── index.ts │ │ │ ├── slider-label.compose.ts │ │ │ ├── slider-label.definition.ts │ │ │ ├── slider-label.stories.ts │ │ │ ├── slider-label.styles.modules.ts │ │ │ ├── slider-label.styles.ts │ │ │ └── slider-label.template.ts │ │ ├── slider │ │ │ ├── index.ts │ │ │ ├── slider.compose.ts │ │ │ ├── slider.definition.ts │ │ │ ├── slider.stories.ts │ │ │ ├── slider.styles.modules.ts │ │ │ ├── slider.styles.ts │ │ │ └── slider.template.ts │ │ ├── switch │ │ │ ├── index.ts │ │ │ ├── switch.compose.ts │ │ │ ├── switch.definition.ts │ │ │ ├── switch.stories.ts │ │ │ ├── switch.styles.modules.ts │ │ │ ├── switch.styles.ts │ │ │ └── switch.template.ts │ │ ├── tab-panel │ │ │ ├── index.ts │ │ │ ├── tab-panel.compose.ts │ │ │ ├── tab-panel.definition.ts │ │ │ ├── tab-panel.stories.ts │ │ │ ├── tab-panel.styles.modules.ts │ │ │ ├── tab-panel.styles.ts │ │ │ └── tab-panel.template.ts │ │ ├── tab │ │ │ ├── index.ts │ │ │ ├── tab.compose.ts │ │ │ ├── tab.definition.ts │ │ │ ├── tab.stories.ts │ │ │ ├── tab.styles.modules.ts │ │ │ ├── tab.styles.ts │ │ │ └── tab.template.ts │ │ ├── tabs │ │ │ ├── index.ts │ │ │ ├── tabs.compose.ts │ │ │ ├── tabs.definition.ts │ │ │ ├── tabs.stories.ts │ │ │ ├── tabs.styles.modules.ts │ │ │ ├── tabs.styles.ts │ │ │ └── tabs.template.ts │ │ ├── text-area │ │ │ ├── index.ts │ │ │ ├── text-area.compose.ts │ │ │ ├── text-area.definition.ts │ │ │ ├── text-area.stories.ts │ │ │ ├── text-area.styles.modules.ts │ │ │ ├── text-area.styles.ts │ │ │ ├── text-area.template.ts │ │ │ └── text-area.ts │ │ ├── text-field │ │ │ ├── index.ts │ │ │ ├── text-field.compose.ts │ │ │ ├── text-field.definition.ts │ │ │ ├── text-field.stories.ts │ │ │ ├── text-field.styles.modules.ts │ │ │ ├── text-field.styles.ts │ │ │ ├── text-field.template.ts │ │ │ └── text-field.ts │ │ ├── toolbar │ │ │ ├── index.ts │ │ │ ├── toolbar.compose.ts │ │ │ ├── toolbar.definition.ts │ │ │ ├── toolbar.stories.ts │ │ │ ├── toolbar.styles.modules.ts │ │ │ ├── toolbar.styles.ts │ │ │ └── toolbar.template.ts │ │ ├── tooltip │ │ │ ├── index.ts │ │ │ ├── tooltip.compose.ts │ │ │ ├── tooltip.definition.ts │ │ │ ├── tooltip.stories.ts │ │ │ ├── tooltip.styles.modules.ts │ │ │ ├── tooltip.styles.ts │ │ │ └── tooltip.template.ts │ │ ├── tree-item │ │ │ ├── index.ts │ │ │ ├── tree-item.compose.ts │ │ │ ├── tree-item.definition.ts │ │ │ ├── tree-item.stories.ts │ │ │ ├── tree-item.styles.modules.ts │ │ │ ├── tree-item.styles.ts │ │ │ └── tree-item.template.ts │ │ └── tree-view │ │ │ ├── index.ts │ │ │ ├── tree-view.compose.ts │ │ │ ├── tree-view.definition.ts │ │ │ ├── tree-view.stories.ts │ │ │ ├── tree-view.styles.modules.ts │ │ │ ├── tree-view.styles.ts │ │ │ └── tree-view.template.ts │ ├── custom-elements.ts │ ├── design-system.ts │ ├── gobal.d.ts │ ├── index.bundle.ts │ ├── index.ts │ ├── styles │ │ ├── index.ts │ │ └── styles.ts │ └── utilities │ │ └── storybook-helpers.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── tsdoc.json └── tsconfig.json /.github/ISSUE_TEMPLATE/documentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Documentation 3 | about: Find an inaccuracy in the documentation or something missing? 4 | title: "docs: fix/add [what] to/in [where]" 5 | labels: 'status:triage' 6 | --- 7 | 8 | 13 | 14 | # Documentation Request 15 | 16 | 17 | ## Possible Solution 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/rfc.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Request For Comment (RFC) 3 | about: Want comments from the team and community on your proposal? 4 | title: "rfc: add [what] to/in [where]" 5 | labels: 'status:triage' 6 | --- 7 | 8 | 13 | 14 | # RFC 15 | 16 | 17 | ## Context 18 | 19 | 20 | 21 | 22 | ## Examples 23 | 24 | -------------------------------------------------------------------------------- /.github/auto-assign.yml: -------------------------------------------------------------------------------- 1 | # Set to true to add reviewers to PRs 2 | addReviewers: true 3 | 4 | # Set to 'author' to add PR's author as a assignee 5 | addAssignees: author 6 | 7 | # A list of reviewers to be added to PRs (GitHub user name) 8 | reviewers: 9 | - awentzel 10 | 11 | # A number of reviewers added to the PR 12 | # Set 0 to add all the reviewers (default: 0) 13 | numberOfReviewers: 1 14 | 15 | # A list of assignees, overrides reviewers if set 16 | assignees: 17 | - awentzel 18 | 19 | # A number of assignees to add to the PRs 20 | # Set to 0 to add all of the assignees. 21 | # Uses numberOfReviewers if unset. 22 | numberOfAssignees: 0 23 | 24 | # A list of keywords to be skipped the process if PR's title include it 25 | skipKeywords: 26 | - wip 27 | -------------------------------------------------------------------------------- /.github/workflows/auto-assign.yml: -------------------------------------------------------------------------------- 1 | name: Auto Assign 2 | on: 3 | issues: 4 | types: [opened] 5 | pull_request: 6 | types: [opened] 7 | jobs: 8 | run: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: wow-actions/auto-assign@v3 12 | with: 13 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 14 | CONFIG_FILE: .github/auto-assign.yml 15 | -------------------------------------------------------------------------------- /.github/workflows/proof-html.yml: -------------------------------------------------------------------------------- 1 | name: Proof HTML 2 | on: 3 | push: 4 | workflow_dispatch: 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: anishathalye/proof-html@v1.1.0 10 | with: 11 | directory: ./ 12 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "tabWidth": 4 4 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "bierner.github-markdown-preview", 4 | "bierner.jsdoc-markdown-highlighting", 5 | "dbaeumer.vscode-eslint", 6 | "ghmcadams.lintlens", 7 | "ms-fast.fast-tagged-templates", 8 | "sidneys1.gitconfig" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[css]": { 3 | "editor.defaultFormatter": "vscode.css-language-features" 4 | }, 5 | "[html]": { 6 | "editor.defaultFormatter": "vscode.html-language-features" 7 | }, 8 | "[javascript]": { 9 | "editor.defaultFormatter": "vscode.typescript-language-features" 10 | }, 11 | "[json]": { 12 | "editor.defaultFormatter": "vscode.json-language-features" 13 | }, 14 | "[jsonc]": { 15 | "editor.defaultFormatter": "vscode.json-language-features" 16 | }, 17 | "[typescript]": { 18 | "editor.defaultFormatter": "vscode.typescript-language-features" 19 | }, 20 | "cSpell.words": [ 21 | "activeid", 22 | "Appliable", 23 | "culori", 24 | "Demi", 25 | "listbox", 26 | "Lrgb", 27 | "okhsl", 28 | "tablist", 29 | "Unregisters" 30 | ], 31 | "editor.insertSpaces": true, 32 | "editor.tabSize": 4, 33 | "editor.detectIndentation": false 34 | } -------------------------------------------------------------------------------- /api-extractor.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", 3 | "mainEntryPointFilePath": "/dist/dts/index.d.ts", 4 | "apiReport": { 5 | "enabled": true, 6 | "reportFolder": "/docs", 7 | "reportFileName": "api-report.md" 8 | }, 9 | "docModel": { 10 | "enabled": true, 11 | "apiJsonFilePath": "/dist/.api.json" 12 | }, 13 | "dtsRollup": { 14 | "enabled": true 15 | } 16 | } -------------------------------------------------------------------------------- /beachball.config.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | module.exports = { 3 | disallowedChangeTypes: ["major"], 4 | ignorePatterns: [ 5 | ".ignore", 6 | ".github/", 7 | ".prettierrc", 8 | ".vscode/", 9 | "jest..js", 10 | "src/e2e/", 11 | "src/tests/", 12 | "src/fixtures/**", 13 | // This one is especially important (otherwise dependabot would be blocked by change file requirements) 14 | "package-lock.json", 15 | ] 16 | } -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-65457e29-816e-41a0-b84d-d5eb76b92e78.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "minor", 3 | "comment": "AUI: Refactored Swatch to Color", 4 | "packageName": "@adaptive-web/adaptive-ui", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-a3f2c827-911c-4906-a735-78bd8f38bd99.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Updated style properties to readonly, adjusted token group types", 4 | "packageName": "@adaptive-web/adaptive-ui", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-designer-core-2547a09a-053d-486e-a3bf-3e015478db71.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Added support for registering interactive token groups", 4 | "packageName": "@adaptive-web/adaptive-ui-designer-core", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-designer-core-289da1f2-dd15-46e7-b788-14bff1e6223a.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Add subtle inverse recipes to Designer plugin", 4 | "packageName": "@adaptive-web/adaptive-ui-designer-core", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-designer-figma-4e1269e6-8c1d-48af-8d6e-6e1d944d1ebf.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Fix string comparison casing issues", 4 | "packageName": "@adaptive-web/adaptive-ui-designer-figma", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-ui-e17e5bd7-2c91-4d33-a2cf-7554ac72eb6a.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "patch", 3 | "comment": "Add full tests for Color and Swatch classes", 4 | "packageName": "@adaptive-web/adaptive-ui", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /change/@adaptive-web-adaptive-web-components-f26fdf42-e841-46c7-bcf2-927d4a453ab2.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "minor", 3 | "comment": "AUI: Refactored Swatch to Color", 4 | "packageName": "@adaptive-web/adaptive-web-components", 5 | "email": "47367562+bheston@users.noreply.github.com", 6 | "dependentChangeType": "patch" 7 | } 8 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Adaptive Web Components Examples 2 | 3 | A set of examples for how to use and customize Adaptive Web Components (more coming soon). 4 | 5 | ## Getting Started 6 | 7 | - [Using components with any framework](use-adaptive-components) 8 | - [Customizing a component definition](customize-component) 9 | -------------------------------------------------------------------------------- /examples/customize-component/README.md: -------------------------------------------------------------------------------- 1 | # Customizing a Component 2 | 3 | Illustrates how to customize the definition of a component before registering it. 4 | 5 | TODO: Coming soon, placeholder example to minimize diffs. 6 | 7 | ## Key features 8 | 9 | - TODO 10 | -------------------------------------------------------------------------------- /examples/customize-component/src/assets/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/customize-component/src/assets/indeterminate.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/customize-component/src/gobal.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | const content: any; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /examples/customize-component/src/init-ds.ts: -------------------------------------------------------------------------------- 1 | // Separate module loaded first so style modules are updated before components are composed. 2 | 3 | import { neutralFillDiscernibleControlStyles, selectableSelectedStyles } from "@adaptive-web/adaptive-ui/reference"; 4 | 5 | selectableSelectedStyles.appendComposed(neutralFillDiscernibleControlStyles); 6 | -------------------------------------------------------------------------------- /examples/customize-component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "moduleResolution": "nodenext", 5 | "outDir": "dist/esm" 6 | }, 7 | "include": ["src"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/customize-component/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import svg from 'vite-plugin-svgo' 3 | 4 | export default defineConfig({ 5 | // Turn off all plugins, effectively just using the inlining capability. 6 | // Many icon libraries, like Fluent System Icons, are already optimized and the defaults can have negative consequences. 7 | plugins: [svg({plugins:[]})] 8 | }); 9 | -------------------------------------------------------------------------------- /examples/use-adaptive-components/README.md: -------------------------------------------------------------------------------- 1 | # Using Adaptive Components 2 | 3 | Adaptive Web Components can be used in plain html with any framework, just like native platform elements (`button`, `input`, etc.). 4 | 5 | This example illustrates using the components in html with JavaScript to adjust Adaptive UI look and feel. 6 | 7 | ## Key features 8 | 9 | - Register components and use in plain html 10 | - Set component attributes and handle events 11 | - Adjust Adaptive UI for a variety of visual treatments 12 | - The color system uses recipes to apply color to components 13 | - The layering system forms the visual structure of your app, including applying the luminance value (light or dark modes) 14 | -------------------------------------------------------------------------------- /examples/use-adaptive-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "moduleResolution": "nodenext", 5 | "outDir": "dist/esm" 6 | }, 7 | "include": ["src"] 8 | } 9 | -------------------------------------------------------------------------------- /examples/use-adaptive-components/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import svg from 'vite-plugin-svgo' 3 | 4 | export default defineConfig({ 5 | // Turn off all plugins, effectively just using the inlining capability. 6 | // Many icon libraries, like Fluent System Icons, are already optimized and the defaults can have negative consequences. 7 | plugins: [svg({plugins:[]})] 8 | }); 9 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-core/.npmignore: -------------------------------------------------------------------------------- 1 | # Tests 2 | dist/dts/__test__/ 3 | dist/esm/__test__/ 4 | *.spec.* 5 | coverage/ 6 | 7 | # Source files 8 | src/ 9 | 10 | # config files 11 | .eslintignore 12 | .eslintrc.cjs 13 | .eslintrc.json 14 | .mocharc.json 15 | .prettierignore 16 | api-extractor.json 17 | karma.conf.js 18 | rollup.config.js 19 | tsconfig.json 20 | 21 | # cache 22 | .rollupcache 23 | temp 24 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-core/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Controller, PluginUIState, STYLE_REMOVE } from "./controller.js"; 2 | export { 3 | Config, 4 | PluginNodeData, 5 | AppliedStyleModules, 6 | AppliedStyleValues, 7 | PluginUINodeData, 8 | AdditionalDataKeys, 9 | DesignTokenValue, 10 | AppliedDesignToken, 11 | AppliedStyleValue, 12 | AdditionalData, 13 | AppliedDesignTokens, 14 | DesignTokenValues 15 | } from "./model.js"; 16 | export { mapReplacer, mapReviver, deserializeMap, serializeMap } from "./serialization.js"; 17 | export { State, StatesState, PluginNode, focusIndicatorNodeName, } from "./node.js"; 18 | export { AdaptiveDesignToken, AdaptiveDesignTokenOrGroup, DesignTokenRegistry } from "./registry/design-token-registry.js"; 19 | export { registerAppliableTokens, registerTokens } from "./registry/recipes.js"; 20 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "importHelpers": true, 6 | "lib": ["DOM", "ES2020"], 7 | "skipLibCheck": true, 8 | "declarationDir": "dist/dts", 9 | "outDir": "dist/esm", 10 | "rootDir": "src" 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Adaptive UI Designer", 3 | "id": "1210401851009710286", 4 | "api": "1.0.0", 5 | "main": "./dist/main.js", 6 | "ui": "./dist/index.html", 7 | "documentAccess": "dynamic-page", 8 | "networkAccess": { 9 | "allowedDomains": ["https://rsms.me"], 10 | "reasoning": "Inter open source font to match Figma" 11 | }, 12 | "editorType": ["figma"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/core/messages.ts: -------------------------------------------------------------------------------- 1 | import { PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core"; 2 | 3 | export interface CreateStatesMessage { 4 | readonly type: 'CREATE_STATES'; 5 | id: string; 6 | } 7 | 8 | export interface NodeDataMessage { 9 | readonly type: 'NODE_DATA'; 10 | nodes: PluginUINodeData[]; 11 | } 12 | 13 | export interface SkipInvisibleNodesMessage { 14 | readonly type: 'SKIP_INVISIBLE_NODES'; 15 | value: boolean; 16 | } 17 | 18 | export type PluginMessage = CreateStatesMessage | NodeDataMessage | SkipInvisibleNodesMessage; 19 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "_comments": "Placeholder file for eslint to work with project parsing options since these are shared and don't have their own tsconfig", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "moduleResolution": "Node16", 6 | "target": "ES2020", 7 | "module": "ES2020", 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/figma/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:@typescript-eslint/recommended", 5 | "plugin:@figma/figma-plugins/recommended" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/figma/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../../dist", 4 | "moduleResolution": "Node16", 5 | "module": "Node16", 6 | "target": "ES2018", 7 | "lib": ["ES2018"], 8 | "strict": true, 9 | "skipLibCheck": true, 10 | "types": ["@figma/plugin-typings"], 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/assets/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/assets/detach.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/assets/refresh.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/assets/revert.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/assets/subtract.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./corner-radius/index.js"; 2 | export * from "./design-token-add/index.js"; 3 | export * from "./design-token-field/index.js"; 4 | export * from "./design-tokens-form/index.js"; 5 | export * from "./drawer/index.js"; 6 | export * from "./stealth-button/index.js"; 7 | export * from "./style-token-item/index.js"; 8 | export * from "./token-glyph/index.js"; 9 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/global.css: -------------------------------------------------------------------------------- 1 | /* Import Inter font to match Figma UI 2 | * https://rsms.me/inter/ 3 | * https://github.com/rsms/inter/blob/master/LICENSE.txt 4 | */ 5 | @import url("https://rsms.me/inter/inter.css"); 6 | html { 7 | font-family: "Inter", sans-serif; 8 | font-size: 11px; 9 | } 10 | @supports (font-variation-settings: normal) { 11 | html { 12 | font-family: "Inter var", sans-serif; 13 | } 14 | } 15 | 16 | body { 17 | margin: 0; 18 | } 19 | 20 | #root { 21 | height: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Adaptive UI Designer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "outDir": "dist", 5 | "resolveJsonModule": true, 6 | "moduleResolution": "Node16", 7 | "target": "ES2020", 8 | "module": "Node16", 9 | "useDefineForClassFields": false, 10 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 11 | "skipLibCheck": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-states.ts: -------------------------------------------------------------------------------- 1 | import { AdditionalDataKeys, StatesState } from "@adaptive-web/adaptive-ui-designer-core"; 2 | import type { PluginMessage} from "../core/messages.js"; 3 | import { UIController } from "./ui-controller.js"; 4 | 5 | export class StatesController { 6 | constructor( 7 | private readonly controller: UIController, 8 | ) { 9 | } 10 | 11 | public getState(): StatesState { 12 | return this.controller.selectedNodes.length === 1 ? 13 | this.controller.selectedNodes[0].additionalData.get(AdditionalDataKeys.states) as StatesState : 14 | StatesState.notAvailable; 15 | } 16 | 17 | public createStates(): void { 18 | const nodeID = this.controller.selectedNodes[0].id; 19 | 20 | const message: PluginMessage = { 21 | type: "CREATE_STATES", 22 | id: nodeID 23 | }; 24 | this.controller.dispatchMessage(message, "createStates"); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/util.ts: -------------------------------------------------------------------------------- 1 | import { sentenceCase } from "change-case"; 2 | 3 | export function designTokenTitle(token?: { name: string }): string { 4 | if (token === undefined || token.name === undefined) { 5 | console.log(token); 6 | 7 | return "-"; 8 | } 9 | 10 | // Handle legacy non-hierarchical format for `custom-recipes.ts`. 11 | const name = token.name.indexOf(".") > -1 ? token.name.split(".").slice(1).join("-") : token.name; 12 | 13 | const base = name.replace(/-/g, ' ').replace(/density_/, ''); 14 | return sentenceCase(base); 15 | } 16 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/src/ui/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma-plugin/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import svg from "vite-plugin-svgo"; 3 | import { viteSingleFile } from "vite-plugin-singlefile"; 4 | 5 | export default defineConfig({ 6 | root: "./src/ui", 7 | // Turn off all plugins, effectively just using the inlining capability. 8 | // Many icon libraries, like Fluent System Icons, are already optimized and the defaults can have negative consequences. 9 | plugins: [svg({ plugins: [] }), viteSingleFile()], 10 | build: { 11 | target: "esnext", 12 | outDir: "../../dist", 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/.npmignore: -------------------------------------------------------------------------------- 1 | # Tests 2 | dist/dts/__test__/ 3 | dist/esm/__test__/ 4 | *.spec.* 5 | coverage/ 6 | 7 | # Source files 8 | src/ 9 | 10 | # config files 11 | .eslintignore 12 | .eslintrc.cjs 13 | .eslintrc.json 14 | .mocharc.json 15 | .prettierignore 16 | api-extractor.json 17 | karma.conf.js 18 | rollup.config.js 19 | tsconfig.json 20 | 21 | # cache 22 | .rollupcache 23 | temp 24 | 25 | # npm pack excludes dist directory without this line. Removing 'dist' from the root .gitignore 26 | # results in the correct packing behavior, so this appears to be a npm pack bug. 27 | !dist 28 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/README.md: -------------------------------------------------------------------------------- 1 | # Adaptive UI Designer Figma 2 | Figma utilities and CLI for Adaptive UI. 3 | 4 | ## CLI 5 | `@adaptive-web/adaptive-ui-designer-figma` exposes a CLI for generating component anatomies and stylesheets creating using the Adaptive UI Designer Figma Plugin. To use, first create a JSON library config file: 6 | ```JSON 7 | { 8 | "libraryFile": "https//www.figma.com/file/path-to-file", 9 | "outDir": "./out/dir" 10 | } 11 | ``` 12 | 13 | To use the CLI, run `npx aui-figma-compiler` and provide the library file that you just created. You will be prompted for a Figma PAT to access the file. 14 | 15 | ```shell 16 | npx aui-figma-compiler -l ./library.json 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/bin/aui-figma-compiler.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import '../dist/cli/main.js'; -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/cli/dom-shim.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * FAST accesses DOM globals during evaluation, so they need 3 | * to exist to run the CLI 4 | */ 5 | class Document { 6 | createElement() { 7 | return new HTMLElement(); 8 | } 9 | adoptedStylesheets = [] 10 | } 11 | class HTMLElement {} 12 | class MutationObserver {} 13 | class Window { 14 | Document = Document; 15 | HTMLElement = HTMLElement; 16 | MutationObserver = MutationObserver; 17 | matchMedia = () => new this.MutationObserver; 18 | document: Document; 19 | constructor() { 20 | this.document = new Document; 21 | } 22 | } 23 | 24 | export function installWindowOnGlobal() { 25 | if (globalThis.window === undefined) { 26 | const window = new Window; 27 | Object.assign(globalThis, window); 28 | globalThis.window = globalThis as any; 29 | } 30 | } 31 | 32 | installWindowOnGlobal(); -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/cli/library-schema.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | $schema: 'http://json-schema.org/draft-07/schema#', 3 | $id: 'https://www.adaptive-web-community/schemas/design-to-code-library.json', 4 | title: 'Design to Code Library', 5 | description: 'Describes a valid library file format for generating CSS Stylesheets from a Figma Component Library', 6 | type: 'object', 7 | properties: { 8 | libraryFile: { 9 | description: 'The URL of the Figma library file', 10 | type: 'string', 11 | pattern: '^https://www.figma.com/file/', 12 | }, 13 | outDir: { 14 | description: 'Path to directory for created files', 15 | type: 'string', 16 | }, 17 | }, 18 | required: ['libraryFile', 'outDir'], 19 | }; 20 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/cli/logger.ts: -------------------------------------------------------------------------------- 1 | /* eslint @typescript-eslint/naming-convention: off */ 2 | export interface ILogger { 3 | /** 4 | * Logs a message indicating success 5 | */ 6 | success(message: string): void; 7 | fail(message: string): void; 8 | warn(message: string): void; 9 | neutral(message: string): void; 10 | } 11 | const successColor = '\x1b[32m%s\x1b[0m'; 12 | const failColor = '\x1b[31m%s\x1b[0m'; 13 | const warnColor = '\x1b[33m%s\x1b[0m'; 14 | 15 | export class Logger implements ILogger { 16 | private constructor() { /* privatize constructor */} 17 | 18 | success(message: string): void { 19 | console.log(successColor, message); 20 | } 21 | fail(message: string): void { 22 | console.error(failColor, message); 23 | } 24 | warn(message: string): void { 25 | console.warn(warnColor, message); 26 | } 27 | neutral(message: string): void { 28 | console.log(message); 29 | } 30 | 31 | public static create() { 32 | return new Logger(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/cli/string-utils.ts: -------------------------------------------------------------------------------- 1 | export function alphabetize(a: string, b: string) { 2 | if (a < b) { 3 | return -1; 4 | } 5 | if (a > b) { 6 | return 1; 7 | } 8 | return 0; 9 | } 10 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/cli/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["**/*"], 3 | "compilerOptions": { 4 | "strict": true, 5 | "module": "NodeNext", 6 | "moduleResolution": "NodeNext", 7 | "outDir": "../../dist/cli", 8 | "target": "ESNext", 9 | "composite": true, 10 | "declaration": true 11 | }, 12 | "references": [{"path": "../lib"}] 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/lib/constants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The plugin data namespace used for Adaptive UI. 3 | */ 4 | export const FIGMA_SHARED_DATA_NAMESPACE: string = "adaptive_ui"; 5 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { Anatomy, Condition, BooleanCondition, StringCondition, StyleRule } from "./anatomy.js"; 2 | export { FIGMA_SHARED_DATA_NAMESPACE } from "./constants.js"; 3 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/src/lib/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["**/*"], 3 | "compilerOptions": { 4 | "strict": true, 5 | "module": "NodeNext", 6 | "moduleResolution": "NodeNext", 7 | "target": "ESNext", 8 | "resolveJsonModule": true, 9 | "composite": true, 10 | "outDir": "../../dist/lib", 11 | "declaration": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-designer-figma/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "importHelpers": true, 6 | "types": ["mocha"], 7 | "lib": ["DOM", "ES2020"], 8 | "skipLibCheck": true, 9 | "rootDir": "./src", 10 | "declaration": true, 11 | }, 12 | "files": [], 13 | "references": [ 14 | { "path": "./src/lib" }, 15 | { "path": "./src/cli"} 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/.eslintrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/README.md: -------------------------------------------------------------------------------- 1 | # Adaptive UI Explorer 2 | 3 | The Adaptive UI Explorer is an app for visualizing the effects of changing design token values and recipe configurations. 4 | 5 | Currently the app is mostly illustrative of the color recipes, but it will soon be evolving into more of an editor for design system configuration, similar to what the Figma plugin provides within Figma. 6 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adaptive UI Explorer 8 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/colors.ts: -------------------------------------------------------------------------------- 1 | export enum AccentColor { 2 | black = "#000000", 3 | white = "#FFFFFF", 4 | magenta = "#DA1A5F", 5 | blue = "#0078D4", 6 | green = "#107C10", 7 | purple = "#5C2D91", 8 | orange = "#F26C0D", 9 | yellow = "#F2C812", 10 | } 11 | 12 | export const neutralColors: string[] = [ 13 | "#808080", 14 | "#73818C", 15 | "#718E71", 16 | "#7F738C", 17 | "#8C7A73", 18 | "#0078D4", 19 | "#107C10", 20 | "#5C2D91", 21 | "#D83B01", 22 | ]; 23 | 24 | export const defaultAccentColor: string = AccentColor.orange; 25 | export const defaultNeutralColor: string = neutralColors[0]; 26 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/component-type.ts: -------------------------------------------------------------------------------- 1 | export enum ComponentType { 2 | backplate = "backplate", 3 | text = "text", 4 | form = "form", 5 | sample = "sample", 6 | } 7 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/control-pane/control-pane.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "@microsoft/fast-element"; 2 | import { typeRampPlus1FontSize, typeRampPlus1LineHeight } from "@adaptive-web/adaptive-ui/reference"; 3 | import { componentBaseStyles } from "@adaptive-web/adaptive-web-components"; 4 | 5 | export const controlPaneStyles = css` 6 | ${componentBaseStyles} 7 | 8 | :host { 9 | display: flex; 10 | flex: 0 1 auto; 11 | flex-direction: column; 12 | gap: 24px; 13 | } 14 | 15 | .title { 16 | font-size: ${typeRampPlus1FontSize}; 17 | line-height: ${typeRampPlus1LineHeight}; 18 | } 19 | 20 | .radio-group { 21 | display: flex; 22 | flex-direction: column; 23 | gap: 8px; 24 | } 25 | 26 | label { 27 | align-items: flex-start; 28 | display: flex; 29 | } 30 | 31 | label span { 32 | margin-top: 3px; 33 | } 34 | 35 | input[type="checkbox"], 36 | input[type="radio"] { 37 | width: 16px; 38 | height: 16px; 39 | margin-right: 8px; 40 | } 41 | `; 42 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/control-pane/control-pane.ts: -------------------------------------------------------------------------------- 1 | import { customElement, FASTElement } from "@microsoft/fast-element"; 2 | import { State } from "../../state.js"; 3 | import { controlPaneStyles as styles } from "./control-pane.styles.js"; 4 | import { controlPaneTemplate as template } from "./control-pane.template.js"; 5 | 6 | @customElement({ 7 | name: "app-control-pane", 8 | styles, 9 | template: template(), 10 | }) 11 | export class ControlPane extends FASTElement { 12 | @State state!: State; 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/control-pane/index.ts: -------------------------------------------------------------------------------- 1 | export { ControlPane } from "./control-pane.js"; 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./control-pane/index.js"; 2 | export * from "./layer-background/index.js"; 3 | export * from "./palette-gradient/index.js"; 4 | export * from "./adaptive-component.js"; 5 | export * from "./color-block.js"; 6 | export * from "./swatch.js"; 7 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/palette-gradient/index.ts: -------------------------------------------------------------------------------- 1 | export { PaletteGradient } from "./palette-gradient.js"; 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/palette-gradient/palette-gradient.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "@microsoft/fast-element"; 2 | import { componentBaseStyles } from "@adaptive-web/adaptive-web-components"; 3 | 4 | export const paletteGradientStyles = css` 5 | ${componentBaseStyles} 6 | 7 | :host { 8 | display: flex; 9 | } 10 | 11 | a { 12 | display: flex; 13 | flex: 1; 14 | } 15 | 16 | a.source { 17 | position: relative; 18 | } 19 | 20 | a.source::before { 21 | width: 6px; 22 | height: 6px; 23 | margin: 0 auto; 24 | content: ""; 25 | opacity: 0.7; 26 | position: relative; 27 | border: solid 1px currentcolor; 28 | border-radius: 50%; 29 | display: block; 30 | align-self: center; 31 | } 32 | 33 | a.closest::before { 34 | content: "~"; 35 | border: none; 36 | line-height: 6px; 37 | } 38 | `; 39 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/components/palette-gradient/palette-gradient.ts: -------------------------------------------------------------------------------- 1 | import { Color, Palette } from "@adaptive-web/adaptive-ui"; 2 | import { customElement, FASTElement, observable } from "@microsoft/fast-element"; 3 | import { paletteGradientStyles as styles } from "./palette-gradient.styles.js"; 4 | import { paletteGradientTemplate as template } from "./palette-gradient.template.js"; 5 | 6 | @customElement({ 7 | name: "app-palette-gradient", 8 | template, 9 | styles, 10 | }) 11 | export class PaletteGradient extends FASTElement { 12 | public closestSource?: Color; 13 | 14 | @observable 15 | public palette?: Palette; 16 | protected paletteChanged() { 17 | this.closestSource = this.palette?.get(this.palette?.closestIndexOf(this.palette?.source)); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/index.ts: -------------------------------------------------------------------------------- 1 | import { DesignToken } from "@microsoft/fast-foundation"; 2 | import { AdaptiveDesignSystem } from "@adaptive-web/adaptive-web-components"; 3 | import { AllComponents } from "@adaptive-web/adaptive-web-components/all-components"; 4 | import { DefaultState, State } from "./state.js"; 5 | import { app } from './app.js'; 6 | 7 | AdaptiveDesignSystem.defineComponents(AllComponents); 8 | 9 | State.provide(document, new DefaultState()); 10 | 11 | DesignToken.registerDefaultStyleTarget(); 12 | 13 | app.define(); 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/sample/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./sample-app/index.js"; 2 | export * from "./sample-page/index.js"; 3 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/sample/sample-app/index.ts: -------------------------------------------------------------------------------- 1 | export { SampleApp } from "./sample-app.js"; 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/sample/sample-app/sample-app.ts: -------------------------------------------------------------------------------- 1 | import { customElement, FASTElement } from "@microsoft/fast-element"; 2 | import { sampleAppStyles as styles } from "./sample-app.styles.js"; 3 | import { sampleAppTemplate as template } from "./sample-app.template.js"; 4 | 5 | @customElement({ 6 | name: "app-sample-app", 7 | template: template(), 8 | styles, 9 | }) 10 | export class SampleApp extends FASTElement {} 11 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/sample/sample-page/index.ts: -------------------------------------------------------------------------------- 1 | export { SamplePage } from "./sample-page.js"; 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/src/sample/sample-page/sample-page.ts: -------------------------------------------------------------------------------- 1 | import { customElement, FASTElement } from "@microsoft/fast-element"; 2 | import { samplePageStyles as styles } from "./sample-page.styles.js"; 3 | import { samplePageTemplate as template } from "./sample-page.template.js"; 4 | 5 | @customElement({ 6 | name: "app-sample-page", 7 | template: template(), 8 | styles, 9 | }) 10 | export class SamplePage extends FASTElement {} 11 | -------------------------------------------------------------------------------- /packages/adaptive-ui-explorer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "importHelpers": true, 6 | "lib": ["DOM", "ES2020"], 7 | "declarationDir": "dist/dts", 8 | "outDir": "dist/esm" 9 | }, 10 | "include": ["src"] 11 | } 12 | -------------------------------------------------------------------------------- /packages/adaptive-ui/.eslintrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui/.mocharc.json: -------------------------------------------------------------------------------- 1 | { 2 | "colors": true, 3 | "recursive": true, 4 | "timeout": 5000, 5 | "spec": "dist/**/*.spec.js", 6 | "require": [ 7 | "jsdom-global/register" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /packages/adaptive-ui/.npmignore: -------------------------------------------------------------------------------- 1 | # Tests 2 | dist/dts/__test__/ 3 | dist/esm/__test__/ 4 | *.spec.* 5 | coverage/ 6 | 7 | # Source files 8 | src/ 9 | 10 | # config files 11 | .eslintignore 12 | .eslintrc.cjs 13 | .eslintrc.json 14 | .mocharc.json 15 | .prettierignore 16 | api-extractor.json 17 | karma.conf.js 18 | rollup.config.js 19 | tsconfig.json 20 | 21 | # cache 22 | .rollupcache 23 | temp 24 | -------------------------------------------------------------------------------- /packages/adaptive-ui/api-extractor.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", 3 | "mainEntryPointFilePath": "/dist/dts/core/index.d.ts", 4 | "apiReport": { 5 | "enabled": true, 6 | "reportFolder": "/docs", 7 | "reportFileName": "api-report.md" 8 | }, 9 | "docModel": { 10 | "enabled": true, 11 | "apiJsonFilePath": "/dist/.api.json" 12 | }, 13 | "dtsRollup": { 14 | "enabled": true 15 | }, 16 | "messages": { 17 | "extractorMessageReporting": { 18 | "ae-different-release-tags": { 19 | "logLevel": "none", 20 | "addToApiReportFile": true 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/adaptive-ui/bin/aui.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | import "../dist/esm/bin/aui.js"; 3 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/bin/install-dom-shim.ts: -------------------------------------------------------------------------------- 1 | import { GlobalRegistrator } from "@happy-dom/global-registrator"; 2 | 3 | GlobalRegistrator.register(/*{ url: "", width: 1920, height: 1080 }*/); 4 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./recipes/index.js"; 2 | export * from "./utilities/index.js"; 3 | export * from "./color.js"; 4 | export * from "./paint.js"; 5 | export * from "./palette-base.js"; 6 | export * from "./palette-okhsl.js"; 7 | export * from "./palette-rgb.js"; 8 | export * from "./palette.js"; 9 | export * from "./recipe.js"; 10 | export * from "./swatch.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/recipes/contrast-swatch.ts: -------------------------------------------------------------------------------- 1 | import { Color } from "../color.js"; 2 | import { Paint } from "../paint.js"; 3 | import { Palette, PaletteDirection } from "../palette.js"; 4 | import { directionByIsDark } from "../utilities/direction-by-is-dark.js"; 5 | 6 | /** 7 | * Gets a Color meeting the minimum contrast from the reference color. 8 | * 9 | * @param palette - The Palette used to find the Color 10 | * @param reference - The reference color 11 | * @param minContrast - The desired minimum contrast 12 | * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference` 13 | * @returns The Color 14 | * 15 | * @public 16 | */ 17 | export function contrastSwatch( 18 | palette: Palette, 19 | reference: Paint, 20 | minContrast: number, 21 | direction: PaletteDirection = directionByIsDark(reference) 22 | ): Color { 23 | return palette.colorContrast(reference, minContrast, undefined, direction); 24 | } 25 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/recipes/delta-swatch.ts: -------------------------------------------------------------------------------- 1 | import { Color } from "../color.js"; 2 | import { Paint } from "../paint.js"; 3 | import { Palette, PaletteDirection } from "../palette.js"; 4 | import { directionByIsDark } from "../utilities/direction-by-is-dark.js"; 5 | 6 | /** 7 | * Color algorithm to get the Color a specified position away from the reference color. 8 | * 9 | * @param palette - The Palette used to find the Color 10 | * @param reference - The reference color 11 | * @param delta - The offset from the `reference` 12 | * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference` 13 | * @returns The Color 14 | * 15 | * @public 16 | */ 17 | export function deltaSwatch( 18 | palette: Palette, 19 | reference: Paint, 20 | delta: number, 21 | direction: PaletteDirection = directionByIsDark(reference) 22 | ): Color { 23 | return palette.delta(reference, delta, direction); 24 | } 25 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/recipes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./black-or-white-by-contrast-set.js"; 2 | export * from "./black-or-white-by-contrast.js"; 3 | export * from "./contrast-and-delta-swatch-set.js"; 4 | export * from "./contrast-swatch.js"; 5 | export * from "./delta-swatch-set.js"; 6 | export * from "./delta-swatch.js"; 7 | export * from "./ideal-color-delta-swatch-set.js"; 8 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/color-constants.ts: -------------------------------------------------------------------------------- 1 | import { Color } from "../color.js"; 2 | 3 | /** 4 | * A {@link Color} convenience for white. 5 | * 6 | * @internal 7 | */ 8 | export const _white = Color.fromRgb(1, 1, 1); 9 | 10 | /** 11 | * A {@link Color} convenience for black. 12 | * 13 | * @internal 14 | */ 15 | export const _black = Color.fromRgb(0, 0, 0); 16 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/conditional.ts: -------------------------------------------------------------------------------- 1 | import { Color } from "../color.js"; 2 | import { InteractiveColorSet } from "../recipe.js"; 3 | import { _white } from "./color-constants.js"; 4 | 5 | const _transparentWhite = Color.unsafeOpacity(_white, 0); 6 | 7 | /** 8 | * Return an interactive set of the provided tokens or a no-op "transparent" set of tokens. 9 | * 10 | * @param set - The swatch set to return if the condition is true. 11 | * @param condition - The condition. 12 | * @returns The provided swatch set or a "transparent" swatch set. 13 | */ 14 | export function conditionalSwatchSet( 15 | set: InteractiveColorSet, 16 | condition: boolean 17 | ): InteractiveColorSet { 18 | if (condition) { 19 | return set; 20 | } 21 | 22 | return { 23 | rest: _transparentWhite, 24 | hover: _transparentWhite, 25 | active: _transparentWhite, 26 | focus: _transparentWhite, 27 | disabled: _transparentWhite, 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/direction-by-is-dark.ts: -------------------------------------------------------------------------------- 1 | import { PaletteDirectionValue } from "../palette.js"; 2 | import { isDark } from "./is-dark.js"; 3 | import { RelativeLuminance } from "./relative-luminance.js"; 4 | 5 | /** 6 | * Gets an inverse directional multiplier based on whether the `color` is dark or light. 7 | * 8 | * @param color - The color to check 9 | * @returns `darker` if the `color` is light, `lighter` if the `color` is dark 10 | * 11 | * @public 12 | */ 13 | export function directionByIsDark(color: RelativeLuminance): PaletteDirectionValue { 14 | return isDark(color) ? PaletteDirectionValue.lighter : PaletteDirectionValue.darker; 15 | } 16 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./color-constants.js"; 2 | export * from "./direction-by-is-dark.js"; 3 | export * from "./is-dark.js"; 4 | export * from "./luminance-swatch.js"; 5 | export * from "./opacity.js"; 6 | export * from "./relative-luminance.js"; 7 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/is-dark.ts: -------------------------------------------------------------------------------- 1 | import { RelativeLuminance } from "./relative-luminance.js"; 2 | 3 | /* 4 | * A color is "dark" if there is more contrast between #000000 and a reference 5 | * color than #FFFFFF and the reference color. That threshold can be expressed as a relative luminance 6 | * using the contrast formula as (1 + 0.5) / (R + 0.05) === (R + 0.05) / (0 + 0.05), 7 | * which reduces to the following, where 'R' is the relative luminance of the reference color 8 | */ 9 | const target = (-0.1 + Math.sqrt(0.21)) / 2; 10 | 11 | /** 12 | * Determines if a `color` is dark according to relative luminance. That is, from a contrast perspective, 13 | * whether it has more contrast against white than black. In grey, dark is #757575 and darker. 14 | * 15 | * @param color - The color to check 16 | * @returns True when the `color` is dark 17 | * 18 | * @public 19 | */ 20 | export function isDark(color: RelativeLuminance): boolean { 21 | return color.relativeLuminance <= target; 22 | } 23 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/color/utilities/luminance-swatch.ts: -------------------------------------------------------------------------------- 1 | import { Color } from "../color.js"; 2 | 3 | /** 4 | * Create a grey {@link Color} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance. 5 | * 6 | * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white 7 | * @returns A swatch for the specified grey value 8 | * 9 | * @public 10 | */ 11 | export function luminanceSwatch(luminance: number): Color { 12 | return Color.fromRgb(luminance, luminance, luminance); 13 | } 14 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/elevation/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./recipe.js"; 2 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/elevation/recipe.ts: -------------------------------------------------------------------------------- 1 | import { Recipe, RecipeEvaluate } from "../recipes.js"; 2 | 3 | /** 4 | * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box shadow. 5 | * 6 | * @public 7 | */ 8 | export type ElevationRecipe = Recipe; 9 | 10 | /** 11 | * The type of the `evaluate` function for {@link ElevationRecipe}. 12 | * 13 | * @public 14 | */ 15 | export type ElevationRecipeEvaluate = RecipeEvaluate; 16 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./color/index.js"; 2 | export * from "./density/index.js"; 3 | export * from "./elevation/index.js"; 4 | export * from "./modules/index.js"; 5 | export * from "./adaptive-design-tokens.js"; 6 | export * from "./recipes.js"; 7 | export * from "./shadow/index.js"; 8 | export * from "./token-helpers-color.js"; 9 | export * from "./token-helpers.js"; 10 | export * from "./types.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/core/modules/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./element-styles-renderer.js"; 2 | export * from "./selector.js"; 3 | export * from "./styles.js"; 4 | export * from "./types.js"; 5 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/migration/appearance.ts: -------------------------------------------------------------------------------- 1 | import { create, createTokenNumber } from "../core/token-helpers.js"; 2 | 3 | /** @public @deprecated This is changing to a `dimension` type with a value like `4px` */ 4 | export const designUnit = createTokenNumber("design-unit").withDefault(4); 5 | 6 | /** @public @deprecated Use `cornerRadiusControl` instead */ 7 | export const controlCornerRadius = create("control-corner-radius").withDefault(4); 8 | 9 | /** @public @deprecated Use `cornerRadiusLayer` instead */ 10 | export const layerCornerRadius = create("layer-corner-radius").withDefault(8); 11 | 12 | /** @public @deprecated Use `strokeThickness` instead */ 13 | export const strokeWidth = create("stroke-width").withDefault(1); 14 | 15 | /** @public @deprecated Use `focusStrokeThickness` instead */ 16 | export const focusStrokeWidth = create("focus-stroke-width").withDefault(2); 17 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/migration/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./appearance.js"; 2 | export * from "./color.js"; 3 | export * from "./type-ramp.js"; 4 | export * from "./type.js"; 5 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/migration/type.ts: -------------------------------------------------------------------------------- 1 | import { bodyFontFamily } from "../reference/type.js"; 2 | 3 | /** @public @deprecated Renamed to `bodyFontFamily` */ 4 | export const bodyFont = bodyFontFamily; 5 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/reference/appearance.ts: -------------------------------------------------------------------------------- 1 | import { StylePropertyShorthand } from "../core/modules/types.js"; 2 | import { createTokenDimension } from "../core/token-helpers.js"; 3 | 4 | /** @public */ 5 | export const designUnit = createTokenDimension("global.designUnit").withDefault("4px"); 6 | 7 | /** @public */ 8 | export const cornerRadiusControl = createTokenDimension("shape.cornerRadius.default", StylePropertyShorthand.cornerRadius).withDefault("4px"); 9 | 10 | // Planning to migrate the radius settings as part of the density system. 11 | /** @public */ 12 | export const cornerRadiusLayer = createTokenDimension("density.layer.cornerRadius", StylePropertyShorthand.cornerRadius).withDefault("8px"); 13 | 14 | /** @public */ 15 | export const strokeThickness = createTokenDimension("shape.strokeThickness.default", StylePropertyShorthand.borderThickness).withDefault("1px"); 16 | 17 | /** @public */ 18 | export const focusStrokeThickness = createTokenDimension("shape.strokeThickness.focus", StylePropertyShorthand.borderThickness).withDefault("2px"); 19 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/reference/density.ts: -------------------------------------------------------------------------------- 1 | import { DensityPaddingAndGapTokenGroup } from "../core/density/index.js"; 2 | import { designUnit, strokeThickness } from "./appearance.js"; 3 | 4 | /** 5 | * @public 6 | */ 7 | export const densityText = new DensityPaddingAndGapTokenGroup("density.text", 0, 1, 0, 1, designUnit, "0px"); 8 | 9 | /** 10 | * @public 11 | */ 12 | export const densityControl = new DensityPaddingAndGapTokenGroup("density.control", 3, 2, 2, 1, designUnit, strokeThickness); 13 | 14 | /** 15 | * @public 16 | */ 17 | export const densityControlList = new DensityPaddingAndGapTokenGroup("density.controlList", 1, 0, 1, 0, designUnit, strokeThickness); 18 | 19 | /** 20 | * @public 21 | * @deprecated Use densityControlList 22 | */ 23 | export const densityItemContainer = new DensityPaddingAndGapTokenGroup("density.itemContainer", 1, 0, 1, 0, designUnit, strokeThickness); 24 | 25 | /** 26 | * @public 27 | */ 28 | export const densityLayer = new DensityPaddingAndGapTokenGroup("density.layer", 4, 4, 4, 4, designUnit, "0px"); 29 | -------------------------------------------------------------------------------- /packages/adaptive-ui/src/reference/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./appearance.js"; 2 | export * from "./color.js"; 3 | export * from "./density.js"; 4 | export * from "./elevation.js"; 5 | export * from "./layer.js"; 6 | export * from "./modules.js"; 7 | export * from "./palette.js"; 8 | export * from "./token-naming.js"; 9 | export * from "./type.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "importHelpers": true, 6 | "types": ["mocha"], 7 | "lib": ["DOM", "ES2020"], 8 | "skipLibCheck": true, 9 | "declarationDir": "dist/dts", 10 | "outDir": "dist/esm", 11 | "rootDir": "src" 12 | }, 13 | "include": ["src"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/.npmignore: -------------------------------------------------------------------------------- 1 | # Tests 2 | dist/dts/__test__/ 3 | dist/esm/__test__/ 4 | *.spec.* 5 | coverage/ 6 | 7 | # Source files 8 | src/ 9 | 10 | # config files 11 | .eslintignore 12 | .eslintrc.cjs 13 | .eslintrc.json 14 | .mocharc.json 15 | .prettierignore 16 | api-extractor.json 17 | karma.conf.js 18 | rollup.config.js 19 | tsconfig.json 20 | tsconfig.build.json 21 | vite.config.js 22 | cem.config.mjs 23 | cem.plugins.mjs 24 | 25 | # cache 26 | .rollupcache 27 | temp 28 | 29 | # storybook 30 | .storybook/** -------------------------------------------------------------------------------- /packages/adaptive-web-components/.npmrc: -------------------------------------------------------------------------------- 1 | # Added for Storybook npm7 migration 2 | legacy-peer-deps=true 3 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/.storybook/manager.mjs: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | // Revisit in Storybook 7.x, but right now it causes issues with text input fields. 5 | enableShortcuts: false, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { DesignToken } from "@microsoft/fast-foundation"; 2 | 3 | import { AdaptiveDesignSystem } from "../src/index"; 4 | import { AllComponents } from "../src/custom-elements"; 5 | 6 | DesignToken.registerDefaultStyleTarget(); 7 | 8 | AdaptiveDesignSystem.defineComponents(AllComponents); -------------------------------------------------------------------------------- /packages/adaptive-web-components/api-extractor.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", 3 | "extends": "../../api-extractor.json", 4 | "mainEntryPointFilePath": "./dist/dts/index.d.ts", 5 | "compiler": { 6 | "tsconfigFilePath": "./tsconfig.build.json" 7 | }, 8 | "dtsRollup": { 9 | "enabled": true, 10 | "untrimmedFilePath": "./dist/adaptive-web-components.untrimmed.d.ts", 11 | "betaTrimmedFilePath": "./dist/adaptive-web-components.d.ts" 12 | }, 13 | "messages": { 14 | "extractorMessageReporting": { 15 | "ae-different-release-tags": { 16 | "logLevel": "none", 17 | "addToApiReportFile": true 18 | } 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /packages/adaptive-web-components/cem.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | globs: [ 3 | "src/components/**/*.ts" 4 | ], 5 | exclude: [ 6 | "src/*.ts", 7 | "src/**/*.md", 8 | "src/**/index.ts", 9 | "src/**/*.stories.*" 10 | ], 11 | outdir: "dist", 12 | dev: false, 13 | fast: true 14 | }; -------------------------------------------------------------------------------- /packages/adaptive-web-components/cem.plugins.mjs: -------------------------------------------------------------------------------- 1 | export function fast() { 2 | return void 0; 3 | } -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/assets.ts: -------------------------------------------------------------------------------- 1 | const svgIcon = (path: string, className: "stroked" | "filled" = "stroked"): string => { 2 | const pathStyle = className === "filled" ? 'stroke="none"': 'fill="none"'; 3 | return ` 4 | 5 | `; 6 | } 7 | 8 | export const checkboxIcon = svgIcon("M3 9L5.5 11.5L13.5 4"); 9 | 10 | export const checkboxIndeterminateIcon = svgIcon("M2.5 8H13.5"); 11 | 12 | export const radioIcon = svgIcon("M12.5 8a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z", "filled"); 13 | 14 | export const chevronDownIcon = svgIcon("M3.5 6L8 10.5L12.5 6"); 15 | 16 | export const chevronLeftIcon = svgIcon("M10 12.5L5.5 8L10 3.5"); 17 | 18 | export const chevronRightIcon = svgIcon("M6 3.5L10.5 8L6 12.5"); 19 | 20 | export const chevronUpIcon = svgIcon("M3.5 10L8 5.5L12.5 10"); 21 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion-item/accordion-item.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronDownIcon, chevronUpIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeAccordionItem } from "./accordion-item.compose.js"; 4 | import { AccordionItemStatics } from './accordion-item.template.js'; 5 | import { styleModules } from "./accordion-item.styles.modules.js"; 6 | 7 | /** 8 | * The Accordion Item custom element definition. Implements {@link @microsoft/fast-foundation#FASTAccordionItem}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const accordionItemDefinition = composeAccordionItem( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [AccordionItemStatics.collapsed]: chevronDownIcon, 20 | [AccordionItemStatics.expanded]: chevronUpIcon, 21 | }, 22 | styleModules, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion-item/index.ts: -------------------------------------------------------------------------------- 1 | export { composeAccordionItem } from "./accordion-item.compose.js"; 2 | export { 3 | templateStyles as accordionItemTemplateStyles, 4 | aestheticStyles as accordionItemAestheticStyles, 5 | } from "./accordion-item.styles.js"; 6 | export { 7 | styleModules as accordionItemStyleModules, 8 | } from "./accordion-item.styles.modules.js"; 9 | export { 10 | template as accordionItemTemplate, 11 | AccordionItemAnatomy, 12 | AccordionItemConditions, 13 | AccordionItemParts, 14 | AccordionItemStatics 15 | } from "./accordion-item.template.js"; 16 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion/accordion.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeAccordion } from "./accordion.compose.js"; 3 | import { styleModules } from "./accordion.styles.modules.js"; 4 | 5 | /** 6 | * The Accordion custom element definition. Implements {@link @microsoft/fast-foundation#FASTAccordion}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const accordionDefinition = composeAccordion( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion/accordion.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | neutralStrokeSubtle, 6 | plainTextStyles, 7 | strokeThickness 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | styles: plainTextStyles, 18 | properties : { 19 | borderFillTop: neutralStrokeSubtle.rest, 20 | borderStyleTop: "solid", 21 | borderThicknessTop: strokeThickness, 22 | } 23 | }, 24 | ]; 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion/accordion.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | flex-direction: column; 11 | } 12 | `; 13 | 14 | /** 15 | * Visual styles including Adaptive UI tokens. 16 | * @public 17 | */ 18 | export const aestheticStyles: ElementStyles = css``; 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion/accordion.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { accordionTemplate, FASTAccordion } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const AccordionConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const AccordionParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const AccordionAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: AccordionConditions, 24 | parts: AccordionParts, 25 | }; 26 | 27 | /** 28 | * Default Accordion template, {@link @microsoft/fast-foundation#accordionTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | accordionTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export { composeAccordion } from "./accordion.compose.js"; 2 | export { 3 | templateStyles as accordionTemplateStyles, 4 | aestheticStyles as accordionAestheticStyles, 5 | } from "./accordion.styles.js"; 6 | export { 7 | styleModules as accordionStyleModules, 8 | } from "./accordion.styles.modules.js"; 9 | export { template as accordionTemplate, AccordionAnatomy, AccordionConditions, AccordionParts } from "./accordion.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchor/anchor.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeAnchor } from "./anchor.compose.js"; 3 | import { styleModules } from "./anchor.styles.modules.js"; 4 | 5 | /** 6 | * The Anchor custom element definition. Implements {@link AdaptiveAnchor}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const anchorDefinition = composeAnchor( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchor/anchor.styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from "@microsoft/fast-element"; 2 | import type { ElementStyles } from "@microsoft/fast-element"; 3 | 4 | /** 5 | * Basic layout styling associated with the anatomy of the template. 6 | * @public 7 | */ 8 | export const templateStyles: ElementStyles = css` 9 | :host { 10 | display: inline-flex; 11 | } 12 | 13 | .control { 14 | display: flex; 15 | align-items: center; 16 | white-space: nowrap; 17 | /* explicit width */ 18 | flex-grow: 1; 19 | justify-content: center; 20 | } 21 | 22 | ::slotted([slot="start"]), 23 | ::slotted([slot="end"]) { 24 | display: flex; 25 | } 26 | `; 27 | 28 | /** 29 | * Visual styles including Adaptive UI tokens. 30 | * @public 31 | */ 32 | export const aestheticStyles: ElementStyles = css` 33 | `; 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchor/anchor.ts: -------------------------------------------------------------------------------- 1 | import { FASTAnchor } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Anchor. Extends {@link @microsoft/fast-foundation#FASTAnchor}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveAnchor extends FASTAnchor { 9 | /** 10 | * Applies 'icon-only' class when there is only an SVG in the default slot. 11 | */ 12 | protected defaultSlottedContentChanged(): void { 13 | const slottedElements = this.defaultSlottedContent.filter((x) => x.nodeType === Node.ELEMENT_NODE); 14 | 15 | if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) { 16 | this.control.classList.add("icon-only"); 17 | } else { 18 | this.control.classList.remove("icon-only"); 19 | } 20 | } 21 | 22 | public focus(options?: FocusOptions): void { 23 | this.control.focus(options); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchor/index.ts: -------------------------------------------------------------------------------- 1 | export { composeAnchor } from "./anchor.compose.js"; 2 | export { 3 | templateStyles as anchorTemplateStyles, 4 | aestheticStyles as anchorAestheticStyles, 5 | } from "./anchor.styles.js"; 6 | export { 7 | styleModules as anchorStyleModules, 8 | } from "./anchor.styles.modules.js"; 9 | export { template as anchorTemplate, AnchorAnatomy, AnchorConditions, AnchorParts } from "./anchor.template.js"; 10 | export { AdaptiveAnchor } from "./anchor.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchored-region/anchored-region.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeAnchoredRegion } from "./anchored-region.compose.js"; 3 | import { styleModules } from "./anchored-region.styles.modules.js"; 4 | 5 | /** 6 | * The Anchored Region custom element definition. Implements {@link @microsoft/fast-foundation#FASTAnchoredRegion}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const anchoredRegionDefinition = composeAnchoredRegion( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchored-region/anchored-region.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | ]; 12 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchored-region/anchored-region.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | contain: layout; 11 | } 12 | `; 13 | 14 | /** 15 | * Visual styles including Adaptive UI tokens. 16 | * @public 17 | */ 18 | export const aestheticStyles: ElementStyles = css``; 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/anchored-region/index.ts: -------------------------------------------------------------------------------- 1 | export { composeAnchoredRegion } from "./anchored-region.compose.js"; 2 | export { 3 | templateStyles as anchoredRegionTemplateStyles, 4 | aestheticStyles as anchoredRegionAestheticStyles, 5 | } from "./anchored-region.styles.js"; 6 | export { 7 | styleModules as anchoredRegionStyleModules, 8 | } from "./anchored-region.styles.modules.js"; 9 | export { 10 | template as anchoredRegionTemplate, 11 | AnchoredRegionAnatomy, 12 | AnchoredRegionConditions, 13 | AnchoredRegionParts 14 | } from "./anchored-region.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/avatar/avatar.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeAvatar } from "./avatar.compose.js"; 3 | import { styleModules } from "./avatar.styles.modules.js"; 4 | 5 | /** 6 | * The Avatar custom element definition. Implements {@link @microsoft/fast-foundation#FASTAvatar}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const avatarDefinition = composeAvatar( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/avatar/avatar.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { 3 | accentFillReadableControlStyles, 4 | typeRampBaseStyles, 5 | } from "@adaptive-web/adaptive-ui/reference"; 6 | import { AvatarAnatomy } from "./avatar.template.js"; 7 | 8 | /** 9 | * Visual styles composed by style rules. 10 | * 11 | * @public 12 | */ 13 | export const styleModules: StyleRules = [ 14 | { 15 | styles: typeRampBaseStyles, 16 | }, 17 | { 18 | target : { 19 | part: AvatarAnatomy.parts.backplate, 20 | }, 21 | styles: accentFillReadableControlStyles, 22 | }, 23 | ]; 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/avatar/avatar.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { avatarTemplate, FASTAvatar } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const AvatarConditions = {}; 10 | 11 | /** 12 | * @public 13 | */ 14 | export const AvatarParts = { 15 | backplate: "backplate", 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const AvatarAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: AvatarConditions, 24 | parts: AvatarParts, 25 | }; 26 | 27 | /** 28 | * Default Avatar template, {@link @microsoft/fast-foundation#avatarTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | avatarTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export { composeAvatar } from "./avatar.compose.js"; 2 | export { 3 | templateStyles as avatarTemplateStyles, 4 | aestheticStyles as avatarAestheticStyles, 5 | } from "./avatar.styles.js"; 6 | export { 7 | styleModules as avatarStyleModules, 8 | } from "./avatar.styles.modules.js"; 9 | export { template as avatarTemplate, AvatarAnatomy, AvatarConditions, AvatarParts } from "./avatar.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/badge.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeBadge } from "./badge.compose.js"; 3 | import { styleModules } from "./badge.styles.modules.js"; 4 | 5 | /** 6 | * The Badge custom element definition. Implements {@link @microsoft/fast-foundation#FASTBadge}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const badgeDefinition = composeBadge( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/badge.stories.ts: -------------------------------------------------------------------------------- 1 | import { html } from "@microsoft/fast-element"; 2 | import type { FASTBadge } from "@microsoft/fast-foundation"; 3 | import { renderComponent } from "../../utilities/storybook-helpers.js"; 4 | import type { Meta, Story, StoryArgs } from "../../utilities/storybook-helpers.js"; 5 | 6 | const storyTemplate = html>` 7 | 8 | ${(x) => x.storyContent} 9 | 10 | `; 11 | 12 | export default { 13 | title: "Components/Badge", 14 | args: { 15 | storyContent: "Badge", 16 | }, 17 | } as Meta; 18 | 19 | export const Badge: Story = renderComponent(storyTemplate).bind({}); 20 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/badge.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | controlShapeStyles, 6 | neutralFillReadableControlStyles, 7 | typeRampMinus1Styles, 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | import { BadgeAnatomy } from "./badge.template.js"; 10 | 11 | /** 12 | * Visual styles composed by style rules. 13 | * 14 | * @public 15 | */ 16 | export const styleModules: StyleRules = [ 17 | { 18 | styles: typeRampMinus1Styles, 19 | }, 20 | { 21 | target : { 22 | part: BadgeAnatomy.parts.control, 23 | }, 24 | styles: [ 25 | controlShapeStyles, 26 | neutralFillReadableControlStyles, 27 | ], 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/badge.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | import { 3 | designUnit, 4 | strokeThickness, 5 | } from "@adaptive-web/adaptive-ui/reference"; 6 | 7 | /** 8 | * Basic layout styling associated with the anatomy of the template. 9 | * @public 10 | */ 11 | export const templateStyles: ElementStyles = css` 12 | :host { 13 | display: inline-block; 14 | } 15 | `; 16 | 17 | /** 18 | * Visual styles including Adaptive UI tokens. 19 | * @public 20 | */ 21 | export const aestheticStyles: ElementStyles = css` 22 | .control { 23 | padding: 24 | calc(((${designUnit} * 0.5) - ${strokeThickness}) * 1) 25 | calc((${designUnit} - ${strokeThickness}) * 1); 26 | } 27 | `; 28 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/badge.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { badgeTemplate, FASTBadge } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const BadgeConditions = {}; 10 | 11 | /** 12 | * @public 13 | */ 14 | export const BadgeParts = { 15 | control: "control", 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const BadgeAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: BadgeConditions, 24 | parts: BadgeParts, 25 | }; 26 | 27 | /** 28 | * Default Badge template, {@link @microsoft/fast-foundation#badgeTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | badgeTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | export { composeBadge } from "./badge.compose.js"; 2 | export { 3 | templateStyles as badgeTemplateStyles, 4 | aestheticStyles as badgeAestheticStyles, 5 | } from "./badge.styles.js"; 6 | export { 7 | styleModules as badgeStyleModules, 8 | } from "./badge.styles.modules.js"; 9 | export { template as badgeTemplate, BadgeAnatomy, BadgeConditions, BadgeParts } from "./badge.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb-item/breadcrumb-item.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronRightIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeBreadcrumbItem } from "./breadcrumb-item.compose.js"; 4 | import { BreadcrumbItemStatics } from "./breadcrumb-item.template.js"; 5 | import { styleModules } from "./breadcrumb-item.styles.modules.js"; 6 | 7 | /** 8 | * The Breadcrumb custom element definition. Implements {@link @microsoft/fast-foundation#FASTBreadcrumb}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const breadcrumbItemDefinition = composeBreadcrumbItem( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [BreadcrumbItemStatics.separator]: chevronRightIcon, 20 | }, 21 | styleModules, 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb-item/breadcrumb-item.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | } 11 | 12 | .listitem { 13 | display: flex; 14 | align-items: center; 15 | } 16 | 17 | .control { 18 | display: flex; 19 | align-items: center; 20 | white-space: nowrap; 21 | } 22 | 23 | :host([href]) .control { 24 | cursor: pointer; 25 | } 26 | 27 | .control[aria-current] { 28 | text-decoration: none; 29 | } 30 | 31 | ::slotted([slot="start"]), 32 | ::slotted([slot="end"]), 33 | .separator { 34 | display: flex; 35 | } 36 | `; 37 | 38 | /** 39 | * Visual styles including Adaptive UI tokens. 40 | * @public 41 | */ 42 | export const aestheticStyles: ElementStyles = css` 43 | `; 44 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb-item/breadcrumb-item.ts: -------------------------------------------------------------------------------- 1 | import { FASTBreadcrumbItem } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of BreadcrumbItem. Extends {@link @microsoft/fast-foundation#FASTBreadcrumbItem}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveBreadcrumbItem extends FASTBreadcrumbItem { 9 | public focus(options?: FocusOptions): void { 10 | this.control.focus(options); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb-item/index.ts: -------------------------------------------------------------------------------- 1 | export { composeBreadcrumbItem } from "./breadcrumb-item.compose.js"; 2 | export { 3 | templateStyles as breadcrumbItemTemplateStyles, 4 | aestheticStyles as breadcrumbItemAestheticStyles, 5 | } from "./breadcrumb-item.styles.js"; 6 | export { 7 | styleModules as breadcrumbItemStyleModules, 8 | } from "./breadcrumb-item.styles.modules.js"; 9 | export { 10 | template as breadcrumbItemTemplate, 11 | BreadcrumbItemAnatomy, 12 | BreadcrumbItemConditions, 13 | BreadcrumbItemParts, 14 | BreadcrumbItemStatics 15 | } from "./breadcrumb-item.template.js"; 16 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb/breadcrumb.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeBreadcrumb } from "./breadcrumb.compose.js"; 3 | import { styleModules } from "./breadcrumb.styles.modules.js"; 4 | 5 | /** 6 | * The Breadcrumb custom element definition. Implements {@link @microsoft/fast-foundation#FASTBreadcrumb}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const breadcrumbDefinition = composeBreadcrumb( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb/breadcrumb.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | ]; 12 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb/breadcrumb.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-block; 10 | } 11 | 12 | .list { 13 | display: flex; 14 | flex-wrap: wrap; 15 | } 16 | `; 17 | 18 | /** 19 | * Visual styles including Adaptive UI tokens. 20 | * @public 21 | */ 22 | export const aestheticStyles: ElementStyles = css` 23 | `; 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb/breadcrumb.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { breadcrumbTemplate, FASTBreadcrumb } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const BreadcrumbConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const BreadcrumbParts = { 16 | list: "list", 17 | }; 18 | 19 | /** 20 | * @public 21 | */ 22 | export const BreadcrumbAnatomy: ComponentAnatomy = { 23 | interactivity: Interactivity.never, 24 | conditions: BreadcrumbConditions, 25 | parts: BreadcrumbParts, 26 | }; 27 | 28 | /** 29 | * Default Breadcrumb template, {@link @microsoft/fast-foundation#breadcrumbTemplate}. 30 | * @public 31 | */ 32 | export const template: (ds: DesignSystem) => ElementViewTemplate = 33 | (ds: DesignSystem) => 34 | breadcrumbTemplate(); 35 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export { composeBreadcrumb } from "./breadcrumb.compose.js"; 2 | export { 3 | templateStyles as breadcrumbTemplateStyles, 4 | aestheticStyles as breadcrumbAestheticStyles, 5 | } from "./breadcrumb.styles.js"; 6 | export { 7 | styleModules as breadcrumbStyleModules, 8 | } from "./breadcrumb.styles.modules.js"; 9 | export { template as breadcrumbTemplate, BreadcrumbAnatomy, BreadcrumbConditions, BreadcrumbParts } from "./breadcrumb.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/button/button.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeButton } from "./button.compose.js"; 3 | import { styleModules } from "./button.styles.modules.js"; 4 | 5 | /** 6 | * The Button custom element definition. Implements {@link AdaptiveButton}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const buttonDefinition = composeButton( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | shadowOptions: { 18 | delegatesFocus: true 19 | } 20 | } 21 | ); 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/button/button.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { actionStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | import { ButtonAnatomy } from "./button.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | target : { 13 | part: ButtonAnatomy.parts.control, 14 | }, 15 | styles: actionStyles, 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/button/button.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | } 11 | 12 | .control { 13 | display: flex; 14 | align-items: center; 15 | white-space: nowrap; 16 | /* explicit width */ 17 | flex-grow: 1; 18 | justify-content: center; 19 | /* reset */ 20 | border: none; 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | ::slotted([slot="start"]), 26 | ::slotted([slot="end"]) { 27 | display: flex; 28 | } 29 | 30 | :host(:not([disabled])) .control { 31 | cursor: pointer; 32 | } 33 | `; 34 | 35 | /** 36 | * Visual styles including Adaptive UI tokens. 37 | * @public 38 | */ 39 | export const aestheticStyles: ElementStyles = css` 40 | `; 41 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/button/button.ts: -------------------------------------------------------------------------------- 1 | import { FASTButton } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Button. Extends {@link @microsoft/fast-foundation#FASTButton}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveButton extends FASTButton { 9 | /** 10 | * Applies 'icon-only' class when there is only an SVG in the default slot. 11 | */ 12 | protected defaultSlottedContentChanged(): void { 13 | const slottedElements = this.defaultSlottedContent.filter((x) => x.nodeType === Node.ELEMENT_NODE); 14 | 15 | if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) { 16 | this.control.classList.add("icon-only"); 17 | } else { 18 | this.control.classList.remove("icon-only"); 19 | } 20 | } 21 | 22 | public focus(options?: FocusOptions): void { 23 | this.control.focus(options); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/button/index.ts: -------------------------------------------------------------------------------- 1 | export { composeButton } from "./button.compose.js"; 2 | export { 3 | templateStyles as buttonTemplateStyles, 4 | aestheticStyles as buttonAestheticStyles, 5 | } from "./button.styles.js"; 6 | export { 7 | styleModules as buttonStyleModules, 8 | } from "./button.styles.modules.js"; 9 | export { template as buttonTemplate, ButtonAnatomy, ButtonConditions, ButtonParts } from "./button.template.js"; 10 | export { AdaptiveButton } from "./button.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/calendar/calendar.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeCalendar } from "./calendar.compose.js"; 3 | import { styleModules } from "./calendar.styles.modules.js"; 4 | 5 | /** 6 | * The Calendar custom element definition. Implements {@link @microsoft/fast-foundation#FASTCalendar}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const calendarDefinition = composeCalendar( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/calendar/calendar.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { 3 | controlShapeStyles, 4 | plainTextStyles 5 | } from "@adaptive-web/adaptive-ui/reference"; 6 | import { CalendarAnatomy } from "./calendar.template.js"; 7 | 8 | /** 9 | * Visual styles composed by style rules. 10 | * 11 | * @public 12 | */ 13 | export const styleModules: StyleRules = [ 14 | { 15 | styles: plainTextStyles, 16 | }, 17 | { 18 | target : { 19 | part: CalendarAnatomy.parts.day, 20 | }, 21 | styles: controlShapeStyles, 22 | }, 23 | ]; 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export { composeCalendar} from "./calendar.compose.js"; 2 | export { 3 | templateStyles as calendarTemplateStyles, 4 | aestheticStyles as calendarAestheticStyles, 5 | } from "./calendar.styles.js"; 6 | export { 7 | styleModules as calendarStyleModules, 8 | } from "./calendar.styles.modules.js"; 9 | export { template as calendarTemplate, CalendarAnatomy, CalendarConditions, CalendarParts } from "./calendar.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/card/card.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeCard } from "./card.compose.js"; 3 | import { styleModules } from "./card.styles.modules.js"; 4 | 5 | /** 6 | * The Card custom element definition. Implements {@link @microsoft/fast-foundation#FASTCard}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const cardDefinition = composeCard( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/card/card.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | layerFillInteractiveRest, 6 | layerShapeStyles, 7 | plainTextStyles, 8 | shadowCardStyles 9 | } from "@adaptive-web/adaptive-ui/reference"; 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | styles: [ 18 | layerShapeStyles, 19 | plainTextStyles, 20 | shadowCardStyles, 21 | ], 22 | properties: { 23 | backgroundFill: layerFillInteractiveRest, 24 | }, 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/card/card.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | } 11 | `; 12 | 13 | /** 14 | * Visual styles including Adaptive UI tokens. 15 | * @public 16 | */ 17 | export const aestheticStyles: ElementStyles = css` 18 | `; 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/card/card.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { cardTemplate, FASTCard } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const CardConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const CardParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const CardAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: CardConditions, 24 | parts: CardParts, 25 | }; 26 | 27 | /** 28 | * Default Card template, {@link @microsoft/fast-foundation#cardTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | cardTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/card/index.ts: -------------------------------------------------------------------------------- 1 | export { composeCard } from "./card.compose.js"; 2 | export { 3 | templateStyles as cardTemplateStyles, 4 | aestheticStyles as cardAestheticStyles, 5 | } from "./card.styles.js"; 6 | export { 7 | styleModules as cardStyleModules, 8 | } from "./card.styles.modules.js"; 9 | export { template as cardTemplate, CardAnatomy, CardConditions, CardParts } from "./card.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/checkbox/checkbox.definition.ts: -------------------------------------------------------------------------------- 1 | import { checkboxIcon, checkboxIndeterminateIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeCheckbox } from './checkbox.compose.js'; 4 | import { CheckboxStatics } from "./checkbox.template.js"; 5 | import { styleModules } from "./checkbox.styles.modules.js"; 6 | 7 | /** 8 | * The Checkbox custom element definition. Implements {@link @microsoft/fast-foundation#FASTCheckbox}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const checkboxDefinition = composeCheckbox( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [CheckboxStatics.checked]: checkboxIcon, 20 | [CheckboxStatics.indeterminate]: checkboxIndeterminateIcon, 21 | }, 22 | styleModules, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export { composeCheckbox } from "./checkbox.compose.js"; 2 | export { 3 | templateStyles as checkboxTemplateStyles, 4 | aestheticStyles as checkboxAestheticStyles, 5 | } from "./checkbox.styles.js"; 6 | export { 7 | styleModules as checkboxStyleModules, 8 | } from "./checkbox.styles.modules.js"; 9 | export { template as checkboxTemplate, CheckboxAnatomy, CheckboxConditions, CheckboxParts, CheckboxStatics } from "./checkbox.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/combobox/combobox.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronDownIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeCombobox } from "./combobox.compose.js"; 4 | import { ComboboxStatics } from "./combobox.template.js"; 5 | import { styleModules } from "./combobox.styles.modules.js"; 6 | 7 | /** 8 | * The Combobox custom element definition. Implements {@link @microsoft/fast-foundation#FASTCombobox}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const comboboxDefinition = composeCombobox( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [ComboboxStatics.indicator]: chevronDownIcon, 20 | }, 21 | styleModules, 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/combobox/combobox.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | flyoutStyles, 6 | inputStyles, 7 | itemContainerDensityStyles, 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | import { ComboboxAnatomy } from "./combobox.template.js"; 10 | 11 | /** 12 | * Visual styles composed by style rules. 13 | * 14 | * @public 15 | */ 16 | export const styleModules: StyleRules = [ 17 | { 18 | target : { 19 | part: ComboboxAnatomy.parts.control, 20 | }, 21 | styles: inputStyles, 22 | }, 23 | { 24 | target : { 25 | part: ComboboxAnatomy.parts.listbox, 26 | }, 27 | styles: [ 28 | itemContainerDensityStyles, 29 | flyoutStyles, 30 | ], 31 | }, 32 | ]; 33 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/combobox/combobox.ts: -------------------------------------------------------------------------------- 1 | import { FASTCombobox } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Combobox. Extends {@link @microsoft/fast-foundation#FASTCombobox}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveCombobox extends FASTCombobox { 9 | public connectedCallback() { 10 | super.connectedCallback(); 11 | 12 | this.onfocus = this.focusinHandler; 13 | } 14 | 15 | /** 16 | * Handles `focusin` actions for the component. When the component receives focus, 17 | * the input control is focused as it is on click. 18 | * 19 | * @internal 20 | */ 21 | public focusinHandler(e: FocusEvent): void { 22 | if (!this.shouldSkipFocus && e.target === e.currentTarget) { 23 | this.setSelectedOptions(); 24 | this.focusAndScrollOptionIntoView(); 25 | } 26 | 27 | this.shouldSkipFocus = false; 28 | } 29 | 30 | public focus(options?: FocusOptions): void { 31 | this.control.focus(options); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/combobox/index.ts: -------------------------------------------------------------------------------- 1 | export { composeCombobox } from "./combobox.compose.js"; 2 | export { 3 | templateStyles as comboboxTemplateStyles, 4 | aestheticStyles as comboboxAestheticStyles, 5 | } from "./combobox.styles.js"; 6 | export { 7 | styleModules as comboboxStyleModules, 8 | } from "./combobox.styles.modules.js"; 9 | export { template as comboboxTemplate, ComboboxAnatomy, ComboboxConditions, ComboboxParts, ComboboxStatics } from "./combobox.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDataGridCell } from "./data-grid-cell.compose.js"; 3 | import { styleModules } from "./data-grid-cell.styles.modules.js"; 4 | 5 | /** 6 | * The Data Grid Cell custom element definition. Implements {@link @microsoft/fast-foundation#FASTDataGridCell}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const dataGridCellDefinition = composeDataGridCell( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | controlDensityStyles, 6 | controlShapeStyles, 7 | labelTextStyles, 8 | plainTextStyles 9 | } from "@adaptive-web/adaptive-ui/reference"; 10 | import { DataGridCellAnatomy } from "./data-grid-cell.template.js"; 11 | 12 | /** 13 | * Visual styles composed by style rules. 14 | * 15 | * @public 16 | */ 17 | export const styleModules: StyleRules = [ 18 | { 19 | styles: [ 20 | controlShapeStyles, 21 | controlDensityStyles, 22 | plainTextStyles, 23 | ], 24 | }, 25 | { 26 | target : { 27 | contextCondition: DataGridCellAnatomy.conditions.cellType.columnHeader, 28 | }, 29 | styles: labelTextStyles, 30 | }, 31 | { 32 | target : { 33 | contextCondition: DataGridCellAnatomy.conditions.cellType.rowHeader, 34 | }, 35 | styles: labelTextStyles, 36 | }, 37 | ]; 38 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | overflow: hidden; 10 | white-space: nowrap; 11 | } 12 | `; 13 | 14 | /** 15 | * Visual styles including Adaptive UI tokens. 16 | * @public 17 | */ 18 | export const aestheticStyles: ElementStyles = css` 19 | `; 20 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-cell/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDataGridCell } from "./data-grid-cell.compose.js"; 2 | export { 3 | templateStyles as dataGridCellTemplateStyles, 4 | aestheticStyles as dataGridCellAestheticStyles, 5 | } from "./data-grid-cell.styles.js"; 6 | export { 7 | styleModules as dataGridCellStyleModules, 8 | } from "./data-grid-cell.styles.modules.js"; 9 | export { 10 | template as dataGridCellTemplate, 11 | DataGridCellAnatomy, 12 | DataGridCellConditions, 13 | DataGridCellParts 14 | } from "./data-grid-cell.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDataGridRow } from "./data-grid-row.compose.js"; 3 | import { styleModules } from "./data-grid-row.styles.modules.js"; 4 | 5 | /** 6 | * The Data Grid Cell custom element definition. Implements {@link @microsoft/fast-foundation#FASTDataGridRow}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const dataGridRowDefinition = composeDataGridRow( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { neutralStrokeSubtle, strokeThickness } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | properties: { 12 | borderFillBottom: neutralStrokeSubtle.rest, 13 | borderStyleBottom: "solid", 14 | borderThicknessBottom: strokeThickness, 15 | } 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid-row/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDataGridRow } from "./data-grid-row.compose.js"; 2 | export { 3 | templateStyles as dataGridRowTemplateStyles, 4 | aestheticStyles as dataGridRowAestheticStyles, 5 | } from "./data-grid-row.styles.js"; 6 | export { 7 | styleModules as dataGridRowStyleModules, 8 | } from "./data-grid-row.styles.modules.js"; 9 | export { template as dataGridRowTemplate, DataGridRowAnatomy, DataGridRowConditions, DataGridRowParts } from "./data-grid-row.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid/data-grid.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDataGrid } from "./data-grid.compose.js"; 3 | import { styleModules } from "./data-grid.styles.modules.js"; 4 | 5 | /** 6 | * The Data Grid custom element definition. Implements {@link @microsoft/fast-foundation#FASTDataGrid}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const dataGridDefinition = composeDataGrid( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid/data-grid.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | ]; 12 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid/data-grid.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | position: relative; 11 | flex-direction: column; 12 | } 13 | 14 | :host([selection-mode="multi-row"]) { 15 | user-select: none; 16 | } 17 | `; 18 | 19 | /** 20 | * Visual styles including Adaptive UI tokens. 21 | * @public 22 | */ 23 | export const aestheticStyles: ElementStyles = css``; 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/data-grid/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDataGrid } from "./data-grid.compose.js"; 2 | export { 3 | templateStyles as dataGridTemplateStyles, 4 | aestheticStyles as dataGridAestheticStyles, 5 | } from "./data-grid.styles.js"; 6 | export { 7 | styleModules as dataGridStyleModules, 8 | } from "./data-grid.styles.modules.js"; 9 | export { template as dataGridTemplate, DataGridAnatomy, DataGridConditions, DataGridParts } from "./data-grid.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/dialog/dialog.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDialog } from "./dialog.compose.js"; 3 | import { styleModules } from "./dialog.styles.modules.js"; 4 | 5 | /** 6 | * The Dialog custom element definition. Implements {@link @microsoft/fast-foundation#FASTDialog}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const dialogDefinition = composeDialog( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/dialog/dialog.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { Color, StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { layerFillFixedPlus1, layerShapeStyles, shadowDialogStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | import { DialogAnatomy } from "./dialog.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | target : { 13 | part: DialogAnatomy.parts.control, 14 | }, 15 | styles: [ 16 | layerShapeStyles, 17 | shadowDialogStyles, 18 | ], 19 | properties: { 20 | backgroundFill: layerFillFixedPlus1 21 | }, 22 | }, 23 | { 24 | target : { 25 | part: DialogAnatomy.parts.overlay, 26 | }, 27 | properties: { 28 | backgroundFill: Color.fromRgb(0, 0, 0, 0.3), 29 | }, 30 | }, 31 | ]; 32 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDialog } from "./dialog.compose.js"; 2 | export { 3 | templateStyles as dialogTemplateStyles, 4 | aestheticStyles as dialogAestheticStyles, 5 | } from "./dialog.styles.js"; 6 | export { 7 | styleModules as dialogStyleModules, 8 | } from "./dialog.styles.modules.js"; 9 | export { template as dialogTemplate, DialogAnatomy, DialogConditions, DialogParts } from "./dialog.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/disclosure/disclosure.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDisclosure } from "./disclosure.compose.js"; 3 | import { styleModules } from "./disclosure.styles.modules.js"; 4 | 5 | /** 6 | * The Disclosure custom element definition. Implements {@link @microsoft/fast-foundation#FASTDisclosure}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const disclosureDefinition = composeDisclosure( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/disclosure/disclosure.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | accentFillReadableControlStyles, 6 | controlDensityStyles, 7 | controlShapeStyles, 8 | typeRampBaseStyles 9 | } from "@adaptive-web/adaptive-ui/reference"; 10 | import { DisclosureAnatomy } from "./disclosure.template.js"; 11 | 12 | /** 13 | * Visual styles composed by style rules. 14 | * 15 | * @public 16 | */ 17 | export const styleModules: StyleRules = [ 18 | { 19 | styles: typeRampBaseStyles, 20 | }, 21 | { 22 | target : { 23 | part: DisclosureAnatomy.parts.invoker, 24 | }, 25 | styles: [ 26 | controlShapeStyles, 27 | controlDensityStyles, 28 | accentFillReadableControlStyles, 29 | ] 30 | }, 31 | ]; 32 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/disclosure/disclosure.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | } 11 | 12 | .invoker { 13 | display: flex; 14 | align-items: center; 15 | cursor: pointer; 16 | } 17 | 18 | ::slotted([slot="start"]), 19 | ::slotted([slot="end"]) { 20 | display: flex; 21 | } 22 | 23 | #disclosure-content { 24 | display: none; 25 | } 26 | 27 | :host([expanded]) #disclosure-content { 28 | display: flex; 29 | } 30 | `; 31 | 32 | /** 33 | * Visual styles including Adaptive UI tokens. 34 | * @public 35 | */ 36 | export const aestheticStyles: ElementStyles = css` 37 | .invoker { 38 | max-width: max-content; 39 | } 40 | `; 41 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/disclosure/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDisclosure } from "./disclosure.compose.js"; 2 | export { 3 | templateStyles as disclosureTemplateStyles, 4 | aestheticStyles as disclosureAestheticStyles, 5 | } from "./disclosure.styles.js"; 6 | export { 7 | styleModules as disclosureStyleModules, 8 | } from "./disclosure.styles.modules.js"; 9 | export { template as disclosureTemplate, DisclosureAnatomy, DisclosureConditions, DisclosureParts } from "./disclosure.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/divider/divider.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeDivider } from "./divider.compose.js"; 3 | import { styleModules } from "./divider.styles.modules.js"; 4 | 5 | /** 6 | * The Divider custom element definition. Implements {@link @microsoft/fast-foundation#FASTDivider}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const dividerDefinition = composeDivider( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/divider/divider.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { neutralStrokeSubtle, strokeThickness } from "@adaptive-web/adaptive-ui/reference"; 3 | import { DividerAnatomy } from "./divider.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | target : { 13 | contextCondition: DividerAnatomy.conditions.orientation.horizontal, 14 | }, 15 | properties: { 16 | borderFillTop: neutralStrokeSubtle.rest, 17 | borderStyleTop: "solid", 18 | borderThicknessTop: strokeThickness, 19 | }, 20 | }, 21 | { 22 | target : { 23 | contextCondition: DividerAnatomy.conditions.orientation.vertical, 24 | }, 25 | properties: { 26 | borderFillLeft: neutralStrokeSubtle.rest, 27 | borderStyleLeft: "solid", 28 | borderThicknessLeft: strokeThickness, 29 | }, 30 | }, 31 | ]; 32 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/divider/divider.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | } 11 | 12 | :host([orientation="vertical"]) { 13 | height: 100%; 14 | } 15 | `; 16 | 17 | /** 18 | * Visual styles including Adaptive UI tokens. 19 | * @public 20 | */ 21 | export const aestheticStyles: ElementStyles = css``; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/divider/index.ts: -------------------------------------------------------------------------------- 1 | export { composeDivider } from "./divider.compose.js"; 2 | export { 3 | templateStyles as dividerTemplateStyles, 4 | aestheticStyles as dividerAestheticStyles, 5 | } from "./divider.styles.js"; 6 | export { 7 | styleModules as dividerStyleModules, 8 | } from "./divider.styles.modules.js"; 9 | export { template as dividerTemplate, DividerAnatomy, DividerConditions, DividerParts } from "./divider.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/flipper/flipper.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronLeftIcon, chevronRightIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeFlipper } from "./flipper.compose.js"; 4 | import { FlipperStatics } from "./flipper.template.js"; 5 | import { styleModules } from "./flipper.styles.modules.js"; 6 | 7 | /** 8 | * The Flipper custom element definition. Implements {@link @microsoft/fast-foundation#FASTFlipper}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const flipperDefinition = composeFlipper( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [FlipperStatics.previous]: chevronLeftIcon, 20 | [FlipperStatics.next]: chevronRightIcon, 21 | }, 22 | styleModules, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/flipper/flipper.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { actionStyles, controlSquareDensityStyles, roundShapeStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | styles: [ 12 | actionStyles, 13 | roundShapeStyles, 14 | controlSquareDensityStyles, 15 | ], 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/flipper/flipper.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | align-items: center; 11 | cursor: pointer; 12 | } 13 | 14 | .next, 15 | .previous { 16 | display: flex; 17 | } 18 | `; 19 | 20 | /** 21 | * Visual styles including Adaptive UI tokens. 22 | * @public 23 | */ 24 | export const aestheticStyles: ElementStyles = css` 25 | `; 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/flipper/index.ts: -------------------------------------------------------------------------------- 1 | export { composeFlipper } from "./flipper.compose.js"; 2 | export { 3 | templateStyles as flipperTemplateStyles, 4 | aestheticStyles as flipperAestheticStyles, 5 | } from "./flipper.styles.js"; 6 | export { 7 | styleModules as flipperStyleModules, 8 | } from "./flipper.styles.modules.js"; 9 | export { template as flipperTemplate, FlipperAnatomy, FlipperConditions, FlipperParts, FlipperStatics } from "./flipper.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/horizontal-scroll/horizontal-scroll.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeHorizontalScroll } from "./horizontal-scroll.compose.js"; 3 | import { styleModules } from "./horizontal-scroll.styles.modules.js"; 4 | 5 | /** 6 | * The Horizontal Scroll custom element definition. Implements {@link @microsoft/fast-foundation#FASTHorizontalScroll}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const horizontalScrollDefinition = composeHorizontalScroll( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/horizontal-scroll/horizontal-scroll.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | 3 | /** 4 | * Visual styles composed by style rules. 5 | * 6 | * @public 7 | */ 8 | export const styleModules: StyleRules = [ 9 | ]; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/horizontal-scroll/horizontal-scroll.ts: -------------------------------------------------------------------------------- 1 | import { FASTHorizontalScroll, HorizontalScrollView } from "@microsoft/fast-foundation"; 2 | import { actionsStyles } from "./horizontal-scroll.styles.js"; 3 | 4 | /** 5 | * The Adaptive version of HorizontalScroll. Extends {@link @microsoft/fast-foundation#FASTHorizontalScroll}. 6 | * 7 | * @public 8 | */ 9 | export class AdaptiveHorizontalScroll extends FASTHorizontalScroll { 10 | public connectedCallback(): void { 11 | super.connectedCallback(); 12 | 13 | if (this.view !== "mobile") { 14 | this.$fastController.addStyles(actionsStyles); 15 | } 16 | } 17 | 18 | protected viewChanged(prev?: HorizontalScrollView, next?: HorizontalScrollView): void { 19 | if (next === HorizontalScrollView.default) { 20 | this.$fastController.addStyles(actionsStyles); 21 | } else { 22 | this.$fastController.removeStyles(actionsStyles); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/horizontal-scroll/index.ts: -------------------------------------------------------------------------------- 1 | export { composeHorizontalScroll } from "./horizontal-scroll.compose.js"; 2 | export { 3 | templateStyles as horizontalScrollTemplateStyles, 4 | aestheticStyles as horizontalScrollAestheticStyles, 5 | } from "./horizontal-scroll.styles.js"; 6 | export { 7 | styleModules as horizontalScrollStyleModules, 8 | } from "./horizontal-scroll.styles.modules.js"; 9 | export { 10 | template as horizontalScrollTemplate, 11 | HorizontalScrollAnatomy, 12 | HorizontalScrollConditions, 13 | HorizontalScrollParts 14 | } from "./horizontal-scroll.template.js"; 15 | export { AdaptiveHorizontalScroll } from "./horizontal-scroll.js"; 16 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox-option/index.ts: -------------------------------------------------------------------------------- 1 | export { composeListboxOption } from "./listbox-option.compose.js"; 2 | export { 3 | templateStyles as listboxOptionTemplateStyles, 4 | aestheticStyles as listboxOptionAestheticStyles, 5 | } from "./listbox-option.styles.js"; 6 | export { 7 | styleModules as listboxOptionStyleModules, 8 | } from "./listbox-option.styles.modules.js"; 9 | export { 10 | template as listboxOptionTemplate, 11 | ListboxOptionAnatomy, 12 | ListboxOptionConditions, 13 | ListboxOptionParts 14 | } from "./listbox-option.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox-option/listbox-option.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeListboxOption } from "./listbox-option.compose.js"; 3 | import { styleModules } from "./listbox-option.styles.modules.js"; 4 | 5 | /** 6 | * The option custom element definition. Implements {@link @microsoft/fast-foundation#FASTListboxOption}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const listboxOptionDefinition = composeListboxOption( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox-option/listbox-option.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | itemStyles, 6 | selectableSelectedStyles, 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | import { ListboxOptionAnatomy } from "./listbox-option.template.js"; 9 | 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | styles: itemStyles, 18 | }, 19 | { 20 | target : { 21 | contextCondition: ListboxOptionAnatomy.conditions.selected, 22 | }, 23 | styles: selectableSelectedStyles, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox-option/listbox-option.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | align-items: center; 11 | overflow: hidden; 12 | user-select: none; 13 | white-space: nowrap; 14 | cursor: pointer; 15 | } 16 | 17 | /* Keep for now, show on full component not just children */ 18 | :host([disabled]) { 19 | cursor: not-allowed; 20 | } 21 | 22 | .content { 23 | /* justify-self: start; */ 24 | overflow: hidden; 25 | text-overflow: ellipsis; 26 | flex-grow: 1; 27 | } 28 | 29 | ::slotted([slot="start"]), 30 | ::slotted([slot="end"]) { 31 | display: flex; 32 | } 33 | `; 34 | 35 | /** 36 | * Visual styles including Adaptive UI tokens. 37 | * @public 38 | */ 39 | export const aestheticStyles: ElementStyles = css` 40 | `; 41 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox/index.ts: -------------------------------------------------------------------------------- 1 | export { composeListbox } from "./listbox.compose.js"; 2 | export { 3 | templateStyles as listboxTemplateStyles, 4 | aestheticStyles as listboxAestheticStyles, 5 | } from "./listbox.styles.js"; 6 | export { 7 | styleModules as listboxStyleModules, 8 | } from "./listbox.styles.modules.js"; 9 | export { template as listboxTemplate, ListboxAnatomy, ListboxConditions, ListboxParts } from "./listbox.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox/listbox.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeListbox } from "./listbox.compose.js"; 3 | import { styleModules } from "./listbox.styles.modules.js"; 4 | 5 | /** 6 | * The Listbox custom element definition. Implements {@link @microsoft/fast-foundation#FASTListboxElement}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const listboxDefinition = composeListbox( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox/listbox.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | controlShapeStyles, 6 | itemContainerDensityStyles, 7 | neutralOutlineDiscernibleControlStyles, 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | styles: [ 18 | controlShapeStyles, 19 | itemContainerDensityStyles, 20 | neutralOutlineDiscernibleControlStyles, 21 | ], 22 | }, 23 | ]; 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox/listbox.styles.ts: -------------------------------------------------------------------------------- 1 | import { 2 | focusStrokeOuter, 3 | focusStrokeThickness, 4 | } from "@adaptive-web/adaptive-ui/reference"; 5 | import { css, ElementStyles } from "@microsoft/fast-element"; 6 | 7 | /** 8 | * Basic layout styling associated with the anatomy of the template. 9 | * @public 10 | */ 11 | export const templateStyles: ElementStyles = css` 12 | :host { 13 | display: inline-flex; 14 | flex-direction: column; 15 | } 16 | `; 17 | 18 | /** 19 | * Visual styles including Adaptive UI tokens. 20 | * @public 21 | */ 22 | export const aestheticStyles: ElementStyles = css` 23 | :host(:not([aria-multiselectable]):not([disabled]):focus-visible) ::slotted([aria-selected="true"][role="option"]:not([disabled])), 24 | :host([aria-multiselectable="true"]:not([disabled]):focus-visible) ::slotted([aria-checked="true"][role="option"]:not([disabled])) { 25 | outline: ${focusStrokeThickness} solid ${focusStrokeOuter}; 26 | outline-offset: 1px; 27 | } 28 | `; 29 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/listbox/listbox.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTListboxElement, listboxTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Focus, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const ListboxConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const ListboxParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const ListboxAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.disabledAttribute, 23 | conditions: ListboxConditions, 24 | parts: ListboxParts, 25 | focus: Focus.contextFocused(), 26 | }; 27 | 28 | /** 29 | * Default Listbox template, {@link @microsoft/fast-foundation#listboxTemplate}. 30 | * @public 31 | */ 32 | export const template: (ds: DesignSystem) => ElementViewTemplate = 33 | (ds: DesignSystem) => 34 | listboxTemplate(); 35 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu-item/index.ts: -------------------------------------------------------------------------------- 1 | export { composeMenuItem } from "./menu-item.compose.js"; 2 | export { 3 | templateStyles as menuItemTemplateStyles, 4 | aestheticStyles as menuItemAestheticStyles, 5 | } from "./menu-item.styles.js"; 6 | export { 7 | styleModules as menuItemStyleModules, 8 | } from "./menu-item.styles.modules.js"; 9 | export { template as menuItemTemplate, MenuItemAnatomy, MenuItemConditions, MenuItemParts, MenuItemStatics } from "./menu-item.template.js"; 10 | export { AdaptiveMenuItem } from "./menu-item.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu-item/menu-item.definition.ts: -------------------------------------------------------------------------------- 1 | import { checkboxIcon, chevronRightIcon, radioIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeMenuItem } from "./menu-item.compose.js"; 4 | import { MenuItemStatics } from "./menu-item.template.js"; 5 | import { styleModules } from "./menu-item.styles.modules.js"; 6 | 7 | /** 8 | * The Menu Item custom element definition. Implements {@link @microsoft/fast-foundation#FASTMenuItem}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const menuItemDefinition = composeMenuItem( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [MenuItemStatics.checkbox]: checkboxIcon, 20 | [MenuItemStatics.radio]: radioIcon, 21 | [MenuItemStatics.submenu]: chevronRightIcon, 22 | }, 23 | styleModules, 24 | } 25 | ); 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu-item/menu-item.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { itemStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | styles: itemStyles, 12 | }, 13 | ]; 14 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu-item/menu-item.ts: -------------------------------------------------------------------------------- 1 | import { attr } from "@microsoft/fast-element"; 2 | import { FASTMenuItem } from "@microsoft/fast-foundation"; 3 | 4 | /** 5 | * Types of menu item column count. 6 | * @internal 7 | */ 8 | export type AdaptiveMenuItemColumnCount = 0 | 1 | 2; 9 | 10 | /** 11 | * The Adaptive version of MenuItem. Extends {@link @microsoft/fast-foundation#FASTMenuItem}. 12 | * 13 | * @public 14 | */ 15 | export class AdaptiveMenuItem extends FASTMenuItem { 16 | /** 17 | * Managed by {@link AdaptiveMenu} to align checkbox or radio controls and `start` slot content properly. 18 | * 19 | * @public 20 | */ 21 | @attr({ attribute: "start-column-count" }) 22 | public startColumnCount: AdaptiveMenuItemColumnCount = 0; 23 | 24 | // public connectedCallback(): void { 25 | // super.connectedCallback(); 26 | 27 | // if (!this.startColumnCount) { 28 | // this.startColumnCount = 0; 29 | // } 30 | // } 31 | } 32 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/index.ts: -------------------------------------------------------------------------------- 1 | export { composeMenu } from "./menu.compose.js"; 2 | export { 3 | templateStyles as menuTemplateStyles, 4 | aestheticStyles as menuAestheticStyles, 5 | } from "./menu.styles.js"; 6 | export { 7 | styleModules as menuStyleModules, 8 | } from "./menu.styles.modules.js"; 9 | export { template as menuTemplate, MenuAnatomy, MenuConditions, MenuParts } from "./menu.template.js"; 10 | export { AdaptiveMenu } from "./menu.js"; 11 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/menu.compose.ts: -------------------------------------------------------------------------------- 1 | import type { FASTElementDefinition } from '@microsoft/fast-element'; 2 | import { ComposeOptions, DesignSystem } from "../../design-system.js"; 3 | import { componentBaseStyles } from "../../styles/styles.js"; 4 | import { AdaptiveMenu } from "./menu.js"; 5 | import { aestheticStyles, templateStyles } from "./menu.styles.js"; 6 | import { MenuAnatomy, template } from "./menu.template.js"; 7 | 8 | const defaultStyles = [componentBaseStyles, templateStyles, aestheticStyles]; 9 | 10 | /** 11 | * @public 12 | */ 13 | export function composeMenu( 14 | ds: DesignSystem, 15 | options?: ComposeOptions 16 | ): FASTElementDefinition { 17 | const styles = DesignSystem.assembleStyles(defaultStyles, MenuAnatomy, options); 18 | 19 | return AdaptiveMenu.compose({ 20 | name: `${ds.prefix}-menu`, 21 | template: options?.template?.(ds) ?? template(ds), 22 | styles, 23 | registry: ds.registry, 24 | elementOptions: options?.elementOptions, 25 | shadowOptions: options?.shadowOptions 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/menu.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeMenu } from "./menu.compose.js"; 3 | import { styleModules } from "./menu.styles.modules.js"; 4 | 5 | /** 6 | * The Menu custom element definition. Implements {@link @microsoft/fast-foundation#FASTMenu}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const menuDefinition = composeMenu( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/menu.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | flyoutStyles, 6 | itemContainerDensityStyles, 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | 9 | /** 10 | * Visual styles composed by style rules. 11 | * 12 | * @public 13 | */ 14 | export const styleModules: StyleRules = [ 15 | { 16 | styles: [ 17 | itemContainerDensityStyles, 18 | flyoutStyles, 19 | ], 20 | }, 21 | ]; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/menu.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | } 11 | 12 | :host([slot="submenu"]) { 13 | width: max-content; 14 | } 15 | `; 16 | 17 | /** 18 | * Visual styles including Adaptive UI tokens. 19 | * @public 20 | */ 21 | export const aestheticStyles: ElementStyles = css` 22 | :host { 23 | max-width: 368px; 24 | min-width: 64px; 25 | } 26 | 27 | ::slotted(adaptive-divider) { 28 | margin: 4px 0; 29 | } 30 | `; 31 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/menu/menu.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTMenu, menuTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const MenuConditions = { 10 | submenu: "[slot='submenu']", 11 | }; 12 | 13 | /** 14 | * @public 15 | */ 16 | export const MenuParts = { 17 | }; 18 | 19 | /** 20 | * @public 21 | */ 22 | export const MenuAnatomy: ComponentAnatomy = { 23 | interactivity: Interactivity.never, 24 | conditions: MenuConditions, 25 | parts: MenuParts, 26 | }; 27 | 28 | /** 29 | * Default Menu template, {@link @microsoft/fast-foundation#menuTemplate}. 30 | * @public 31 | */ 32 | export const template: (ds: DesignSystem) => ElementViewTemplate = 33 | (ds: DesignSystem) => 34 | menuTemplate(); 35 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/number-field/index.ts: -------------------------------------------------------------------------------- 1 | export { composeNumberField } from "./number-field.compose.js"; 2 | export { 3 | templateStyles as numberFieldTemplateStyles, 4 | aestheticStyles as numberFieldAestheticStyles, 5 | } from "./number-field.styles.js"; 6 | export { 7 | styleModules as numberFieldStyleModules, 8 | } from "./number-field.styles.modules.js"; 9 | export { 10 | template as numberFieldTemplate, 11 | NumberFieldAnatomy, 12 | NumberFieldConditions, 13 | NumberFieldParts, 14 | NumberFieldStatics 15 | } from "./number-field.template.js"; 16 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/number-field/number-field.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronDownIcon, chevronUpIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeNumberField } from "./number-field.compose.js"; 4 | import { NumberFieldStatics } from "./number-field.template.js"; 5 | import { styleModules } from "./number-field.styles.modules.js"; 6 | 7 | /** 8 | * The Number Field custom element definition. Implements {@link @microsoft/fast-foundation#FASTNumberField}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const numberFieldDefinition = composeNumberField( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [NumberFieldStatics.stepDown]: chevronDownIcon, 20 | [NumberFieldStatics.stepUp]: chevronUpIcon, 21 | }, 22 | styleModules, 23 | } 24 | ); 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/number-field/number-field.ts: -------------------------------------------------------------------------------- 1 | import { FASTNumberField } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Number Field. Extends {@link @microsoft/fast-foundation#FASTNumberField}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveNumberField extends FASTNumberField { 9 | public focus(options?: FocusOptions): void { 10 | this.control.focus(options); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list-item/index.ts: -------------------------------------------------------------------------------- 1 | export { composePickerListItem } from "./picker-list-item.compose.js"; 2 | export { 3 | templateStyles as pickerListItemTemplateStyles, 4 | aestheticStyles as pickerListItemAestheticStyles, 5 | } from "./picker-list-item.styles.js"; 6 | export { 7 | styleModules as pickerListItemStyleModules, 8 | } from "./picker-list-item.styles.modules.js"; 9 | export { 10 | template as pickerListItemTemplate, 11 | PickerListItemAnatomy, 12 | PickerListItemConditions, 13 | PickerListItemParts 14 | } from "./picker-list-item.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list-item/picker-list-item.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composePickerListItem } from "./picker-list-item.compose.js"; 3 | import { styleModules } from "./picker-list-item.styles.modules.js"; 4 | 5 | /** 6 | * The Picker List Item custom element definition. Implements {@link @microsoft/fast-foundation#FASTPickerListItem}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const pickerListItemDefinition = composePickerListItem( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list-item/picker-list-item.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { itemStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | styles: itemStyles, 12 | }, 13 | ]; 14 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list-item/picker-list-item.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | align-items: center; 11 | justify-items: center; 12 | overflow: hidden; 13 | white-space: nowrap; 14 | user-select: none; 15 | cursor: pointer; 16 | } 17 | `; 18 | 19 | /** 20 | * Visual styles including Adaptive UI tokens. 21 | * @public 22 | */ 23 | export const aestheticStyles: ElementStyles = css` 24 | `; 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list/index.ts: -------------------------------------------------------------------------------- 1 | export { composePickerList } from "./picker-list.compose.js"; 2 | export { 3 | templateStyles as pickerListTemplateStyles, 4 | aestheticStyles as pickerListAestheticStyles, 5 | } from "./picker-list.styles.js"; 6 | export { 7 | styleModules as pickerListStyleModules, 8 | } from "./picker-list.styles.modules.js"; 9 | export { template as pickerListTemplate, PickerListAnatomy, PickerListConditions, PickerListParts } from "./picker-list.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list/picker-list.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composePickerList } from "./picker-list.compose.js"; 3 | import { styleModules } from "./picker-list.styles.modules.js"; 4 | 5 | /** 6 | * The Picker List custom element definition. Implements {@link @microsoft/fast-foundation#FASTPickerList}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const pickerListDefinition = composePickerList( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list/picker-list.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { 3 | controlShapeStyles, 4 | neutralOutlineDiscernibleControlStyles, 5 | typeRampBaseStyles 6 | } from "@adaptive-web/adaptive-ui/reference"; 7 | 8 | /** 9 | * Visual styles composed by style rules. 10 | * 11 | * @public 12 | */ 13 | export const styleModules: StyleRules = [ 14 | { 15 | styles: [ 16 | controlShapeStyles, 17 | typeRampBaseStyles, 18 | neutralOutlineDiscernibleControlStyles 19 | ], 20 | }, 21 | ]; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-list/picker-list.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTPickerList, pickerListTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const PickerListConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const PickerListParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const PickerListAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.always, 23 | conditions: PickerListConditions, 24 | parts: PickerListParts, 25 | }; 26 | 27 | /** 28 | * Default Picker List template, {@link @microsoft/fast-foundation#pickerListTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | pickerListTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu-option/index.ts: -------------------------------------------------------------------------------- 1 | export { composePickerMenuOption } from "./picker-menu-option.compose.js"; 2 | export { 3 | templateStyles as pickerMenuOptionTemplateStyles, 4 | aestheticStyles as pickerMenuOptionAestheticStyles, 5 | } from "./picker-menu-option.styles.js"; 6 | export { 7 | styleModules as pickerMenuOptionStyleModules, 8 | } from "./picker-menu-option.styles.modules.js"; 9 | export { 10 | template as pickerMenuOptionTemplate, 11 | PickerMenuOptionAnatomy, 12 | PickerMenuOptionConditions, 13 | PickerMenuOptionParts 14 | } from "./picker-menu-option.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu-option/picker-menu-option.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composePickerMenuOption } from "./picker-menu-option.compose.js"; 3 | import { styleModules } from "./picker-menu-option.styles.modules.js"; 4 | 5 | /** 6 | * The Picker Menu Option custom element definition. Implements {@link @microsoft/fast-foundation#FASTPickerMenuOption}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const pickerMenuOptionDefinition = composePickerMenuOption( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu-option/picker-menu-option.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { highlightFillReadableControlStyles, itemStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | import { PickerMenuOptionAnatomy } from "./picker-menu-option.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | styles: itemStyles, 13 | }, 14 | { 15 | target : { 16 | contextCondition: PickerMenuOptionAnatomy.conditions.selected, 17 | }, 18 | styles: highlightFillReadableControlStyles, 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu-option/picker-menu-option.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | align-items: center; 11 | justify-items: center; 12 | overflow: hidden; 13 | white-space: nowrap; 14 | user-select: none; 15 | cursor: pointer; 16 | } 17 | `; 18 | 19 | /** 20 | * Visual styles including Adaptive UI tokens. 21 | * @public 22 | */ 23 | export const aestheticStyles: ElementStyles = css` 24 | `; 25 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu/index.ts: -------------------------------------------------------------------------------- 1 | export { composePickerMenu } from "./picker-menu.compose.js"; 2 | export { 3 | templateStyles as pickerMenuTemplateStyles, 4 | aestheticStyles as pickerMenuAestheticStyles, 5 | } from "./picker-menu.styles.js"; 6 | export { 7 | styleModules as pickerMenuStyleModules, 8 | } from "./picker-menu.styles.modules.js"; 9 | export { template as pickerMenuTemplate, PickerMenuAnatomy, PickerMenuConditions, PickerMenuParts } from "./picker-menu.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu/picker-menu.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composePickerMenu } from "./picker-menu.compose.js"; 3 | import { styleModules } from "./picker-menu.styles.modules.js"; 4 | 5 | /** 6 | * The Picker Menu custom element definition. Implements {@link @microsoft/fast-foundation#FASTPickerMenu}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const pickerMenuDefinition = composePickerMenu( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | flyoutStyles, 6 | itemContainerDensityStyles, 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | 9 | /** 10 | * Visual styles composed by style rules. 11 | * 12 | * @public 13 | */ 14 | export const styleModules: StyleRules = [ 15 | { 16 | styles: [ 17 | itemContainerDensityStyles, 18 | flyoutStyles, 19 | ] 20 | }, 21 | ]; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker-menu/picker-menu.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | width: 100%; 10 | display: flex; 11 | flex-direction: column; 12 | overflow-y: auto; 13 | overflow-x: hidden; 14 | pointer-events: auto; 15 | z-index: 1000; 16 | } 17 | 18 | .suggestions-available-alert { 19 | height: 0; 20 | opacity: 0; 21 | overflow: hidden; 22 | } 23 | `; 24 | 25 | /** 26 | * Visual styles including Adaptive UI tokens. 27 | * @public 28 | */ 29 | export const aestheticStyles: ElementStyles = css` 30 | `; 31 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker/index.ts: -------------------------------------------------------------------------------- 1 | export { composePicker } from "./picker.compose.js"; 2 | export { 3 | templateStyles as pickerTemplateStyles, 4 | aestheticStyles as pickerAestheticStyles, 5 | } from "./picker.styles.js"; 6 | export { 7 | styleModules as pickerStyleModules, 8 | } from "./picker.styles.modules.js"; 9 | export { template as pickerTemplate, PickerAnatomy, PickerConditions, PickerParts } from "./picker.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker/picker.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composePicker } from "./picker.compose.js"; 3 | import { styleModules } from "./picker.styles.modules.js"; 4 | 5 | /** 6 | * The Picker custom element definition. Implements {@link @microsoft/fast-foundation#FASTPicker}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const pickerDefinition = composePicker( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker/picker.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | flyoutStyles, 6 | itemContainerDensityStyles, 7 | plainTextStyles, 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | import { PickerAnatomy } from "./picker.template.js"; 10 | 11 | const menuStyles = [ 12 | plainTextStyles, 13 | itemContainerDensityStyles, 14 | flyoutStyles, 15 | ]; 16 | 17 | /** 18 | * Visual styles composed by style rules. 19 | * 20 | * @public 21 | */ 22 | export const styleModules: StyleRules = [ 23 | { 24 | target : { 25 | part: PickerAnatomy.parts.loadingDisplay, 26 | }, 27 | styles: menuStyles, 28 | }, 29 | { 30 | target : { 31 | part: PickerAnatomy.parts.noOptionsDisplay, 32 | }, 33 | styles: menuStyles, 34 | }, 35 | ]; 36 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/picker/picker.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | } 11 | 12 | .region { 13 | display: flex; 14 | z-index: 1000; 15 | } 16 | 17 | .loaded { 18 | opacity: 1; 19 | pointer-events: none; 20 | } 21 | 22 | .loading-display, 23 | .no-options-display { 24 | display: flex; 25 | flex-direction: column; 26 | width: 100%; 27 | align-items: center; 28 | justify-items: center; 29 | } 30 | 31 | .bottom { 32 | flex-direction: column; 33 | } 34 | 35 | .top { 36 | flex-direction: column-reverse; 37 | } 38 | `; 39 | 40 | /** 41 | * Visual styles including Adaptive UI tokens. 42 | * @public 43 | */ 44 | export const aestheticStyles: ElementStyles = css` 45 | `; 46 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress-ring/index.ts: -------------------------------------------------------------------------------- 1 | export { composeProgressRing } from "./progress-ring.compose.js"; 2 | export { 3 | templateStyles as progressRingTemplateStyles, 4 | aestheticStyles as progressRingAestheticStyles, 5 | } from "./progress-ring.styles.js"; 6 | export { 7 | styleModules as progressRingStyleModules, 8 | } from "./progress-ring.styles.modules.js"; 9 | export { 10 | template as progressRingTemplate, 11 | ProgressRingAnatomy, 12 | ProgressRingConditions, 13 | ProgressRingParts 14 | } from "./progress-ring.template.js"; 15 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress-ring/progress-ring.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeProgressRing } from "./progress-ring.compose.js"; 3 | import { styleModules } from "./progress-ring.styles.modules.js"; 4 | 5 | /** 6 | * The Progress Ring custom element definition. Implements {@link @microsoft/fast-foundation#FASTProgressRing}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const progressRingDefinition = composeProgressRing( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress-ring/progress-ring.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | accentFillReadable, 6 | neutralFillSubtle, 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | import { ProgressRingAnatomy } from "./progress-ring.template.js"; 9 | 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | properties: { 18 | foregroundFill: neutralFillSubtle.rest 19 | }, 20 | }, 21 | { 22 | target : { 23 | part: ProgressRingAnatomy.parts.indicator, 24 | }, 25 | properties: { 26 | foregroundFill: accentFillReadable.rest 27 | }, 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | export { composeProgress } from "./progress.compose.js"; 2 | export { 3 | templateStyles as progressTemplateStyles, 4 | aestheticStyles as progressAestheticStyles, 5 | } from "./progress.styles.js"; 6 | export { 7 | styleModules as progressStyleModules, 8 | } from "./progress.styles.modules.js"; 9 | export { template as progressTemplate, ProgressAnatomy, ProgressConditions, ProgressParts } from "./progress.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress/progress.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeProgress } from "./progress.compose.js"; 3 | import { styleModules } from "./progress.styles.modules.js"; 4 | 5 | /** 6 | * The Progress custom element definition. Implements {@link @microsoft/fast-foundation#FASTProgress}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const progressDefinition = composeProgress( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/progress/progress.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | accentFillReadable, 6 | designUnit, 7 | neutralFillSubtle, 8 | } from "@adaptive-web/adaptive-ui/reference"; 9 | import { ProgressAnatomy } from "./progress.template.js"; 10 | 11 | /** 12 | * Visual styles composed by style rules. 13 | * 14 | * @public 15 | */ 16 | export const styleModules: StyleRules = [ 17 | { 18 | properties: { 19 | backgroundFill: neutralFillSubtle.rest, 20 | cornerRadius: designUnit, 21 | }, 22 | }, 23 | { 24 | target : { 25 | part: ProgressAnatomy.parts.indicator, 26 | }, 27 | properties: { 28 | backgroundFill: accentFillReadable.rest, 29 | cornerRadius: designUnit, 30 | }, 31 | }, 32 | ]; 33 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | export { composeRadioGroup } from "./radio-group.compose.js"; 2 | export { 3 | templateStyles as radioGroupTemplateStyles, 4 | aestheticStyles as radioGroupAestheticStyles, 5 | } from "./radio-group.styles.js"; 6 | export { 7 | styleModules as radioGroupStyleModules, 8 | } from "./radio-group.styles.modules.js"; 9 | export { template as radioGroupTemplate, RadioGroupAnatomy, RadioGroupConditions, RadioGroupParts } from "./radio-group.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio-group/radio-group.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeRadioGroup } from "./radio-group.compose.js"; 3 | import { styleModules } from "./radio-group.styles.modules.js"; 4 | 5 | /** 6 | * The Radio Group custom element definition. Implements {@link @microsoft/fast-foundation#FASTRadioGroup}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const radioGroupDefinition = composeRadioGroup( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio-group/radio-group.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { densityControl } from "@adaptive-web/adaptive-ui/reference"; 5 | import { RadioGroupAnatomy } from "./radio-group.template.js"; 6 | 7 | /** 8 | * Visual styles composed by style rules. 9 | * 10 | * @public 11 | */ 12 | export const styleModules: StyleRules = [ 13 | { 14 | properties: { 15 | gap: densityControl.verticalGap, 16 | }, 17 | }, 18 | { 19 | target : { 20 | part: RadioGroupAnatomy.parts.positioningRegion, 21 | }, 22 | properties: { 23 | gap: densityControl.verticalGap, 24 | }, 25 | }, 26 | ]; 27 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio-group/radio-group.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: flex-start; 12 | } 13 | 14 | .positioning-region { 15 | display: flex; 16 | flex-wrap: wrap; 17 | } 18 | 19 | :host([orientation="vertical"]) .positioning-region { 20 | flex-direction: column; 21 | } 22 | `; 23 | 24 | /** 25 | * Visual styles including Adaptive UI tokens. 26 | * @public 27 | */ 28 | export const aestheticStyles: ElementStyles = css` 29 | `; 30 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio/index.ts: -------------------------------------------------------------------------------- 1 | export { composeRadio } from "./radio.compose.js"; 2 | export { 3 | templateStyles as radioTemplateStyles, 4 | aestheticStyles as radioAestheticStyles, 5 | } from "./radio.styles.js"; 6 | export { 7 | styleModules as radioStyleModules, 8 | } from "./radio.styles.modules.js"; 9 | export { template as radioTemplate, RadioAnatomy, RadioConditions, RadioParts, RadioStatics } from "./radio.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/radio/radio.definition.ts: -------------------------------------------------------------------------------- 1 | import { radioIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeRadio } from "./radio.compose.js"; 4 | import { RadioStatics } from "./radio.template.js"; 5 | import { styleModules } from "./radio.styles.modules.js"; 6 | 7 | /** 8 | * The Radio custom element definition. Implements {@link @microsoft/fast-foundation#FASTRadio}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const radioDefinition = composeRadio( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [RadioStatics.checked]: radioIcon, 20 | }, 21 | styleModules, 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/search/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSearch } from "./search.compose.js"; 2 | export { 3 | templateStyles as searchTemplateStyles, 4 | aestheticStyles as searchAestheticStyles, 5 | } from "./search.styles.js"; 6 | export { 7 | styleModules as searchStyleModules, 8 | } from "./search.styles.modules.js"; 9 | export { template as searchTemplate, SearchAnatomy, SearchConditions, SearchParts } from "./search.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/search/search.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeSearch } from "./search.compose.js"; 3 | import { styleModules } from "./search.styles.modules.js"; 4 | 5 | /** 6 | * The Search Field custom element definition. Implements {@link @microsoft/fast-foundation#FASTSearch}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const searchDefinition = composeSearch( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/search/search.ts: -------------------------------------------------------------------------------- 1 | import { FASTSearch } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Search. Extends {@link @microsoft/fast-foundation#FASTSearch}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveSearch extends FASTSearch { 9 | public focus(options?: FocusOptions): void { 10 | this.control.focus(options); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/select/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSelect } from "./select.compose.js"; 2 | export { 3 | templateStyles as selectTemplateStyles, 4 | aestheticStyles as selectAestheticStyles, 5 | } from "./select.styles.js"; 6 | export { 7 | styleModules as selectStyleModules, 8 | } from "./select.styles.modules.js"; 9 | export { template as selectTemplate, SelectAnatomy, SelectConditions, SelectParts, SelectStatics } from "./select.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/select/select.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronDownIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeSelect } from "./select.compose.js"; 4 | import { SelectStatics } from "./select.template.js"; 5 | import { styleModules } from "./select.styles.modules.js"; 6 | 7 | /** 8 | * The select custom element definition. Implements {@link @microsoft/fast-foundation#FASTSelect}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const selectDefinition = composeSelect( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [SelectStatics.indicator]: chevronDownIcon, 20 | }, 21 | styleModules, 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSkeleton } from "./skeleton.compose.js"; 2 | export { 3 | templateStyles as skeletonTemplateStyles, 4 | aestheticStyles as skeletonAestheticStyles, 5 | } from "./skeleton.styles.js"; 6 | export { 7 | styleModules as skeletonStyleModules, 8 | } from "./skeleton.styles.modules.js"; 9 | export { template as skeletonTemplate, SkeletonAnatomy, SkeletonConditions, SkeletonParts } from "./skeleton.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/skeleton/skeleton.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeSkeleton } from "./skeleton.compose.js"; 3 | import { styleModules } from "./skeleton.styles.modules.js"; 4 | 5 | /** 6 | * The Skeleton custom element definition. Implements {@link @microsoft/fast-foundation#FASTSkeleton}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const skeletonDefinition = composeSkeleton( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/skeleton/skeleton.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { controlShapeStyles, neutralFillSubtleRest, roundShapeStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | import { SkeletonAnatomy } from "./skeleton.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | properties: { 13 | backgroundFill: neutralFillSubtleRest, 14 | }, 15 | }, 16 | { 17 | target : { 18 | contextCondition: SkeletonAnatomy.conditions.shape.rectangle, 19 | }, 20 | styles: controlShapeStyles, 21 | }, 22 | 23 | { 24 | target : { 25 | contextCondition: SkeletonAnatomy.conditions.shape.circle, 26 | }, 27 | styles: roundShapeStyles, 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/slider-label/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSliderLabel } from "./slider-label.compose.js"; 2 | export { 3 | templateStyles as sliderLabelTemplateStyles, 4 | aestheticStyles as sliderLabelAestheticStyles, 5 | } from "./slider-label.styles.js"; 6 | export { 7 | styleModules as sliderLabelStyleModules, 8 | } from "./slider-label.styles.modules.js"; 9 | export { template as sliderLabelTemplate, SliderLabelAnatomy, SliderLabelConditions, SliderLabelParts } from "./slider-label.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/slider-label/slider-label.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeSliderLabel } from "./slider-label.compose.js"; 3 | import { styleModules } from "./slider-label.styles.modules.js"; 4 | 5 | /** 6 | * The Slider Label custom element definition. Implements {@link "@microsoft/fast-foundation#FASTSliderLabel}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const sliderLabelDefinition = composeSliderLabel( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/slider-label/slider-label.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { css } from "@microsoft/fast-element"; 2 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 3 | import { designUnit, neutralStrokeSubtle, typeRampMinus1Styles } from "@adaptive-web/adaptive-ui/reference"; 4 | import { SliderLabelAnatomy } from "./slider-label.template.js"; 5 | 6 | /** 7 | * Visual styles composed by style rules. 8 | * 9 | * @public 10 | */ 11 | export const styleModules: StyleRules = [ 12 | { 13 | styles: typeRampMinus1Styles, 14 | }, 15 | { 16 | target : { 17 | part: SliderLabelAnatomy.parts.mark, 18 | }, 19 | properties: { 20 | backgroundFill: neutralStrokeSubtle.rest, 21 | height: css.partial`calc(${designUnit} *2)`, 22 | width: css.partial`calc(${designUnit} / 2)`, 23 | }, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSlider } from "./slider.compose.js"; 2 | export { 3 | templateStyles as sliderTemplateStyles, 4 | aestheticStyles as sliderAestheticStyles, 5 | } from "./slider.styles.js"; 6 | export { 7 | styleModules as sliderStyleModules, 8 | } from "./slider.styles.modules.js"; 9 | export { template as sliderTemplate, SliderAnatomy, SliderConditions, SliderParts } from "./slider.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/slider/slider.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeSlider } from "./slider.compose.js"; 3 | import { styleModules } from "./slider.styles.modules.js"; 4 | 5 | /** 6 | * The Slider custom element definition. Implements {@link @microsoft/fast-foundation#FASTSlider}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const sliderDefinition = composeSlider( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | export { composeSwitch } from "./switch.compose.js"; 2 | export { 3 | templateStyles as switchTemplateStyles, 4 | aestheticStyles as switchAestheticStyles, 5 | } from "./switch.styles.js"; 6 | export { 7 | styleModules as switchStyleModules, 8 | } from "./switch.styles.modules.js"; 9 | export { template as switchTemplate, SwitchAnatomy, SwitchConditions, SwitchParts } from "./switch.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/switch/switch.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeSwitch } from "./switch.compose.js"; 3 | import { styleModules } from "./switch.styles.modules.js"; 4 | 5 | /** 6 | * The Switch custom element definition. Implements {@link @microsoft/fast-foundation#FASTSwitch}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const switchDefinition = composeSwitch( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTabPanel } from "./tab-panel.compose.js"; 2 | export { 3 | templateStyles as tabPanelTemplateStyles, 4 | aestheticStyles as tabPanelAestheticStyles, 5 | } from "./tab-panel.styles.js"; 6 | export { 7 | styleModules as tabPanelStyleModules, 8 | } from "./tab-panel.styles.modules.js"; 9 | export { template as tabPanelTemplate, TabPanelAnatomy,TabPanelConditions, TabPanelParts } from "./tab-panel.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/tab-panel.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTabPanel } from "./tab-panel.compose.js"; 3 | import { styleModules } from "./tab-panel.styles.modules.js"; 4 | 5 | /** 6 | * The Tab Panel custom element definition. Implements {@link @microsoft/fast-foundation#FASTTabPanel}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const tabPanelDefinition = composeTabPanel( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/tab-panel.stories.ts: -------------------------------------------------------------------------------- 1 | import { html } from "@microsoft/fast-element"; 2 | import type { FASTTabPanel } from "@microsoft/fast-foundation"; 3 | import { renderComponent } from "../../utilities/storybook-helpers.js"; 4 | import type { Meta, Story, StoryArgs } from "../../utilities/storybook-helpers.js"; 5 | 6 | export const storyTemplate = html>` 7 | 8 | ${(x) => x.storyContent} 9 | 10 | `; 11 | 12 | export default { 13 | title: "Components/Tabs/Tab Panel", 14 | excludeStories: ["storyTemplate"], 15 | args: { 16 | storyContent: "Tab panel", 17 | }, 18 | argTypes: { 19 | storyContent: { table: { disable: true } }, 20 | }, 21 | } as Meta; 22 | 23 | export const TabPanel: Story = renderComponent(storyTemplate).bind({}); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/tab-panel.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | controlDensityStyles, 6 | plainTextStyles 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | 9 | /** 10 | * Visual styles composed by style rules. 11 | * 12 | * @public 13 | */ 14 | export const styleModules: StyleRules = [ 15 | { 16 | styles: [ 17 | plainTextStyles, 18 | controlDensityStyles, 19 | ], 20 | }, 21 | ]; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/tab-panel.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: block; 10 | } 11 | `; 12 | 13 | /** 14 | * Visual styles including Adaptive UI tokens. 15 | * @public 16 | */ 17 | export const aestheticStyles: ElementStyles = css` 18 | `; 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab-panel/tab-panel.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTTabPanel, tabPanelTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const TabPanelConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const TabPanelParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const TabPanelAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: TabPanelConditions, 24 | parts: TabPanelParts, 25 | }; 26 | 27 | /** 28 | * Default Tab Panel template, {@link @microsoft/fast-foundation#tabPanelTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | tabPanelTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTab } from "./tab.compose.js"; 2 | export { 3 | templateStyles as tabTemplateStyles, 4 | aestheticStyles as tabAestheticStyles, 5 | } from "./tab.styles.js"; 6 | export { 7 | styleModules as tabStyleModules, 8 | } from "./tab.styles.modules.js"; 9 | export { template as tabTemplate, TabAnatomy, TabConditions, TabParts } from "./tab.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/tab.compose.ts: -------------------------------------------------------------------------------- 1 | import { FASTTab } from "@microsoft/fast-foundation"; 2 | import type { FASTElementDefinition } from '@microsoft/fast-element'; 3 | import { ComposeOptions, DesignSystem } from "../../design-system.js"; 4 | import { componentBaseStyles } from "../../styles/styles.js"; 5 | import { aestheticStyles, templateStyles } from "./tab.styles.js"; 6 | import { TabAnatomy, template } from "./tab.template.js"; 7 | 8 | const defaultStyles = [componentBaseStyles, templateStyles, aestheticStyles]; 9 | 10 | /** 11 | * @public 12 | */ 13 | export function composeTab( 14 | ds: DesignSystem, 15 | options?: ComposeOptions 16 | ): FASTElementDefinition { 17 | const styles = DesignSystem.assembleStyles(defaultStyles, TabAnatomy, options); 18 | 19 | return FASTTab.compose({ 20 | name: `${ds.prefix}-tab`, 21 | template: options?.template?.(ds) ?? template(ds), 22 | styles, 23 | registry: ds.registry, 24 | elementOptions: options?.elementOptions, 25 | shadowOptions: options?.shadowOptions 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/tab.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTab } from "./tab.compose.js"; 3 | import { styleModules } from "./tab.styles.modules.js"; 4 | 5 | /** 6 | * The Tab custom element definition. Implements {@link @microsoft/fast-foundation#FASTTab}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const tabDefinition = composeTab( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/tab.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { itemStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | styles: itemStyles, 12 | }, 13 | ]; 14 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/tab.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | align-items: center; 11 | justify-content: center; 12 | grid-row: 1; 13 | cursor: pointer; 14 | } 15 | 16 | :host([aria-selected="true"]) { 17 | z-index: 2; 18 | } 19 | `; 20 | 21 | /** 22 | * Visual styles including Adaptive UI tokens. 23 | * @public 24 | */ 25 | export const aestheticStyles: ElementStyles = css` 26 | `; 27 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tab/tab.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTTab, tabTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Focus, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const TabConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const TabParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const TabAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.disabledAttribute, 23 | conditions: TabConditions, 24 | parts: TabParts, 25 | focus: Focus.contextFocused(), 26 | }; 27 | 28 | /** 29 | * Default Tab template, {@link @microsoft/fast-foundation#tabTemplate}. 30 | * @public 31 | */ 32 | export const template: (ds: DesignSystem) => ElementViewTemplate = 33 | (ds: DesignSystem) => 34 | tabTemplate(); 35 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTabs } from "./tabs.compose.js"; 2 | export { 3 | templateStyles as tabsTemplateStyles, 4 | aestheticStyles as tabsAestheticStyles, 5 | } from "./tabs.styles.js"; 6 | export { 7 | styleModules as tabsStyleModules, 8 | } from "./tabs.styles.modules.js"; 9 | export { template as tabsTemplate, TabsAnatomy, TabsConditions, TabsParts } from "./tabs.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tabs/tabs.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTabs } from "./tabs.compose.js"; 3 | import { styleModules } from "./tabs.styles.modules.js"; 4 | 5 | /** 6 | * The Tabs custom element definition. Implements {@link @microsoft/fast-foundation#FASTTabs}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const tabsDefinition = composeTabs( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tabs/tabs.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { plainTextStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | 4 | /** 5 | * Visual styles composed by style rules. 6 | * 7 | * @public 8 | */ 9 | export const styleModules: StyleRules = [ 10 | { 11 | styles: plainTextStyles, 12 | }, 13 | ]; 14 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-area/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTextArea } from "./text-area.compose.js"; 2 | export { 3 | templateStyles as textAreaTemplateStyles, 4 | aestheticStyles as textAreaAestheticStyles, 5 | } from "./text-area.styles.js"; 6 | export { 7 | styleModules as textAreaStyleModules, 8 | } from "./text-area.styles.modules.js"; 9 | export { template as textAreaTemplate, TextAreaAnatomy, TextAreaConditions, TextAreaParts } from "./text-area.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-area/text-area.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTextArea } from "./text-area.compose.js"; 3 | import { styleModules } from "./text-area.styles.modules.js"; 4 | 5 | /** 6 | * The Text Area custom element definition. Implements {@link @microsoft/fast-foundation#FASTTextArea}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const textAreaDefinition = composeTextArea( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-area/text-area.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { 3 | densityControl, 4 | inputStyles, 5 | labelTextStyles, 6 | typeRampBaseStyles 7 | } from "@adaptive-web/adaptive-ui/reference"; 8 | import { TextAreaAnatomy } from "./text-area.template.js"; 9 | 10 | /** 11 | * Visual styles composed by style rules. 12 | * 13 | * @public 14 | */ 15 | export const styleModules: StyleRules = [ 16 | { 17 | styles: typeRampBaseStyles, 18 | properties: { 19 | gap: densityControl.verticalGap, 20 | }, 21 | }, 22 | { 23 | target : { 24 | part: TextAreaAnatomy.parts.label, 25 | }, 26 | styles: labelTextStyles, 27 | }, 28 | { 29 | target : { 30 | part: TextAreaAnatomy.parts.control, 31 | }, 32 | styles: inputStyles, 33 | }, 34 | ]; 35 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-area/text-area.ts: -------------------------------------------------------------------------------- 1 | import { FASTTextArea } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Text Area. Extends {@link @microsoft/fast-foundation#FASTTextArea}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveTextArea extends FASTTextArea { 9 | public focus(options?: FocusOptions): void { 10 | this.control.focus(options); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-field/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTextField } from "./text-field.compose.js"; 2 | export { 3 | templateStyles as textFieldTemplateStyles, 4 | aestheticStyles as textFieldAestheticStyles, 5 | } from "./text-field.styles.js"; 6 | export { 7 | styleModules as textFieldStyleModules, 8 | } from "./text-field.styles.modules.js"; 9 | export { template as textFieldTemplate, TextFieldAnatomy, TextFieldConditions, TextFieldParts } from "./text-field.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-field/text-field.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTextField } from "./text-field.compose.js"; 3 | import { styleModules } from "./text-field.styles.modules.js"; 4 | 5 | /** 6 | * The Text Field custom element definition. Implements {@link @microsoft/fast-foundation#FASTTextField}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const textFieldDefinition = composeTextField( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/text-field/text-field.ts: -------------------------------------------------------------------------------- 1 | import { FASTTextField } from "@microsoft/fast-foundation"; 2 | 3 | /** 4 | * The Adaptive version of Text field. Extends {@link @microsoft/fast-foundation#FASTTextField}. 5 | * 6 | * @public 7 | */ 8 | export class AdaptiveTextField extends FASTTextField { 9 | public focus(options?: FocusOptions): void { 10 | this.control.focus(options); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/toolbar/index.ts: -------------------------------------------------------------------------------- 1 | export { composeToolbar } from "./toolbar.compose.js"; 2 | export { 3 | templateStyles as toolbarTemplateStyles, 4 | aestheticStyles as toolbarAestheticStyles, 5 | } from "./toolbar.styles.js"; 6 | export { 7 | styleModules as toolbarStyleModules, 8 | } from "./toolbar.styles.modules.js"; 9 | export { template as toolbarTemplate, ToolbarAnatomy, ToolbarConditions, ToolbarParts } from "./toolbar.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/toolbar/toolbar.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeToolbar } from "./toolbar.compose.js"; 3 | import { styleModules } from "./toolbar.styles.modules.js"; 4 | 5 | /** 6 | * The Toolbar custom element definition. Implements {@link @microsoft/fast-foundation#FASTToolbar}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const toolbarDefinition = composeToolbar( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | shadowOptions: { 18 | delegatesFocus: true 19 | } 20 | } 21 | ); 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/toolbar/toolbar.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { densityControl, neutralStrokeStrong } from "@adaptive-web/adaptive-ui/reference"; 3 | import { ToolbarAnatomy } from "./toolbar.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | properties: { 13 | foregroundFill: neutralStrokeStrong, 14 | gap: densityControl.horizontalGap, 15 | }, 16 | }, 17 | { 18 | target : { 19 | part: ToolbarAnatomy.parts.positioningRegion, 20 | }, 21 | properties: { 22 | gap: densityControl.horizontalGap, 23 | }, 24 | }, 25 | ]; 26 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/toolbar/toolbar.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: inline-flex; 10 | align-items: center; 11 | } 12 | 13 | :host([orientation="vertical"]) { 14 | flex-direction: column; 15 | } 16 | 17 | .positioning-region { 18 | display: flex; 19 | flex-grow: 1; 20 | flex-wrap: wrap; 21 | align-items: center; 22 | justify-content: flex-start; 23 | } 24 | 25 | :host([orientation="vertical"]) .positioning-region { 26 | flex-direction: column; 27 | align-items: start; 28 | } 29 | 30 | ::slotted([slot="start"]), 31 | ::slotted([slot="end"]) { 32 | display: flex; 33 | } 34 | `; 35 | 36 | /** 37 | * Visual styles including Adaptive UI tokens. 38 | * @public 39 | */ 40 | export const aestheticStyles: ElementStyles = css` 41 | `; 42 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTooltip } from "./tooltip.compose.js"; 2 | export { 3 | templateStyles as tooltipTemplateStyles, 4 | aestheticStyles as tooltipAestheticStyles, 5 | } from "./tooltip.styles.js"; 6 | export { 7 | styleModules as tooltipStyleModules, 8 | } from "./tooltip.styles.modules.js"; 9 | export { template as tooltipTemplate, TooltipAnatomy, TooltipConditions, TooltipParts } from "./tooltip.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tooltip/tooltip.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTooltip } from "./tooltip.compose.js"; 3 | import { styleModules } from "./tooltip.styles.modules.js"; 4 | 5 | /** 6 | * The Tooltip custom element definition. Implements {@link @microsoft/fast-foundation#FASTTooltip}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const tooltipDefinition = composeTooltip( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tooltip/tooltip.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | import { 5 | controlDensityStyles, 6 | controlShapeStyles, 7 | neutralFillSubtle, 8 | plainTextStyles, 9 | shadowTooltipStyles 10 | } from "@adaptive-web/adaptive-ui/reference"; 11 | 12 | /** 13 | * Visual styles composed by style rules. 14 | * 15 | * @public 16 | */ 17 | export const styleModules: StyleRules = [ 18 | { 19 | styles: [ 20 | controlShapeStyles, 21 | controlDensityStyles, 22 | plainTextStyles, 23 | shadowTooltipStyles, 24 | ], 25 | properties: { 26 | backgroundFill: neutralFillSubtle.rest, 27 | }, 28 | }, 29 | ]; 30 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tooltip/tooltip.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | height: fit-content; 10 | width: fit-content; 11 | white-space: nowrap; 12 | visibility: hidden; 13 | } 14 | 15 | :host([visible]) { 16 | visibility: visible; 17 | } 18 | `; 19 | 20 | /** 21 | * Visual styles including Adaptive UI tokens. 22 | * @public 23 | */ 24 | export const aestheticStyles: ElementStyles = css` 25 | :host([visible]) { 26 | transition: visibility 0s 0s linear, opacity 50ms 0.5s linear; 27 | opacity: 1; 28 | } 29 | 30 | :host(:not([visible])) { 31 | transition: visibility 0s 0.5s, opacity 50ms linear; 32 | opacity: 0; 33 | } 34 | 35 | :host([show="true"][visible]) { 36 | transition: none; 37 | } 38 | `; 39 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tooltip/tooltip.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTTooltip, tooltipTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const TooltipConditions = { 10 | show: "[show='true']", 11 | visible: "[visible]", 12 | }; 13 | 14 | /** 15 | * @public 16 | */ 17 | export const TooltipParts = { 18 | }; 19 | 20 | /** 21 | * @public 22 | */ 23 | export const TooltipAnatomy: ComponentAnatomy = { 24 | interactivity: Interactivity.never, 25 | conditions: TooltipConditions, 26 | parts: TooltipParts, 27 | }; 28 | 29 | /** 30 | * Default Tooltip template, {@link @microsoft/fast-foundation#tooltipTemplate}. 31 | * @public 32 | */ 33 | export const template: (ds: DesignSystem) => ElementViewTemplate = 34 | (ds: DesignSystem) => 35 | tooltipTemplate(); 36 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-item/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTreeItem } from "./tree-item.compose.js"; 2 | export { 3 | templateStyles as treeItemTemplateStyles, 4 | aestheticStyles as treeItemAestheticStyles, 5 | } from "./tree-item.styles.js"; 6 | export { 7 | styleModules as treeItemStyleModules, 8 | } from "./tree-item.styles.modules.js"; 9 | export { template as treeItemTemplate, TreeItemAnatomy, TreeItemConditions, TreeItemParts, TreeItemStatics } from "./tree-item.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-item/tree-item.definition.ts: -------------------------------------------------------------------------------- 1 | import { chevronRightIcon } from "../../assets.js"; 2 | import { DefaultDesignSystem } from "../../design-system.js"; 3 | import { composeTreeItem } from "./tree-item.compose.js"; 4 | import { TreeItemStatics } from "./tree-item.template.js"; 5 | import { styleModules } from "./tree-item.styles.modules.js"; 6 | 7 | /** 8 | * The tree item custom element definition. Implements {@link @microsoft/fast-foundation#FASTTreeItem}. 9 | * 10 | * @remarks 11 | * HTML Element: \ 12 | * 13 | * @public 14 | */ 15 | export const treeItemDefinition = composeTreeItem( 16 | DefaultDesignSystem, 17 | { 18 | statics: { 19 | [TreeItemStatics.expandCollapse]: chevronRightIcon, 20 | }, 21 | styleModules, 22 | } 23 | ); 24 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-item/tree-item.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { StyleRules } from "@adaptive-web/adaptive-ui"; 2 | import { itemStyles } from "@adaptive-web/adaptive-ui/reference"; 3 | import { TreeItemAnatomy } from "./tree-item.template.js"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | { 12 | target : { 13 | part: TreeItemAnatomy.parts.control, 14 | }, 15 | styles: itemStyles, 16 | }, 17 | ]; 18 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-view/index.ts: -------------------------------------------------------------------------------- 1 | export { composeTreeView } from "./tree-view.compose.js"; 2 | export { 3 | templateStyles as treeViewTemplateStyles, 4 | aestheticStyles as treeViewAestheticStyles, 5 | } from "./tree-view.styles.js"; 6 | export { 7 | styleModules as treeViewStyleModules, 8 | } from "./tree-view.styles.modules.js"; 9 | export { template as treeViewTemplate, TreeViewAnatomy, TreeViewConditions, TreeViewParts } from "./tree-view.template.js"; 10 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-view/tree-view.definition.ts: -------------------------------------------------------------------------------- 1 | import { DefaultDesignSystem } from "../../design-system.js"; 2 | import { composeTreeView } from "./tree-view.compose.js"; 3 | import { styleModules } from "./tree-view.styles.modules.js"; 4 | 5 | /** 6 | * The tree view custom element definition. Implements {@link @microsoft/fast-foundation#FASTTreeView}. 7 | * 8 | * @remarks 9 | * HTML Element: \ 10 | * 11 | * @public 12 | */ 13 | export const treeViewDefinition = composeTreeView( 14 | DefaultDesignSystem, 15 | { 16 | styleModules, 17 | } 18 | ); 19 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-view/tree-view.styles.modules.ts: -------------------------------------------------------------------------------- 1 | import { 2 | StyleRules, 3 | } from "@adaptive-web/adaptive-ui"; 4 | 5 | /** 6 | * Visual styles composed by style rules. 7 | * 8 | * @public 9 | */ 10 | export const styleModules: StyleRules = [ 11 | ]; 12 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-view/tree-view.styles.ts: -------------------------------------------------------------------------------- 1 | import { css, ElementStyles } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * Basic layout styling associated with the anatomy of the template. 5 | * @public 6 | */ 7 | export const templateStyles: ElementStyles = css` 8 | :host { 9 | display: flex; 10 | flex-direction: column; 11 | min-width: fit-content; 12 | } 13 | `; 14 | 15 | /** 16 | * Visual styles including Adaptive UI tokens. 17 | * @public 18 | */ 19 | export const aestheticStyles: ElementStyles = css``; 20 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/components/tree-view/tree-view.template.ts: -------------------------------------------------------------------------------- 1 | import { ElementViewTemplate } from "@microsoft/fast-element"; 2 | import { FASTTreeView, treeViewTemplate } from "@microsoft/fast-foundation"; 3 | import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui"; 4 | import { DesignSystem } from "../../design-system.js"; 5 | 6 | /** 7 | * @public 8 | */ 9 | export const TreeViewConditions = { 10 | }; 11 | 12 | /** 13 | * @public 14 | */ 15 | export const TreeViewParts = { 16 | }; 17 | 18 | /** 19 | * @public 20 | */ 21 | export const TreeViewAnatomy: ComponentAnatomy = { 22 | interactivity: Interactivity.never, 23 | conditions: TreeViewConditions, 24 | parts: TreeViewParts, 25 | }; 26 | 27 | /** 28 | * Default Tree View template, {@link @microsoft/fast-foundation#treeViewTemplate}. 29 | * @public 30 | */ 31 | export const template: (ds: DesignSystem) => ElementViewTemplate = 32 | (ds: DesignSystem) => 33 | treeViewTemplate(); 34 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/gobal.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" { 2 | const content: any; 3 | export default content; 4 | } -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/index.bundle.ts: -------------------------------------------------------------------------------- 1 | import type { FASTElementDefinition } from '@microsoft/fast-element'; 2 | import { DesignToken } from '@microsoft/fast-foundation'; 3 | import type { DesignSystem } from './design-system.js'; 4 | import { AllComponents } from './custom-elements.js'; 5 | import { DefaultDesignSystem } from './design-system.js'; 6 | 7 | declare global { 8 | // eslint-disable-next-line no-var 9 | var AWC: any; 10 | } 11 | 12 | interface AWC { 13 | designSystem: DesignSystem; 14 | allComponents: Record FASTElementDefinition) | FASTElementDefinition>; 15 | } 16 | 17 | const AWC: AWC = { 18 | designSystem: DefaultDesignSystem, 19 | allComponents: AllComponents, 20 | } 21 | 22 | if (globalThis.AWC === void 0) { 23 | Reflect.defineProperty(globalThis, "AWC", { 24 | value: Object.create(AWC), 25 | configurable: false, 26 | enumerable: false, 27 | writable: false 28 | }); 29 | } 30 | 31 | (() => { 32 | DesignToken.registerDefaultStyleTarget(); 33 | AWC.designSystem.defineComponents(AWC.allComponents); 34 | })(); -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | DesignSystem, 3 | DefaultDesignSystem as AdaptiveDesignSystem, 4 | } from "./design-system.js"; 5 | export * from "./components/index.js"; 6 | export * from "./styles/index.js"; 7 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/styles/index.ts: -------------------------------------------------------------------------------- 1 | import { css, CSSDirective } from "@microsoft/fast-element"; 2 | 3 | /** 4 | * @internal 5 | * @deprecated Replaced with Adaptive UI density system 6 | */ 7 | export const baseHeightMultiplier: CSSDirective = css.partial`8`; 8 | 9 | /** 10 | * @internal 11 | * @deprecated Replaced with Adaptive UI density system 12 | */ 13 | export const density: CSSDirective = css.partial`0`; 14 | 15 | /** 16 | * @internal 17 | * @deprecated Replaced with Adaptive UI density system 18 | */ 19 | export const heightNumber: CSSDirective = css.partial`32`; 20 | 21 | export * from "./styles.js"; 22 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/src/styles/styles.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Recommended base styles for a component. 3 | * 4 | * @public 5 | * @remarks 6 | * Adds support for `[hidden]` custom elements. 7 | */ 8 | export const componentBaseStyles = /* css */` 9 | :host([hidden]) { 10 | display: none !important; 11 | } 12 | 13 | :host { 14 | box-sizing: border-box; 15 | } 16 | 17 | *, *:before, *:after { 18 | box-sizing: inherit; 19 | } 20 | `; 21 | 22 | /** 23 | * Styles for default svg icons. 24 | * 25 | * @public 26 | * @remarks 27 | * Temporary rule to be migrated to style modules structure. 28 | */ 29 | export const svgIconStyles = /* css */` 30 | .stroked { 31 | stroke: currentcolor; 32 | stroke-linecap: round; 33 | stroke-linejoin: round; 34 | stroke-width: 1px; 35 | } 36 | `; 37 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["**/*.stories.ts", "**/*.spec.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/adaptive-web-components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "importHelpers": true, 5 | "lib": ["DOM"], 6 | "declarationDir": "dist/dts", 7 | "outDir": "dist/esm" 8 | }, 9 | "include": ["./src"] 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "emitDecoratorMetadata": true, 5 | "esModuleInterop": true, 6 | "experimentalDecorators": true, 7 | "useDefineForClassFields": false, 8 | "module": "NodeNext", 9 | "moduleResolution": "NodeNext", 10 | "noImplicitAny": true, 11 | "resolveJsonModule": true, 12 | "sourceMap": true, 13 | "strictNullChecks": true, 14 | "strict": true, 15 | "target": "ES2020", 16 | "types": ["node"] 17 | } 18 | } 19 | --------------------------------------------------------------------------------