├── .changeset ├── README.md ├── afraid-houses-trade.md ├── angry-baths-leave.md ├── changelog-format.js ├── config.json ├── forty-houses-shout.md ├── fresh-swans-yell.md ├── fruity-singers-switch.md ├── full-lands-bathe.md ├── huge-planes-melt.md ├── huge-taxis-say.md ├── itchy-roses-obey.md ├── light-crews-clap.md ├── light-eyes-report.md ├── long-parrots-invent.md ├── lucky-moons-glow.md ├── lucky-tires-wait.md ├── many-walls-hear.md ├── moody-islands-call.md ├── ninety-donkeys-sniff.md ├── old-ears-return.md ├── orange-ducks-rhyme.md ├── puny-planets-sort.md ├── purple-pets-fix.md ├── rare-trees-love.md ├── sad-results-give.md ├── sixty-cobras-invite.md ├── some-forks-shop.md ├── strong-pets-dance.md ├── swift-pandas-repeat.md ├── tidy-tigers-bow.md ├── tough-webs-give.md ├── twenty-hands-say.md └── warm-pillows-change.md ├── .editorconfig ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── 1-bug_report.yaml │ ├── 2-documentation.yml │ ├── 3-feature_request.yaml │ ├── 4-figma.yaml │ ├── 5-new_component.yaml │ ├── 6-general.yaml │ └── config.yml ├── copilot-instructions.md └── workflows │ ├── chromatic.yml │ ├── ci.yml │ ├── release.yml │ ├── storybook.yml │ └── website.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .lintstagedrc.mjs ├── .prettierrc.cjs ├── .storybook ├── images │ ├── avatar-1.jpg │ ├── avatar-2.jpg │ └── avatar-3.jpg ├── main.ts ├── manager.ts ├── preview-body.html ├── preview-head.html ├── preview.ts ├── sl-theme.ts ├── stories │ ├── form.stories.ts │ └── links.stories.ts ├── themes.ts ├── utils.ts └── welcome.mdx ├── .stylelintrc.mjs ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── .yarn └── releases │ └── yarn-4.9.1.cjs ├── .yarnrc.yml ├── CODEOWNERS ├── CONTRIBUTING.md ├── GETTING_STARTED.md ├── LICENSE ├── README.md ├── RELEASE_NOTES.md ├── cem-angular-wrapper.config.mjs ├── chromatic ├── .eslintrc.cjs ├── .storybook │ ├── main.ts │ ├── manager.ts │ ├── modes.ts │ ├── preview-head.html │ ├── preview.ts │ └── stories │ │ └── all.stories.ts ├── README.md ├── package.json └── tsconfig.json ├── eslint.config.mjs ├── examples └── lit │ ├── index.ts │ ├── package.json │ ├── src │ ├── composite-form │ │ ├── composite-form.scss │ │ └── composite-form.ts │ ├── dynamic-array-form │ │ └── dynamic-array-form.ts │ ├── form-in-dialog │ │ ├── form-in-dialog.scss │ │ └── form-in-dialog.ts │ └── nested-form │ │ ├── child-form.scss │ │ ├── child-form.ts │ │ ├── nested-form.scss │ │ └── nested-form.ts │ └── tsconfig.json ├── lit-localize.json ├── package.json ├── packages ├── angular │ ├── .editorconfig │ ├── .gitignore │ ├── .storybook │ │ ├── main.ts │ │ ├── manager.ts │ │ ├── preview-head.html │ │ ├── preview.ts │ │ └── tsconfig.json │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── CHANGELOG.md │ ├── README.md │ ├── angular.json │ ├── package.json │ ├── src │ │ ├── ce-passthrough.ts │ │ ├── forms │ │ │ ├── checkbox-group.directive.ts │ │ │ ├── checkbox.directive.ts │ │ │ ├── form-control-element.directive.ts │ │ │ ├── ng-package.json │ │ │ ├── public-api.ts │ │ │ ├── radio-group.directive.ts │ │ │ ├── select.directive.ts │ │ │ ├── switch.directive.ts │ │ │ ├── text-area.directive.ts │ │ │ └── text-field.directive.ts │ │ ├── index.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── public-api.ts │ │ └── tooltip.directive.ts │ ├── stories │ │ ├── accordion.stories.ts │ │ ├── forms.stories.ts │ │ ├── routing.stories.ts │ │ ├── tooltip.stories.ts │ │ └── wrappers.stories.ts │ ├── sync-versions.js │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── checklist │ ├── .gitignore │ ├── CHANGELOG.md │ ├── eslint.config.mjs │ ├── index.ts │ ├── package.json │ ├── src │ │ ├── checklist.scss │ │ ├── checklist.stories.ts │ │ ├── checklist.ts │ │ ├── sanoma-learning-theme.scss │ │ ├── sanoma-learning-theme.scss.ts │ │ └── the-message-font-face.ts │ ├── stylelint.config.mjs │ ├── test.html │ └── tsconfig.json ├── components │ ├── accordion │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── accordion-item.scss │ │ │ ├── accordion-item.spec.ts │ │ │ ├── accordion-item.ts │ │ │ ├── accordion.scss │ │ │ ├── accordion.spec.ts │ │ │ ├── accordion.stories.ts │ │ │ └── accordion.ts │ │ └── tsconfig.json │ ├── announcer │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── announce.ts │ │ │ ├── announcer.scss │ │ │ ├── announcer.spec.ts │ │ │ ├── announcer.stories.ts │ │ │ └── announcer.ts │ │ └── tsconfig.json │ ├── avatar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── avatar.scss │ │ │ ├── avatar.spec.ts │ │ │ ├── avatar.stories.ts │ │ │ └── avatar.ts │ │ └── tsconfig.json │ ├── badge │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── badge.scss │ │ │ ├── badge.spec.ts │ │ │ ├── badge.stories.ts │ │ │ └── badge.ts │ │ └── tsconfig.json │ ├── breadcrumbs │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── breadcrumbs.scss │ │ │ ├── breadcrumbs.spec.ts │ │ │ ├── breadcrumbs.stories.ts │ │ │ └── breadcrumbs.ts │ │ └── tsconfig.json │ ├── button-bar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── button-bar.scss │ │ │ ├── button-bar.spec.ts │ │ │ ├── button-bar.stories.ts │ │ │ └── button-bar.ts │ │ └── tsconfig.json │ ├── button │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── button.scss │ │ │ ├── button.spec.ts │ │ │ ├── button.stories.ts │ │ │ └── button.ts │ │ └── tsconfig.json │ ├── calendar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── calendar.scss │ │ │ ├── calendar.stories.ts │ │ │ ├── calendar.ts │ │ │ ├── month-view.scss │ │ │ ├── month-view.stories.ts │ │ │ ├── month-view.ts │ │ │ ├── select-day.scss │ │ │ ├── select-day.ts │ │ │ ├── select-month.scss │ │ │ ├── select-month.ts │ │ │ ├── select-year.scss │ │ │ ├── select-year.ts │ │ │ └── utils.ts │ │ └── tsconfig.json │ ├── card │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── card.scss │ │ │ ├── card.spec.ts │ │ │ ├── card.stories.ts │ │ │ └── card.ts │ │ └── tsconfig.json │ ├── checkbox │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── checkbox-group.scss │ │ │ ├── checkbox-group.spec.ts │ │ │ ├── checkbox-group.stories.ts │ │ │ ├── checkbox-group.ts │ │ │ ├── checkbox.scss │ │ │ ├── checkbox.spec.ts │ │ │ ├── checkbox.stories.ts │ │ │ └── checkbox.ts │ │ └── tsconfig.json │ ├── combobox │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── combobox.scss │ │ │ ├── combobox.spec.ts │ │ │ ├── combobox.stories.ts │ │ │ ├── combobox.ts │ │ │ ├── create-custom-option.scss │ │ │ ├── create-custom-option.ts │ │ │ ├── custom-option.scss │ │ │ ├── custom-option.ts │ │ │ ├── grouped-option.scss │ │ │ ├── grouped-option.ts │ │ │ ├── multiple.stories.ts │ │ │ ├── no-match.scss │ │ │ ├── no-match.ts │ │ │ ├── selected-group.scss │ │ │ ├── selected-group.ts │ │ │ └── single.stories.ts │ │ └── tsconfig.json │ ├── data-source │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── array-list-data-source.spec.ts │ │ │ ├── array-list-data-source.ts │ │ │ ├── data-source.ts │ │ │ ├── fetch-list-data-source.spec.ts │ │ │ ├── fetch-list-data-source.ts │ │ │ ├── list-data-source.spec.ts │ │ │ └── list-data-source.ts │ │ └── tsconfig.json │ ├── date-field │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── date-field.scss │ │ │ ├── date-field.stories.ts │ │ │ └── date-field.ts │ │ └── tsconfig.json │ ├── dialog │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── dialog.scss │ │ │ ├── dialog.spec.ts │ │ │ ├── dialog.stories.ts │ │ │ └── dialog.ts │ │ └── tsconfig.json │ ├── drawer │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── drawer.scss │ │ │ ├── drawer.spec.ts │ │ │ ├── drawer.stories.ts │ │ │ └── drawer.ts │ │ └── tsconfig.json │ ├── editor │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── commands.ts │ │ │ ├── editor.scss │ │ │ ├── editor.stories.ts │ │ │ ├── editor.ts │ │ │ ├── keymap.ts │ │ │ ├── list-utils.ts │ │ │ ├── schema.ts │ │ │ └── utils.ts │ │ └── tsconfig.json │ ├── ellipsize-text │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── ellipsize-text.scss │ │ │ ├── ellipsize-text.spec.ts │ │ │ ├── ellipsize-text.stories.ts │ │ │ └── ellipsize-text.ts │ │ └── tsconfig.json │ ├── emoji │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── emoji-browser.scss │ │ │ ├── emoji-browser.stories.ts │ │ │ ├── emoji-browser.ts │ │ │ └── emoji-service.ts │ │ └── tsconfig.json │ ├── eslint.config.mjs │ ├── form │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── error.scss │ │ │ ├── error.spec.ts │ │ │ ├── error.ts │ │ │ ├── form-control-mixin.ts │ │ │ ├── form-controller.ts │ │ │ ├── form-field.scss │ │ │ ├── form-field.spec.ts │ │ │ ├── form-field.stories.ts │ │ │ ├── form-field.ts │ │ │ ├── form-validation-errors.scss │ │ │ ├── form-validation-errors.spec.ts │ │ │ ├── form-validation-errors.ts │ │ │ ├── form.scss │ │ │ ├── form.spec.ts │ │ │ ├── form.stories.ts │ │ │ ├── form.ts │ │ │ ├── hint.scss │ │ │ ├── hint.spec.ts │ │ │ ├── hint.ts │ │ │ ├── label.scss │ │ │ ├── label.spec.ts │ │ │ └── label.ts │ │ └── tsconfig.json │ ├── format-date │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── format-date.spec.ts │ │ │ ├── format-date.stories.ts │ │ │ ├── format-date.ts │ │ │ └── format.ts │ │ └── tsconfig.json │ ├── format-number │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── format-number.spec.ts │ │ │ ├── format-number.stories.ts │ │ │ ├── format-number.ts │ │ │ └── format.ts │ │ └── tsconfig.json │ ├── grid │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── column-group.spec.ts │ │ │ ├── column-group.ts │ │ │ ├── column.spec.ts │ │ │ ├── column.ts │ │ │ ├── drag-handle-column.spec.ts │ │ │ ├── drag-handle-column.ts │ │ │ ├── filter-column.spec.ts │ │ │ ├── filter-column.ts │ │ │ ├── filter.scss │ │ │ ├── filter.spec.ts │ │ │ ├── filter.ts │ │ │ ├── grid.scss │ │ │ ├── grid.spec.ts │ │ │ ├── grid.ts │ │ │ ├── group-header.scss │ │ │ ├── group-header.ts │ │ │ ├── select-column.ts │ │ │ ├── selection-column.ts │ │ │ ├── sort-column.spec.ts │ │ │ ├── sort-column.ts │ │ │ ├── sorter.scss │ │ │ ├── sorter.spec.ts │ │ │ ├── sorter.ts │ │ │ ├── stories │ │ │ │ ├── basics.stories.ts │ │ │ │ ├── drag-and-drop.stories.ts │ │ │ │ ├── editing.stories.ts │ │ │ │ ├── filtering.stories.ts │ │ │ │ ├── grouping.stories.ts │ │ │ │ ├── pagination.stories.ts │ │ │ │ ├── scrolling.stories.ts │ │ │ │ ├── selection.stories.ts │ │ │ │ ├── sorting.stories.ts │ │ │ │ ├── story-utils.ts │ │ │ │ └── styling.stories.ts │ │ │ ├── text-field-column.ts │ │ │ ├── utils.ts │ │ │ └── view-model.ts │ │ └── tsconfig.json │ ├── icon │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── icon.scss │ │ │ ├── icon.spec.ts │ │ │ ├── icon.stories.ts │ │ │ ├── icon.ts │ │ │ └── models.ts │ │ └── tsconfig.json │ ├── inline-message │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── inline-message.scss │ │ │ ├── inline-message.spec.ts │ │ │ ├── inline-message.stories.ts │ │ │ └── inline-message.ts │ │ └── tsconfig.json │ ├── listbox │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── listbox.scss │ │ │ ├── listbox.spec.ts │ │ │ ├── listbox.stories.ts │ │ │ ├── listbox.ts │ │ │ ├── option-group-header.scss │ │ │ ├── option-group-header.ts │ │ │ ├── option-group.scss │ │ │ ├── option-group.spec.ts │ │ │ ├── option-group.ts │ │ │ ├── option.scss │ │ │ ├── option.spec.ts │ │ │ └── option.ts │ │ └── tsconfig.json │ ├── menu │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── menu-button.scss │ │ │ ├── menu-button.spec.ts │ │ │ ├── menu-button.stories.ts │ │ │ ├── menu-button.ts │ │ │ ├── menu-item-group.scss │ │ │ ├── menu-item-group.spec.ts │ │ │ ├── menu-item-group.ts │ │ │ ├── menu-item.scss │ │ │ ├── menu-item.spec.ts │ │ │ ├── menu-item.ts │ │ │ ├── menu.scss │ │ │ ├── menu.spec.ts │ │ │ ├── menu.stories.ts │ │ │ └── menu.ts │ │ └── tsconfig.json │ ├── message-dialog │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── message-dialog.scss │ │ │ ├── message-dialog.spec.ts │ │ │ ├── message-dialog.stories.ts │ │ │ └── message-dialog.ts │ │ └── tsconfig.json │ ├── number-field │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── number-field.scss │ │ │ ├── number-field.spec.ts │ │ │ ├── number-field.stories.ts │ │ │ ├── number-field.ts │ │ │ ├── number-parser.spec.ts │ │ │ └── number-parser.ts │ │ └── tsconfig.json │ ├── paginator │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── examples.stories.ts │ │ │ ├── page-size.scss │ │ │ ├── page-size.spec.ts │ │ │ ├── page-size.stories.ts │ │ │ ├── page-size.ts │ │ │ ├── paginator.scss │ │ │ ├── paginator.spec.ts │ │ │ ├── paginator.stories.ts │ │ │ ├── paginator.ts │ │ │ ├── status.scss │ │ │ ├── status.spec.ts │ │ │ ├── status.stories.ts │ │ │ └── status.ts │ │ └── tsconfig.json │ ├── panel │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── panel.scss │ │ │ ├── panel.spec.ts │ │ │ ├── panel.stories.ts │ │ │ └── panel.ts │ │ └── tsconfig.json │ ├── popover │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── popover.scss │ │ │ ├── popover.spec.ts │ │ │ ├── popover.stories.ts │ │ │ └── popover.ts │ │ └── tsconfig.json │ ├── progress-bar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── progress-bar.scss │ │ │ ├── progress-bar.spec.ts │ │ │ ├── progress-bar.stories.ts │ │ │ └── progress-bar.ts │ │ └── tsconfig.json │ ├── radio-group │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── radio-group.scss │ │ │ ├── radio-group.spec.ts │ │ │ ├── radio-group.stories.ts │ │ │ ├── radio-group.ts │ │ │ ├── radio.scss │ │ │ ├── radio.spec.ts │ │ │ └── radio.ts │ │ └── tsconfig.json │ ├── scrollbar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── scrollbar.scss │ │ │ ├── scrollbar.stories.ts │ │ │ └── scrollbar.ts │ │ └── tsconfig.json │ ├── search-field │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── search-field.scss │ │ │ ├── search-field.spec.ts │ │ │ ├── search-field.stories.ts │ │ │ └── search-field.ts │ │ └── tsconfig.json │ ├── select │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── select-button.scss │ │ │ ├── select-button.ts │ │ │ ├── select.scss │ │ │ ├── select.spec.ts │ │ │ ├── select.stories.ts │ │ │ └── select.ts │ │ └── tsconfig.json │ ├── shared │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── breakpoints.scss │ │ │ ├── browser.ts │ │ │ ├── config.ts │ │ │ ├── controllers │ │ │ │ ├── anchor.ts │ │ │ │ ├── events.ts │ │ │ │ ├── focus-group.ts │ │ │ │ ├── media.ts │ │ │ │ ├── roving-tabindex.spec.ts │ │ │ │ ├── roving-tabindex.ts │ │ │ │ └── shortcut.ts │ │ │ ├── converters.ts │ │ │ ├── converters │ │ │ │ └── date.ts │ │ │ ├── css.ts │ │ │ ├── decorators │ │ │ │ ├── base.ts │ │ │ │ ├── event.ts │ │ │ │ └── observe.ts │ │ │ ├── directives │ │ │ │ └── anchor.ts │ │ │ ├── dom.ts │ │ │ ├── events.ts │ │ │ ├── events │ │ │ │ ├── blur.ts │ │ │ │ ├── cancel.ts │ │ │ │ ├── change.ts │ │ │ │ ├── clear.ts │ │ │ │ ├── focus.ts │ │ │ │ ├── select.ts │ │ │ │ └── toggle.ts │ │ │ ├── mixins.ts │ │ │ ├── mixins │ │ │ │ ├── locale-mixin.ts │ │ │ │ └── observe-attributes-mixin.ts │ │ │ ├── path.spec.ts │ │ │ ├── path.ts │ │ │ ├── popover.ts │ │ │ ├── string.spec.ts │ │ │ ├── string.ts │ │ │ └── vendor │ │ │ │ └── tinykeys.ts │ │ └── tsconfig.json │ ├── skeleton │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── skeleton.scss │ │ │ ├── skeleton.spec.ts │ │ │ ├── skeleton.stories.ts │ │ │ └── skeleton.ts │ │ └── tsconfig.json │ ├── spinner │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── spinner.scss │ │ │ ├── spinner.spec.ts │ │ │ ├── spinner.stories.ts │ │ │ └── spinner.ts │ │ └── tsconfig.json │ ├── stylelint.config.mjs │ ├── switch │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── switch.scss │ │ │ ├── switch.spec.ts │ │ │ ├── switch.stories.ts │ │ │ └── switch.ts │ │ └── tsconfig.json │ ├── tabs │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── tab-group.scss │ │ │ ├── tab-group.spec.ts │ │ │ ├── tab-group.stories.ts │ │ │ ├── tab-group.ts │ │ │ ├── tab-panel.scss │ │ │ ├── tab-panel.spec.ts │ │ │ ├── tab-panel.ts │ │ │ ├── tab.scss │ │ │ ├── tab.spec.ts │ │ │ └── tab.ts │ │ └── tsconfig.json │ ├── tag │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── tag-list.scss │ │ │ ├── tag-list.spec.ts │ │ │ ├── tag-list.stories.ts │ │ │ ├── tag-list.ts │ │ │ ├── tag.scss │ │ │ ├── tag.spec.ts │ │ │ ├── tag.stories.ts │ │ │ └── tag.ts │ │ └── tsconfig.json │ ├── text-area │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── text-area.scss │ │ │ ├── text-area.spec.ts │ │ │ ├── text-area.stories.ts │ │ │ └── text-area.ts │ │ └── tsconfig.json │ ├── text-field │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── field-button.scss │ │ │ ├── field-button.ts │ │ │ ├── text-field.scss │ │ │ ├── text-field.spec.ts │ │ │ ├── text-field.stories.ts │ │ │ └── text-field.ts │ │ └── tsconfig.json │ ├── toggle-button │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── toggle-button.scss │ │ │ ├── toggle-button.spec.ts │ │ │ ├── toggle-button.stories.ts │ │ │ └── toggle-button.ts │ │ └── tsconfig.json │ ├── toggle-group │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── toggle-group.scss │ │ │ ├── toggle-group.spec.ts │ │ │ ├── toggle-group.stories.ts │ │ │ └── toggle-group.ts │ │ └── tsconfig.json │ ├── tool-bar │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── tool-bar-divider.scss │ │ │ ├── tool-bar-divider.ts │ │ │ ├── tool-bar.scss │ │ │ ├── tool-bar.spec.ts │ │ │ ├── tool-bar.stories.ts │ │ │ └── tool-bar.ts │ │ └── tsconfig.json │ ├── tooltip │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── tooltip-directive.spec.ts │ │ │ ├── tooltip-directive.ts │ │ │ ├── tooltip.scss │ │ │ ├── tooltip.spec.ts │ │ │ ├── tooltip.stories.ts │ │ │ └── tooltip.ts │ │ └── tsconfig.json │ ├── tree │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── register.ts │ │ ├── src │ │ │ ├── flat-tree-data-source.spec.ts │ │ │ ├── flat-tree-data-source.ts │ │ │ ├── indent-guides.scss │ │ │ ├── indent-guides.ts │ │ │ ├── nested-tree-data-source.ts │ │ │ ├── tree-data-source.ts │ │ │ ├── tree-node.scss │ │ │ ├── tree-node.spec.ts │ │ │ ├── tree-node.ts │ │ │ ├── tree.scss │ │ │ ├── tree.spec.ts │ │ │ ├── tree.stories.ts │ │ │ └── tree.ts │ │ └── tsconfig.json │ └── tsconfig.json ├── locales │ ├── CHANGELOG.md │ ├── README.md │ ├── index.ts │ ├── package.json │ ├── src │ │ ├── locale-codes.ts │ │ ├── nl.ts │ │ └── nl.xlf │ └── tsconfig.json ├── themes │ ├── bingel-dc │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── bingel-int │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── clickedu │ │ ├── CHANGELOG.md │ │ ├── fonts.css │ │ ├── fonts │ │ │ ├── space-grotesk-bold.woff2 │ │ │ ├── space-grotesk-light.woff2 │ │ │ ├── space-grotesk-medium.woff2 │ │ │ └── space-grotesk-regular.woff2 │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── core │ │ ├── global.css │ │ └── icons │ │ │ ├── badge-available.svg │ │ │ ├── badge-away.svg │ │ │ ├── badge-donotdisturb.svg │ │ │ ├── badge-offline.svg │ │ │ ├── ellipsis-down.svg │ │ │ ├── error.svg │ │ │ ├── eye.svg │ │ │ ├── hand.svg │ │ │ ├── info.svg │ │ │ ├── smile.svg │ │ │ ├── sort-down.svg │ │ │ ├── sort-up.svg │ │ │ ├── sort.svg │ │ │ └── star.svg │ ├── editorial-suite │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── eslint.config.mjs │ ├── itslearning │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── kampus │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── icons │ │ │ ├── adaptive.svg │ │ │ ├── additional-materials.svg │ │ │ ├── applets.svg │ │ │ ├── book-loader.svg │ │ │ ├── content-has-audio.svg │ │ │ ├── content-has-video.svg │ │ │ ├── edit-feed.svg │ │ │ ├── exercise.svg │ │ │ ├── extras-menu.svg │ │ │ ├── flip-card.svg │ │ │ ├── groupwork.svg │ │ │ ├── lab-work.svg │ │ │ ├── meaningful-relations.svg │ │ │ ├── non-cas.svg │ │ │ ├── ongoing.svg │ │ │ ├── pairwork.svg │ │ │ ├── programs.svg │ │ │ ├── project.svg │ │ │ ├── readspeaker.svg │ │ │ ├── research.svg │ │ │ ├── share-copy.svg │ │ │ ├── show-all-answers.svg │ │ │ ├── teacher-created.svg │ │ │ ├── teachers-view.svg │ │ │ ├── theory-secondary.svg │ │ │ ├── toc-collapse.svg │ │ │ └── toc-expand.svg │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── magister │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── max │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── my-digital-book │ │ ├── CHANGELOG.md │ │ ├── fonts.css │ │ ├── fonts │ │ │ ├── the_message-bold.woff2 │ │ │ ├── the_message-demibold.woff2 │ │ │ └── the_message-regular.woff2 │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── myvanin_onhold │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── neon │ │ ├── CHANGELOG.md │ │ ├── fonts.css │ │ ├── fonts │ │ │ ├── the_message-bold.woff2 │ │ │ ├── the_message-demibold.woff2 │ │ │ └── the_message-regular.woff2 │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── sanoma-learning │ │ ├── CHANGELOG.md │ │ ├── fonts.css │ │ ├── fonts │ │ │ ├── the_message-bold.woff2 │ │ │ ├── the_message-demibold.woff2 │ │ │ └── the_message-regular.woff2 │ │ ├── icons.ts │ │ ├── icons │ │ │ ├── ellipsis-down.svg │ │ │ ├── github.svg │ │ │ └── storybook.svg │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── sanoma-utbildning_onhold │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── stylelint.config.mjs │ ├── teas │ │ ├── CHANGELOG.md │ │ ├── icons.ts │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.json │ └── tsconfig.json └── tokens │ ├── README.md │ ├── package.json │ └── src │ ├── $metadata.json │ ├── $themes.json │ ├── bingel-dc │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── bingel-int │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── clickedu │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── core.json │ ├── device │ ├── desktop.json │ ├── digiboard.json │ ├── mobile.json │ └── tablet.json │ ├── editorial-suite │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── itslearning │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── kampus │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── magister │ ├── base-new.json │ ├── base.json │ ├── dark-new.json │ ├── dark.json │ ├── light-new.json │ └── light.json │ ├── max │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── my-digital-book │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json │ ├── myvanin_onhold │ ├── base.json │ └── light.json │ ├── neon │ ├── base-new.json │ ├── base.json │ ├── dark-new.json │ ├── dark.json │ ├── light-new.json │ └── light.json │ ├── primitives.json │ ├── sanoma-learning │ ├── base-new.json │ ├── base.json │ ├── dark-new.json │ ├── dark.json │ ├── light-new.json │ └── light.json │ ├── sanoma-utbildning_onhold │ ├── base.json │ └── light.json │ ├── system.json │ └── teas │ ├── base-new.json │ ├── base.json │ ├── light-new.json │ └── light.json ├── scripts ├── .figmaexportrc.js ├── build-metadata.js ├── build-packages.js ├── build-styles.js ├── build-themes.js ├── cem-plugin-angular-wrapper.js ├── cem-plugin-event-decorator.js ├── cem-plugins.js ├── extract-i18n.js ├── import-icons.js ├── output-pages-to-folders-svg.js ├── package.json ├── setup-themes.js └── utils.js ├── tools ├── eslint-config │ ├── CHANGELOG.md │ ├── README.md │ ├── index.js │ └── package.json ├── eslint-plugin-slds │ ├── CHANGELOG.md │ ├── lib │ │ ├── index.js │ │ ├── rules │ │ │ ├── button-has-label.js │ │ │ ├── multiline-html-template.js │ │ │ └── singleline-html-template-trimmed.js │ │ └── utils.js │ ├── package.json │ └── tests │ │ └── lib │ │ └── rules │ │ ├── button-has-label.test.js │ │ ├── multiline-html-template.test.js │ │ └── singleline-html-template-trimmed.test.js ├── example-data │ ├── data-service.js │ ├── data │ │ ├── countries.json │ │ ├── groups.json │ │ ├── people-images.json │ │ ├── people.json │ │ ├── schools.json │ │ ├── student-images.json │ │ └── students.json │ ├── index.d.ts │ ├── index.js │ └── package.json ├── stylelint-config │ ├── CHANGELOG.md │ ├── README.md │ ├── index.js │ └── package.json └── theme-selector-plugin │ ├── .gitignore │ ├── README.md │ ├── manifest.json │ ├── package.json │ ├── src │ ├── code.ts │ ├── cover.png │ ├── favicon.png │ └── ui.html │ └── tsconfig.json ├── tsconfig.all.json ├── tsconfig.base.json ├── web-test-runner.config.mjs ├── website ├── .eleventy.cjs ├── .eslintignore ├── .eslintrc.cjs ├── .prettierignore ├── .stylelintrc ├── README.md ├── custom-elements-manifest.config.js ├── ds_11ty_docs.iml ├── esbuild.config.js ├── package.json ├── src │ ├── 404.md │ ├── _data │ │ ├── tokens │ │ │ ├── base.json │ │ │ └── core.json │ │ └── version.cjs │ ├── _includes │ │ ├── 404.njk │ │ ├── base.njk │ │ ├── categories │ │ │ ├── components │ │ │ │ ├── components-overview.njk │ │ │ │ └── components.njk │ │ │ └── getting-started.njk │ │ ├── search.njk │ │ ├── sidebar.njk │ │ ├── theme-switch.js │ │ └── theme-switch.njk │ ├── assets │ │ ├── favicon │ │ │ ├── sl-favicon-16-black.png │ │ │ ├── sl-favicon-16-white.png │ │ │ ├── sl-favicon-32-black.png │ │ │ └── sl-favicon-32-white.png │ │ ├── fonts │ │ │ ├── the-message-bold.woff2 │ │ │ ├── the-message-demibold.woff2 │ │ │ └── the-message-regular.woff2 │ │ ├── icons │ │ │ ├── angle-down.svg │ │ │ ├── angle-right-black.svg │ │ │ ├── angle-right.svg │ │ │ ├── bootstrap-icons │ │ │ │ ├── moon.svg │ │ │ │ └── sun.svg │ │ │ ├── bug.svg │ │ │ ├── check-dark.svg │ │ │ ├── check.svg │ │ │ ├── chevron-right-dark-lighter.svg │ │ │ ├── chevron-right-dark.svg │ │ │ ├── chevron-right-darker.svg │ │ │ ├── chevron-right.svg │ │ │ ├── close-light.svg │ │ │ ├── close.svg │ │ │ ├── copy-hover-dark.svg │ │ │ ├── copy-hover.svg │ │ │ ├── copy-light.svg │ │ │ ├── copy.svg │ │ │ ├── error-dark.svg │ │ │ ├── error.svg │ │ │ ├── hamburger-light.svg │ │ │ ├── hamburger.svg │ │ │ ├── messages-question-black.svg │ │ │ ├── messages-question-grey.svg │ │ │ ├── messages-question-light-grey.svg │ │ │ ├── messages-question.svg │ │ │ ├── question.svg │ │ │ ├── search-light.svg │ │ │ ├── search.svg │ │ │ └── slack.svg │ │ ├── images │ │ │ ├── components │ │ │ │ ├── avatar │ │ │ │ │ ├── toa-heftiba-ANNsvl-6AG0-unsplash.jpg │ │ │ │ │ └── xia-yang-AGGA9LH3FLo-unsplash.jpg │ │ │ │ ├── button │ │ │ │ │ ├── sl-button-figma-options.svg │ │ │ │ │ ├── sl-button-importance-graph.svg │ │ │ │ │ ├── sl-button-variants-types-example.svg │ │ │ │ │ ├── sl-button-when-not-use-menu.svg │ │ │ │ │ ├── sl-button-when-use-actions.svg │ │ │ │ │ ├── sl-button-when-use-navigation.svg │ │ │ │ │ └── sl-buttons-anatomy.svg │ │ │ │ ├── checkbox │ │ │ │ │ ├── sl-checkbox-anatomy.svg │ │ │ │ │ ├── sl-checkbox-figma-options.svg │ │ │ │ │ ├── sl-checkbox-sizing-large.svg │ │ │ │ │ ├── sl-checkbox-sizing-medium.svg │ │ │ │ │ ├── sl-checkbox-status-checked.svg │ │ │ │ │ ├── sl-checkbox-status-indeterminate.svg │ │ │ │ │ ├── sl-checkbox-status-unchecked.svg │ │ │ │ │ ├── sl-checkbox-variant-default.svg │ │ │ │ │ ├── sl-checkbox-variant-invalid.svg │ │ │ │ │ ├── sl-checkbox-variant-valid.svg │ │ │ │ │ ├── sl-checkbox-when-not-use-exclusive.svg │ │ │ │ │ ├── sl-checkbox-when-not-use-toggle.svg │ │ │ │ │ ├── sl-checkbox-when-use-filter.svg │ │ │ │ │ ├── sl-checkbox-when-use-multiple.svg │ │ │ │ │ ├── sl-checkbox-when-use-only.svg │ │ │ │ │ └── sl-checkbox-when-use-yes-no.svg │ │ │ │ ├── radio-group │ │ │ │ │ ├── sl-radio-group-anatomy.svg │ │ │ │ │ ├── sl-radio-group-behavior-clickable-area.svg │ │ │ │ │ ├── sl-radio-group-behavior-default.svg │ │ │ │ │ ├── sl-radio-group-behavior-exclusive-selection.svg │ │ │ │ │ ├── sl-radio-group-behavior-focusable-area.svg │ │ │ │ │ ├── sl-radio-group-behavior-overflow.svg │ │ │ │ │ ├── sl-radio-group-behavior-validation.svg │ │ │ │ │ ├── sl-radio-group-figma-options.svg │ │ │ │ │ ├── sl-radio-group-importance-graph.svg │ │ │ │ │ ├── sl-radio-group-variants-types-example.svg │ │ │ │ │ ├── sl-radio-group-when-not-use-large-lists.svg │ │ │ │ │ ├── sl-radio-group-when-not-use-multiple.svg │ │ │ │ │ ├── sl-radio-group-when-use-forms.svg │ │ │ │ │ └── sl-radio-group-when-use-settings.svg │ │ │ │ ├── switch │ │ │ │ │ ├── sl-switch-anatomy.svg │ │ │ │ │ ├── sl-switch-figma-options.svg │ │ │ │ │ ├── sl-switch-when-not-use-complex.svg │ │ │ │ │ ├── sl-switch-when-use-feedback.svg │ │ │ │ │ └── sl-switch-when-use-settings.svg │ │ │ │ └── text-field │ │ │ │ │ ├── sl-text-field-anatomy.svg │ │ │ │ │ ├── sl-text-field-figma-options.svg │ │ │ │ │ ├── sl-text-field-when-not-use-long.svg │ │ │ │ │ ├── sl-text-field-when-not-use-predefined.svg │ │ │ │ │ ├── sl-text-field-when-not-use-sensitive.svg │ │ │ │ │ ├── sl-text-field-when-use-memorable.svg │ │ │ │ │ └── sl-text-field-when-use-unique.svg │ │ │ ├── example-do.svg │ │ │ ├── example-dont.svg │ │ │ ├── homepage │ │ │ │ ├── brush-ruler.svg │ │ │ │ ├── newspaper.svg │ │ │ │ ├── pupil.svg │ │ │ │ ├── puzzle.svg │ │ │ │ └── slide-design.svg │ │ │ ├── open-graph-card.jpg │ │ │ ├── open-graph-card.png │ │ │ └── whats-new │ │ │ │ ├── 2024-05-inline-message-dark.png │ │ │ │ ├── 2024-05-inline-message-light.png │ │ │ │ ├── 2024-05-issue-template-dark.png │ │ │ │ ├── 2024-05-issue-template-light.png │ │ │ │ ├── 2024-05-resources-dark.png │ │ │ │ └── 2024-05-resources-light.png │ │ ├── logo-black.svg │ │ └── logo.svg │ ├── categories │ │ ├── FAQ │ │ │ └── FAQ.md │ │ ├── categories.json │ │ ├── components.md │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── accessibility.md │ │ │ │ ├── accordion.json │ │ │ │ ├── accordion.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── avatar │ │ │ │ ├── accessibility.md │ │ │ │ ├── avatar.json │ │ │ │ ├── avatar.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── badge │ │ │ │ ├── accessibility.md │ │ │ │ ├── badge.json │ │ │ │ ├── badge.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── breadcrumbs │ │ │ │ ├── accessibility.md │ │ │ │ ├── breadcrumbs.json │ │ │ │ ├── breadcrumbs.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── button-bar │ │ │ │ ├── accessibility.md │ │ │ │ ├── button-bar.json │ │ │ │ ├── button-bar.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── button │ │ │ │ ├── accessibility.md │ │ │ │ ├── button.json │ │ │ │ ├── button.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── card │ │ │ │ ├── accessibility.md │ │ │ │ ├── card.json │ │ │ │ ├── card.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── checkbox │ │ │ │ ├── accessibility.md │ │ │ │ ├── checkbox.json │ │ │ │ ├── checkbox.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── combobox │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── combobox.json │ │ │ │ ├── combobox.md │ │ │ │ └── usage.md │ │ │ ├── component-table.njk │ │ │ ├── components.json │ │ │ ├── dialog │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── dialog.json │ │ │ │ ├── dialog.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── drawer │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── drawer.json │ │ │ │ ├── drawer.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── editor │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── editor.json │ │ │ │ ├── editor.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── form-field │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── form-field.json │ │ │ │ ├── form-field.md │ │ │ │ └── usage.md │ │ │ ├── form │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── form.json │ │ │ │ ├── form.md │ │ │ │ └── usage.md │ │ │ ├── grid │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── grid.json │ │ │ │ ├── grid.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── icon │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── icon.json │ │ │ │ ├── icon.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── inline-message │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── inline-message.json │ │ │ │ ├── inline-message.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── menu │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── menu.json │ │ │ │ ├── menu.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── message-dialog │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── message-dialog.json │ │ │ │ ├── message-dialog.md │ │ │ │ └── usage.md │ │ │ ├── number-field │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── number-field.json │ │ │ │ ├── number-field.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── overview.md │ │ │ ├── popover │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── popover.json │ │ │ │ ├── popover.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── progress-bar │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── progress-bar.json │ │ │ │ ├── progress-bar.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── radio-group │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── radio-group.json │ │ │ │ ├── radio-group.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── search-field │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── search-field.json │ │ │ │ ├── search-field.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── select │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── select.json │ │ │ │ ├── select.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── skeleton │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── skeleton.json │ │ │ │ ├── skeleton.md │ │ │ │ ├── specs.md │ │ │ │ └── usage.md │ │ │ ├── spinner │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── spinner.json │ │ │ │ ├── spinner.md │ │ │ │ └── usage.md │ │ │ ├── switch │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── switch.json │ │ │ │ ├── switch.md │ │ │ │ └── usage.md │ │ │ ├── tabs │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── tabs.json │ │ │ │ ├── tabs.md │ │ │ │ └── usage.md │ │ │ ├── tag │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── tag.json │ │ │ │ ├── tag.md │ │ │ │ └── usage.md │ │ │ ├── text-area │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── text-area.json │ │ │ │ ├── text-area.md │ │ │ │ └── usage.md │ │ │ ├── text-field │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── text-field.json │ │ │ │ ├── text-field.md │ │ │ │ └── usage.md │ │ │ ├── toggle-button │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── toggle-button.json │ │ │ │ ├── toggle-button.md │ │ │ │ └── usage.md │ │ │ ├── toggle-group │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── toggle-group.json │ │ │ │ ├── toggle-group.md │ │ │ │ └── usage.md │ │ │ ├── tooltip │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── tooltip.json │ │ │ │ ├── tooltip.md │ │ │ │ └── usage.md │ │ │ └── tree-view │ │ │ │ ├── accessibility.md │ │ │ │ ├── code.md │ │ │ │ ├── overview.md │ │ │ │ ├── specs.md │ │ │ │ ├── tree-view.json │ │ │ │ ├── tree-view.md │ │ │ │ └── usage.md │ │ ├── design-tokens.md │ │ ├── design-tokens │ │ │ ├── animation │ │ │ │ ├── animation-tokens-table.njk │ │ │ │ └── animation.md │ │ │ ├── border │ │ │ │ ├── border-tokens-table.njk │ │ │ │ └── border.md │ │ │ ├── color │ │ │ │ ├── color-tokens-table.njk │ │ │ │ └── color.md │ │ │ ├── design-tokens.json │ │ │ ├── opacity │ │ │ │ ├── opacity-tokens-table.njk │ │ │ │ └── opacity.md │ │ │ ├── size │ │ │ │ ├── size-tokens-table.njk │ │ │ │ └── size.md │ │ │ ├── space │ │ │ │ ├── space-tokens-table.njk │ │ │ │ └── space.md │ │ │ └── text │ │ │ │ ├── text-tokens-table.njk │ │ │ │ └── text.md │ │ ├── getting-started.md │ │ ├── getting-started │ │ │ ├── designers.md │ │ │ ├── developers.md │ │ │ └── getting-started.json │ │ ├── guidelines.md │ │ ├── guidelines │ │ │ ├── accessibility.md │ │ │ ├── design-principles.md │ │ │ ├── figma-toolkit.md │ │ │ ├── guidelines.json │ │ │ ├── naming.md │ │ │ ├── overlays.md │ │ │ └── release-process.md │ │ └── whats-new.md │ ├── index.md │ ├── scripts │ │ ├── demo-greeter.js │ │ ├── filters │ │ │ ├── search-index-json.njk │ │ │ └── searchFilter.cjs │ │ ├── my-element.js │ │ └── search.js │ ├── styles │ │ ├── base.scss │ │ ├── basic.scss │ │ ├── breakpoints.scss │ │ ├── categories │ │ │ ├── components.scss │ │ │ ├── components │ │ │ │ └── button.scss │ │ │ └── design-tokens │ │ │ │ └── base-tokens.scss │ │ ├── components │ │ │ ├── cards.scss │ │ │ ├── code.scss │ │ │ ├── table.scss │ │ │ └── tabs.scss │ │ ├── dark-light-mode.scss │ │ ├── elements.scss │ │ ├── homepage │ │ │ ├── call-to-action.scss │ │ │ ├── contact-block.scss │ │ │ ├── explore.scss │ │ │ └── hero-block.scss │ │ ├── layout │ │ │ ├── content.scss │ │ │ └── navigation.scss │ │ ├── main.scss │ │ ├── reset.scss │ │ ├── tokens-core.scss │ │ ├── tokens-dark.scss │ │ ├── tokens-light.scss │ │ ├── typography.scss │ │ └── variables.scss │ ├── ts │ │ ├── components │ │ │ ├── code-snippet │ │ │ │ ├── code-snippet-style.ts │ │ │ │ └── code-snippet.ts │ │ │ ├── component-status │ │ │ │ ├── component-status-style.ts │ │ │ │ └── component-status.ts │ │ │ ├── install-info.ts │ │ │ ├── main.ts │ │ │ ├── status │ │ │ │ └── status.ts │ │ │ └── vertical-tabs │ │ │ │ ├── vertical-tabs-style.ts │ │ │ │ └── vertical-tabs.ts │ │ ├── scripts │ │ │ ├── code-component.ts │ │ │ ├── main.ts │ │ │ ├── navigation.ts │ │ │ └── slds-components.ts │ │ └── utils │ │ │ └── active-element.ts │ └── utilities │ │ └── recurring-text │ │ ├── aria-attributes-no-list.txt │ │ └── aria-attributes.txt ├── tsconfig.cem.json └── tsconfig.json └── yarn.lock /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/afraid-houses-trade.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tooltip': patch 3 | --- 4 | 5 | Fixes showing the tooltip. The tooltip should be shown only on hover and when it’s focused by keyboard. 6 | -------------------------------------------------------------------------------- /.changeset/angry-baths-leave.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/locales': patch 3 | --- 4 | 5 | Update translations for grid 6 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json", 3 | "changelog": [ 4 | "./changelog-format.js", 5 | { "repo": "sl-design-system/components" } 6 | ], 7 | "commit": false, 8 | "fixed": [], 9 | "linked": [], 10 | "access": "restricted", 11 | "baseBranch": "main", 12 | "updateInternalDependencies": "patch", 13 | "ignore": [ 14 | "@sl-design-system/chromatic", 15 | "@sl-design-system/example-data", 16 | "@sl-design-system/lit-examples", 17 | "@sl-design-system/scripts", 18 | "@sl-design-system/tokens", 19 | "@sl-design-system/website" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /.changeset/forty-houses-shout.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/stylelint-config': minor 3 | '@sl-design-system/eslint-config': minor 4 | --- 5 | 6 | Update dependencies 7 | -------------------------------------------------------------------------------- /.changeset/fresh-swans-yell.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/data-source': patch 3 | '@sl-design-system/grid': patch 4 | --- 5 | 6 | Fix regression with basic drag and drop of rows within grid 7 | -------------------------------------------------------------------------------- /.changeset/full-lands-bathe.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tool-bar': patch 3 | --- 4 | 5 | Fixes incorrect margin when menu button is visible 6 | -------------------------------------------------------------------------------- /.changeset/huge-planes-melt.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/avatar': patch 3 | --- 4 | 5 | Fixes issue where name didn't wrap 6 | -------------------------------------------------------------------------------- /.changeset/huge-taxis-say.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tabs': patch 3 | --- 4 | 5 | Fixes issue where the gradient overlay doesn't match the background color set on the tabs with a ::part(container) selector. 6 | -------------------------------------------------------------------------------- /.changeset/itchy-roses-obey.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/select': patch 3 | --- 4 | 5 | Fix the size of the clearable icon in the select button 6 | -------------------------------------------------------------------------------- /.changeset/light-crews-clap.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/magister': patch 3 | '@sl-design-system/neon': patch 4 | '@sl-design-system/sanoma-learning': patch 5 | --- 6 | 7 | Minor fixes to dark theme colors 8 | -------------------------------------------------------------------------------- /.changeset/light-eyes-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/data-source': patch 3 | --- 4 | 5 | Several bug fixes: 6 | - Fix text being parsed as floating point numbers during sorting 7 | - Fix the `DataSourceFilterFunction` to include the value in the function 8 | -------------------------------------------------------------------------------- /.changeset/long-parrots-invent.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/search-field': minor 3 | --- 4 | 5 | Minor improvements: 6 | - Add the ability to slot a different icon in the `prefix` slot 7 | - Use the same clearable button style as the select component 8 | -------------------------------------------------------------------------------- /.changeset/lucky-moons-glow.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/inline-message': major 3 | --- 4 | 5 | Breaking change: 6 | - Remove `action` slot for action buttons. The `action` slot has been removed due to accessibility reasons. We do not recommend using inline messages with interactive elements inside. 7 | 8 | Other changes: 9 | - Remove `role` - announcer (aria-live) is used in the component instead. 10 | - Added `announcer` to the component (for the `danger` variant there is `aria-live="assertive"` used, for the rest: `aria-live="polite"`). 11 | -------------------------------------------------------------------------------- /.changeset/lucky-tires-wait.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/shared': minor 3 | --- 4 | 5 | Removed `SelectionController` since it has been removed from grid and that was the only user. 6 | 7 | See the data-source changes for more details. 8 | -------------------------------------------------------------------------------- /.changeset/many-walls-hear.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tool-bar': patch 3 | --- 4 | 5 | Improve styling for use within grid 6 | -------------------------------------------------------------------------------- /.changeset/ninety-donkeys-sniff.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/checkbox': patch 3 | --- 4 | 5 | Fix styling regression on checkboxes without a label 6 | -------------------------------------------------------------------------------- /.changeset/puny-planets-sort.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/paginator': patch 3 | --- 4 | 5 | Various fixes: 6 | - Fix issue where the current `pageSize` sometimes did not reflect the `pageSize` property of the data source 7 | - Fix issue where 2 buttons with "1" were showing when there was only one page 8 | - Update types due to `ListDataSource` changes 9 | -------------------------------------------------------------------------------- /.changeset/purple-pets-fix.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/locales': patch 3 | --- 4 | 5 | New grid translations 6 | -------------------------------------------------------------------------------- /.changeset/rare-trees-love.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/shared': patch 3 | --- 4 | 5 | Use the default `any` type for the `SlSelectionChangeEvent` 6 | -------------------------------------------------------------------------------- /.changeset/sad-results-give.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tool-bar': patch 3 | --- 4 | 5 | Fix console warning when an `` is slotted 6 | -------------------------------------------------------------------------------- /.changeset/sixty-cobras-invite.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/data-source': patch 3 | --- 4 | 5 | Expand `ListDataSource.setGroupBy` by adding a parameter for the label path 6 | -------------------------------------------------------------------------------- /.changeset/some-forks-shop.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tag': patch 3 | --- 4 | 5 | Fixes tabindexes for hidden tags in the stacked variant of `sl-tag-list`. 6 | -------------------------------------------------------------------------------- /.changeset/strong-pets-dance.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/combobox': patch 3 | --- 4 | 5 | Fixes issue that showed incorrect validity when using multiple mode and the field was required. 6 | -------------------------------------------------------------------------------- /.changeset/swift-pandas-repeat.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/radio-group': patch 3 | --- 4 | 5 | Increases the gap between radio buttons when buttons are shown in horizontal mode 6 | -------------------------------------------------------------------------------- /.changeset/tidy-tigers-bow.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/grid': minor 3 | --- 4 | 5 | Grid improvements: 6 | - Add "Cancel selection" button to the bulk action toolbar 7 | - Add `column` argument to `GridColumnHeaderRenderer` type 8 | - Fix missing aria-label on a selection column checkbox 9 | - Fix styling so a small button does not expand the header row above 48px 10 | - Fix styling so a row has a height of 40px 11 | - Fix empty `class` attributes 12 | - Fix missing `role="columnheader"` on the header cells 13 | -------------------------------------------------------------------------------- /.changeset/twenty-hands-say.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/listbox': patch 3 | '@sl-design-system/select': patch 4 | --- 5 | 6 | Added overflow-wrap to force words to break when options are shown in a very narrow container. 7 | -------------------------------------------------------------------------------- /.changeset/warm-pillows-change.md: -------------------------------------------------------------------------------- 1 | --- 2 | '@sl-design-system/tree': patch 3 | --- 4 | 5 | Update `TreeDataSource` types to match with `DataSource` 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | insert_final_newline = false 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | 3 | package.json text eol=lf 4 | package-lock.json text eol=lf 5 | CHANGELOG.md eol=lf 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 💬 Questions or discussion 4 | url: https://sanoma.slack.com/archives/C03SA9HUUA3 5 | about: Please post general questions or discussion topics in our Slack channel. 6 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | yarn lint-staged 2 | -------------------------------------------------------------------------------- /.lintstagedrc.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | 'packages/components/**/*.scss': 'stylelint --quiet-deprecation-warnings --config packages/components/stylelint.config.mjs --fix', 3 | 'packages/components/**/*.ts': 'eslint --config packages/components/eslint.config.mjs --fix', 4 | '*.scss': 'stylelint --quiet-deprecation-warnings --fix', 5 | }; 6 | -------------------------------------------------------------------------------- /.prettierrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | printWidth: 120, 4 | singleQuote: true, 5 | tabWidth: 2, 6 | trailingComma: 'none', 7 | endOfLine: 'auto' 8 | }; 9 | -------------------------------------------------------------------------------- /.storybook/images/avatar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/.storybook/images/avatar-1.jpg -------------------------------------------------------------------------------- /.storybook/images/avatar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/.storybook/images/avatar-2.jpg -------------------------------------------------------------------------------- /.storybook/images/avatar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/.storybook/images/avatar-3.jpg -------------------------------------------------------------------------------- /.storybook/preview-body.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /.storybook/sl-theme.ts: -------------------------------------------------------------------------------- 1 | import { create } from 'storybook/theming/create'; 2 | 3 | export default create({ 4 | base: 'light', 5 | brandImage: 'https://sanomalearning.design/assets/logo-black.svg', 6 | }); 7 | -------------------------------------------------------------------------------- /.storybook/utils.ts: -------------------------------------------------------------------------------- 1 | export const sizeName = (size: string): string => { 2 | switch (size) { 3 | case 'sm': 4 | return 'Small'; 5 | case 'md': 6 | return 'Medium'; 7 | case 'lg': 8 | return 'Large'; 9 | case 'xl': 10 | return 'Extra Large'; 11 | case '2xl': 12 | return '2 Extra Large'; 13 | case '3xl': 14 | return '3 Extra Large'; 15 | case '4xl': 16 | return '4 Extra Large'; 17 | default: 18 | return 'Extra Small'; 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /.stylelintrc.mjs: -------------------------------------------------------------------------------- 1 | import config from '@sl-design-system/stylelint-config'; 2 | 3 | /** @type {import('stylelint').Config} */ 4 | export default config; 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": [ 7 | "dbaeumer.vscode-eslint", 8 | "esbenp.prettier-vscode", 9 | "stylelint.vscode-stylelint" 10 | ] 11 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Attach to Node Functions", 6 | "type": "node", 7 | "request": "attach", 8 | "port": 9229, 9 | "preLaunchTask": "func: host start" 10 | } 11 | ] 12 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll": "explicit" 4 | }, 5 | "editor.detectIndentation": false, 6 | "editor.tabSize": 2, 7 | "eslint.experimental.useFlatConfig": true, 8 | "eslint.format.enable": true, 9 | "[typescriptreact]": { 10 | "editor.defaultFormatter": "dbaeumer.vscode-eslint" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: 0 2 | 3 | enableColors: true 4 | 5 | enableGlobalCache: true 6 | 7 | nmMode: hardlinks-global 8 | 9 | nodeLinker: node-modules 10 | 11 | npmScopes: 12 | fortawesome: 13 | npmAlwaysAuth: true 14 | npmAuthToken: "${FONT_AWESOME_AUTH_TOKEN}" 15 | npmRegistryServer: "https://npm.fontawesome.com/" 16 | 17 | yarnPath: .yarn/releases/yarn-4.9.1.cjs 18 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @anna-lach @Diaan @jpzwarte 2 | -------------------------------------------------------------------------------- /cem-angular-wrapper.config.mjs: -------------------------------------------------------------------------------- 1 | import angularWrapperPlugin from './scripts/cem-plugin-angular-wrapper.js'; 2 | import { eventDecoratorPlugin } from './scripts/cem-plugin-event-decorator.js'; 3 | 4 | export default { 5 | globs: ['./packages/components/**/*.ts'], 6 | exclude: ['./packages/components/**/*.{d,spec,stories}.ts'], 7 | litelement: true, 8 | packagejson: false, 9 | plugins: [ 10 | eventDecoratorPlugin(), 11 | angularWrapperPlugin({ outDir: 'packages/angular/src/' }) 12 | ] 13 | }; 14 | -------------------------------------------------------------------------------- /chromatic/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | tsconfigRootDir: __dirname, 4 | project: [ 5 | 'tsconfig.json' 6 | ] 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /chromatic/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from 'storybook/manager-api'; 2 | 3 | addons.setConfig({ 4 | enableShortcuts: false 5 | }); 6 | -------------------------------------------------------------------------------- /chromatic/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /chromatic/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "declaration": false, 5 | "downlevelIteration": true, 6 | "emitDeclarationOnly": false, 7 | "module": "ES2022", 8 | "moduleResolution": "node", 9 | "noPropertyAccessFromIndexSignature": true, 10 | "outDir": "./dist/out-tsc" 11 | }, 12 | "angularCompilerOptions": { 13 | "enableI18nLegacyMessageIdFormat": false, 14 | "strictInjectionParameters": true, 15 | "strictInputAccessModifiers": true, 16 | "strictTemplates": true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '@sl-design-system/eslint-config'; 2 | 3 | /** @type {import('eslint').Linter.Config[]} */ 4 | export default [...config]; 5 | -------------------------------------------------------------------------------- /examples/lit/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/composite-form/composite-form.js'; 2 | export * from './src/dynamic-array-form/dynamic-array-form.js'; 3 | export * from './src/nested-form/nested-form.js'; 4 | export * from './src/form-in-dialog/form-in-dialog.js'; 5 | -------------------------------------------------------------------------------- /examples/lit/src/composite-form/composite-form.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | gap: 1rem; 5 | } 6 | 7 | sl-form { 8 | display: grid; 9 | gap: 1rem; 10 | grid-template-columns: 1fr 1fr; 11 | 12 | > * { 13 | grid-column: span 2; 14 | } 15 | } 16 | 17 | sl-form-field[name='firstName'], 18 | sl-form-field[name='lastName'] { 19 | grid-column: span 1; 20 | } 21 | 22 | sl-text-field[name='otherAge'] { 23 | margin-inline-start: 2rem; 24 | } 25 | -------------------------------------------------------------------------------- /examples/lit/src/form-in-dialog/form-in-dialog.scss: -------------------------------------------------------------------------------- 1 | dialog { 2 | inline-size: 500px; 3 | } 4 | 5 | sl-form { 6 | padding-block: var(--sl-size-100); 7 | } 8 | -------------------------------------------------------------------------------- /examples/lit/src/nested-form/child-form.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | sl-form { 6 | display: grid; 7 | grid-template-columns: 1fr 1fr; 8 | } 9 | 10 | sl-form-field[name='street'], 11 | sl-form-field[name='city'] { 12 | grid-column: span 2; 13 | } 14 | -------------------------------------------------------------------------------- /examples/lit/src/nested-form/nested-form.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | sl-form { 6 | display: grid; 7 | grid-template-columns: 1fr 1fr; 8 | } 9 | 10 | sl-button-bar, 11 | sl-form-field[name='user.address'] { 12 | grid-column: span 2; 13 | } 14 | 15 | example-child-form { 16 | border: 1px solid #ccc; 17 | padding: 1rem; 18 | } 19 | -------------------------------------------------------------------------------- /examples/lit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /lit-localize.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json", 3 | "sourceLocale": "en", 4 | "targetLocales": ["nl"], 5 | "tsConfig": "tsconfig.all.json", 6 | "output": { 7 | "mode": "runtime", 8 | "outputDir": "packages/locales/src", 9 | "localeCodesModule": "packages/locales/src/locale-codes.ts" 10 | }, 11 | "interchange": { 12 | "format": "xliff", 13 | "xliffDir": "packages/locales/src" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /packages/angular/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import { type StorybookConfig } from '@storybook/angular'; 2 | 3 | const config: StorybookConfig = { 4 | stories: [ 5 | '../stories/*.stories.ts' 6 | ], 7 | core: { 8 | disableTelemetry: true 9 | }, 10 | framework: '@storybook/angular', 11 | staticDirs: [ 12 | { from: '../../themes', to: '/themes' } 13 | ] 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /packages/angular/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from 'storybook/manager-api'; 2 | 3 | addons.setConfig({ 4 | enableShortcuts: false 5 | }); 6 | -------------------------------------------------------------------------------- /packages/angular/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /packages/angular/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "resolveJsonModule": true, 6 | "types": ["node"] 7 | }, 8 | "exclude": ["../src/**/*.spec.ts"], 9 | "include": ["./preview.ts", "../src", "../stories"] 10 | } 11 | -------------------------------------------------------------------------------- /packages/angular/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/angular/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "pwa-chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/angular/src/forms/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "lib": { 4 | "entryFile": "public-api.ts" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/angular/src/forms/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox-group.directive'; 2 | export * from './checkbox.directive'; 3 | export * from './form-control-element.directive'; 4 | export * from './radio-group.directive'; 5 | export * from './select.directive'; 6 | export * from './switch.directive'; 7 | export * from './text-area.directive'; 8 | export * from './text-field.directive'; 9 | -------------------------------------------------------------------------------- /packages/angular/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /packages/angular/src/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../dist", 4 | "lib": { 5 | "entryFile": "./public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /packages/angular/src/public-api.ts: -------------------------------------------------------------------------------- 1 | export * from './ce-passthrough'; 2 | export * from './tooltip.directive'; 3 | -------------------------------------------------------------------------------- /packages/angular/stories/tooltip.stories.ts: -------------------------------------------------------------------------------- 1 | import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular'; 2 | import { ButtonComponent } from '../src/button/button.component'; 3 | import { TooltipDirective } from '../src/tooltip.directive'; 4 | 5 | export default { 6 | title: 'Tooltip', 7 | decorators: [ 8 | moduleMetadata({ 9 | imports: [ButtonComponent, TooltipDirective] 10 | }) 11 | ] 12 | } as Meta; 13 | 14 | export const Directive: StoryObj = { 15 | render: () => ({ 16 | template: 'Hover me' 17 | }) 18 | }; 19 | -------------------------------------------------------------------------------- /packages/angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "types": [] 9 | }, 10 | "exclude": [ 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /packages/angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "**/*.spec.ts", 12 | "**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/checklist/.gitignore: -------------------------------------------------------------------------------- 1 | src/sanoma-learning-theme.scss.ts 2 | -------------------------------------------------------------------------------- /packages/checklist/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sl-design-system/checklist 2 | 3 | ## 0.0.2 4 | 5 | ### Patch Changes 6 | 7 | - [#1099](https://github.com/sl-design-system/components/pull/1099) [`c2fa5ea`](https://github.com/sl-design-system/components/commit/c2fa5ea28f321be1303131644fde80896cac22ec) - Various minor fixes. 8 | 9 | ## 0.0.1 10 | 11 | ### Patch Changes 12 | 13 | - [#1071](https://github.com/sl-design-system/components/pull/1071) [`c7db7db`](https://github.com/sl-design-system/components/commit/c7db7db60c98e33e8e1a77d656b4f7e1c6edda89) - New checklist component 14 | -------------------------------------------------------------------------------- /packages/checklist/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '../../eslint.config.mjs'; 2 | 3 | /** 4 | * NOTE: All paths are relative to where eslint is run from, 5 | * in our case the root of the monorepo. 6 | */ 7 | export default [ 8 | { 9 | ignores: [ 10 | 'packages/checklist/**/*.js', 11 | 'packages/checklist/**/*.d.ts', 12 | 'packages/checklist/**/*.scss.ts' 13 | ] 14 | }, 15 | ...config, 16 | { 17 | languageOptions: { 18 | parserOptions: { 19 | project: 'packages/checklist/tsconfig.json' 20 | } 21 | } 22 | } 23 | ]; 24 | -------------------------------------------------------------------------------- /packages/checklist/index.ts: -------------------------------------------------------------------------------- 1 | import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'; 2 | export * from './src/checklist.js'; 3 | -------------------------------------------------------------------------------- /packages/checklist/src/checklist.stories.ts: -------------------------------------------------------------------------------- 1 | import { type Meta, type StoryObj } from '@storybook/web-components-vite'; 2 | import { html } from 'lit'; 3 | import './checklist.js'; 4 | 5 | type Story = StoryObj; 6 | 7 | export default { 8 | title: 'Getting started/Checklist', 9 | parameters: { 10 | layout: 'centered' 11 | }, 12 | render: () => html`` 13 | } satisfies Meta; 14 | 15 | export const Basic: Story = {}; 16 | -------------------------------------------------------------------------------- /packages/checklist/src/sanoma-learning-theme.scss: -------------------------------------------------------------------------------- 1 | @import '@sl-design-system/sanoma-learning/scss/base'; 2 | @import '@sl-design-system/sanoma-learning/scss/light'; 3 | @import '@sl-design-system/sanoma-learning/scss/dark'; 4 | 5 | :host { 6 | @include sl-theme-base; 7 | 8 | @media (prefers-color-scheme: light) { 9 | @include sl-theme-light; 10 | } 11 | 12 | @media (prefers-color-scheme: dark) { 13 | @include sl-theme-dark; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/checklist/src/sanoma-learning-theme.scss.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'lit'; 2 | 3 | export default css``; 4 | -------------------------------------------------------------------------------- /packages/checklist/stylelint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '@sl-design-system/stylelint-config'; 2 | 3 | export default { 4 | ignoreFiles: [ 5 | '**/*.js', 6 | '**/*.json', 7 | '**/*.map', 8 | '**/*.mjs', 9 | '**/*.md', 10 | '**/*.ts', 11 | '**/*.tsbuildinfo' 12 | ], 13 | ...config, 14 | overrides: [ 15 | ...config.overrides, 16 | { 17 | files: ['**/*.scss'], 18 | rules: { 19 | 'custom-property-pattern': [ 20 | '((_[a-z]+)|sl)(-[a-z]+)*', 21 | { 22 | message: 'Expected --sl or --_ custom property prefix' 23 | } 24 | ] 25 | } 26 | } 27 | ] 28 | }; 29 | -------------------------------------------------------------------------------- /packages/checklist/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Checklist 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/checklist/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "." 6 | }, 7 | "include": ["index.ts", "**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/accordion.js'; 2 | export * from './src/accordion-item.js'; 3 | -------------------------------------------------------------------------------- /packages/components/accordion/register.ts: -------------------------------------------------------------------------------- 1 | import { AccordionItem } from './src/accordion-item.js'; 2 | import { Accordion } from './src/accordion.js'; 3 | 4 | customElements.define('sl-accordion', Accordion); 5 | customElements.define('sl-accordion-item', AccordionItem); 6 | -------------------------------------------------------------------------------- /packages/components/accordion/src/accordion.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | --_background: var(--sl-body-background); 3 | 4 | background: var(--_background); 5 | display: block; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/announcer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/announce.js'; 2 | export * from './src/announcer.js'; 3 | -------------------------------------------------------------------------------- /packages/components/announcer/register.ts: -------------------------------------------------------------------------------- 1 | import { Announcer } from './src/announcer.js'; 2 | 3 | customElements.define('sl-announcer', Announcer); 4 | -------------------------------------------------------------------------------- /packages/components/announcer/src/announcer.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | block-size: 1px; 3 | clip: rect(0 0 0 0); 4 | clip-path: inset(50%); 5 | inline-size: 1px; 6 | overflow: hidden; 7 | position: absolute; 8 | white-space: nowrap; 9 | } 10 | 11 | ul { 12 | list-style-type: none; 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/announcer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/avatar.js'; 2 | -------------------------------------------------------------------------------- /packages/components/avatar/register.ts: -------------------------------------------------------------------------------- 1 | import { Avatar } from './src/avatar.js'; 2 | 3 | customElements.define('sl-avatar', Avatar); 4 | -------------------------------------------------------------------------------- /packages/components/avatar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/badge.js'; 2 | -------------------------------------------------------------------------------- /packages/components/badge/register.ts: -------------------------------------------------------------------------------- 1 | import { Badge } from './src/badge.js'; 2 | 3 | customElements.define('sl-badge', Badge); 4 | -------------------------------------------------------------------------------- /packages/components/badge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/breadcrumbs.js'; 2 | -------------------------------------------------------------------------------- /packages/components/breadcrumbs/register.ts: -------------------------------------------------------------------------------- 1 | import { Breadcrumbs } from './src/breadcrumbs.js'; 2 | 3 | customElements.define('sl-breadcrumbs', Breadcrumbs); 4 | -------------------------------------------------------------------------------- /packages/components/breadcrumbs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/button-bar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/button-bar.js'; 2 | -------------------------------------------------------------------------------- /packages/components/button-bar/register.ts: -------------------------------------------------------------------------------- 1 | import { ButtonBar } from './src/button-bar.js'; 2 | 3 | customElements.define('sl-button-bar', ButtonBar); 4 | -------------------------------------------------------------------------------- /packages/components/button-bar/src/button-bar.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | display: flex; 4 | flex-flow: row wrap; 5 | gap: var(--sl-size-100); 6 | justify-content: start; 7 | } 8 | 9 | :host([align='center']) { 10 | justify-content: center; 11 | } 12 | 13 | :host([align='end']) { 14 | justify-content: end; 15 | } 16 | 17 | :host([align='space-between']) { 18 | justify-content: space-between; 19 | } 20 | 21 | :host([icon-only]) { 22 | gap: var(--sl-size-050); 23 | } 24 | 25 | :host([reverse]) { 26 | flex-direction: row-reverse; 27 | } 28 | -------------------------------------------------------------------------------- /packages/components/button-bar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/button.js'; 2 | -------------------------------------------------------------------------------- /packages/components/button/register.ts: -------------------------------------------------------------------------------- 1 | import { Button } from './src/button.js'; 2 | 3 | customElements.define('sl-button', Button); 4 | -------------------------------------------------------------------------------- /packages/components/button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/calendar.js'; 2 | export * from './src/month-view.js'; 3 | -------------------------------------------------------------------------------- /packages/components/calendar/register.ts: -------------------------------------------------------------------------------- 1 | import { Calendar } from './src/calendar.js'; 2 | import { MonthView } from './src/month-view.js'; 3 | 4 | customElements.define('sl-calendar', Calendar); 5 | customElements.define('sl-month-view', MonthView); 6 | -------------------------------------------------------------------------------- /packages/components/calendar/src/calendar.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-grid; 3 | grid-template-columns: 1fr; 4 | } 5 | 6 | sl-select-day, 7 | sl-select-month, 8 | sl-select-year { 9 | grid-area: 1 / 1; 10 | inline-size: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/calendar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/card.js'; 2 | -------------------------------------------------------------------------------- /packages/components/card/register.ts: -------------------------------------------------------------------------------- 1 | import { Card } from './src/card.js'; 2 | 3 | customElements.define('sl-card', Card); 4 | -------------------------------------------------------------------------------- /packages/components/card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/checkbox.js'; 2 | export * from './src/checkbox-group.js'; 3 | -------------------------------------------------------------------------------- /packages/components/checkbox/register.ts: -------------------------------------------------------------------------------- 1 | import { CheckboxGroup } from './src/checkbox-group.js'; 2 | import { Checkbox } from './src/checkbox.js'; 3 | 4 | customElements.define('sl-checkbox', Checkbox); 5 | customElements.define('sl-checkbox-group', CheckboxGroup); 6 | -------------------------------------------------------------------------------- /packages/components/checkbox/src/checkbox-group.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: start; 3 | display: flex; 4 | flex-direction: column; 5 | gap: var(--sl-size-050); 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/combobox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/combobox.js'; 2 | -------------------------------------------------------------------------------- /packages/components/combobox/register.ts: -------------------------------------------------------------------------------- 1 | import { Combobox } from './src/combobox.js'; 2 | 3 | customElements.define('sl-combobox', Combobox); 4 | -------------------------------------------------------------------------------- /packages/components/combobox/src/create-custom-option.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | border-block-end: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default); 3 | inline-size: 100%; 4 | margin-block-end: var(--sl-size-075); 5 | margin-inline: 0; 6 | padding-block-end: var(--sl-size-100); 7 | } 8 | 9 | [part='container'] { 10 | margin-inline: var(--sl-size-100); 11 | } 12 | 13 | sl-icon { 14 | visibility: visible; 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/combobox/src/custom-option.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | margin-inline: var(--sl-size-100); 3 | } 4 | -------------------------------------------------------------------------------- /packages/components/combobox/src/custom-option.ts: -------------------------------------------------------------------------------- 1 | import { Option } from '@sl-design-system/listbox'; 2 | import { type CSSResultGroup } from 'lit'; 3 | import styles from './custom-option.scss.js'; 4 | 5 | declare global { 6 | interface HTMLElementTagNameMap { 7 | 'sl-combobox-custom-option': CustomOption; 8 | } 9 | } 10 | 11 | /** 12 | * A custom option in a combobox; used in combination with the `allowCustomValues` 13 | * property of the `sl-combobox` element. 14 | * 15 | * @slot default - The option's label. 16 | */ 17 | export class CustomOption extends Option { 18 | /** @internal */ 19 | static override styles: CSSResultGroup = [Option.styles, styles]; 20 | } 21 | -------------------------------------------------------------------------------- /packages/components/combobox/src/grouped-option.scss: -------------------------------------------------------------------------------- 1 | [part='group'] { 2 | color: var(--sl-color-foreground-plain); 3 | margin-inline-start: auto; 4 | } 5 | -------------------------------------------------------------------------------- /packages/components/combobox/src/no-match.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | color: var(--sl-color-foreground-plain); 3 | padding-inline: var(--sl-size-100); 4 | } 5 | -------------------------------------------------------------------------------- /packages/components/combobox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/data-source/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/array-list-data-source.js'; 2 | export * from './src/data-source.js'; 3 | export * from './src/fetch-list-data-source.js'; 4 | export * from './src/list-data-source.js'; 5 | -------------------------------------------------------------------------------- /packages/components/data-source/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/date-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/date-field.js'; 2 | -------------------------------------------------------------------------------- /packages/components/date-field/register.ts: -------------------------------------------------------------------------------- 1 | import { DateField } from './src/date-field.js'; 2 | 3 | customElements.define('sl-date-field', DateField); 4 | -------------------------------------------------------------------------------- /packages/components/date-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/dialog.js'; 2 | -------------------------------------------------------------------------------- /packages/components/dialog/register.ts: -------------------------------------------------------------------------------- 1 | import { Dialog } from './src/dialog.js'; 2 | 3 | customElements.define('sl-dialog', Dialog); 4 | -------------------------------------------------------------------------------- /packages/components/dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/drawer.js'; 2 | -------------------------------------------------------------------------------- /packages/components/drawer/register.ts: -------------------------------------------------------------------------------- 1 | import { Drawer } from './src/drawer.js'; 2 | 3 | customElements.define('sl-drawer', Drawer); 4 | -------------------------------------------------------------------------------- /packages/components/drawer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/editor/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/editor.js'; 2 | -------------------------------------------------------------------------------- /packages/components/editor/register.ts: -------------------------------------------------------------------------------- 1 | import { Editor } from './src/editor.js'; 2 | 3 | customElements.define('sl-editor', Editor); 4 | -------------------------------------------------------------------------------- /packages/components/editor/src/commands.ts: -------------------------------------------------------------------------------- 1 | import { AllSelection, type Command, type EditorState, type Transaction } from 'prosemirror-state'; 2 | import { createContentNode } from './utils.js'; 3 | 4 | export type DispatchFn = (tr: Transaction) => void; 5 | 6 | export const setHTML = 7 | (content: string): Command => 8 | (state: EditorState, dispatch?: DispatchFn): boolean => { 9 | dispatch?.( 10 | state.tr.setSelection(new AllSelection(state.doc)).replaceSelectionWith(createContentNode(state.schema, content)) 11 | ); 12 | 13 | return true; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/components/editor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/ellipsize-text/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @sl-design-system/ellipsize-text 2 | 3 | ## 0.0.1 4 | 5 | ### Patch Changes 6 | 7 | - [#1567](https://github.com/sl-design-system/components/pull/1567) [`f8c6b86`](https://github.com/sl-design-system/components/commit/f8c6b8609ed138033cb76a475a9301c1a523a85a) - New utility `` component 8 | 9 | - Updated dependencies [[`4714b36`](https://github.com/sl-design-system/components/commit/4714b36f1387d4d1731a310b621caf5a33be105b), [`3ce1a3b`](https://github.com/sl-design-system/components/commit/3ce1a3b2c7c185ae6499b7dad22056d4de96a3a0)]: 10 | - @sl-design-system/tooltip@1.1.1 11 | -------------------------------------------------------------------------------- /packages/components/ellipsize-text/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/ellipsize-text.js'; 2 | -------------------------------------------------------------------------------- /packages/components/ellipsize-text/register.ts: -------------------------------------------------------------------------------- 1 | import { EllipsizeText } from './src/ellipsize-text.js'; 2 | 3 | customElements.define('sl-ellipsize-text', EllipsizeText); 4 | -------------------------------------------------------------------------------- /packages/components/ellipsize-text/src/ellipsize-text.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | } 7 | -------------------------------------------------------------------------------- /packages/components/ellipsize-text/src/ellipsize-text.stories.ts: -------------------------------------------------------------------------------- 1 | import { type Meta, type StoryObj } from '@storybook/web-components-vite'; 2 | import { html } from 'lit'; 3 | import '../register.js'; 4 | 5 | type Props = { text: string; width: number }; 6 | type Story = StoryObj; 7 | 8 | export default { 9 | title: 'Utilities/Ellipsize Text', 10 | tags: ['draft'], 11 | render: ({ text, width }) => html`${text}` 12 | } satisfies Meta; 13 | 14 | export const Basic: Story = { 15 | args: { 16 | width: 200, 17 | text: 'This is a long text that should be truncated' 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components/ellipsize-text/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/emoji/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/emoji-browser.js'; 2 | export * from './src/emoji-service.js'; 3 | -------------------------------------------------------------------------------- /packages/components/emoji/register.ts: -------------------------------------------------------------------------------- 1 | import { EmojiBrowser } from './src/emoji-browser.js'; 2 | 3 | customElements.define('sl-emoji-browser', EmojiBrowser); 4 | -------------------------------------------------------------------------------- /packages/components/emoji/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '../../eslint.config.mjs'; 2 | 3 | /** 4 | * NOTE: All paths are relative to where eslint is run from, 5 | * in our case the root of the monorepo. 6 | */ 7 | export default [ 8 | { 9 | ignores: [ 10 | '**/*.[json|md]', 11 | 'packages/components/**/*.d.ts', 12 | 'packages/components/**/*.scss.ts', 13 | 'packages/components/shared/src/vendor/*.ts', 14 | ] 15 | }, 16 | ...config, 17 | { 18 | languageOptions: { 19 | parserOptions: { 20 | project: 'packages/components/tsconfig.json' 21 | } 22 | } 23 | } 24 | ]; 25 | -------------------------------------------------------------------------------- /packages/components/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/error.js'; 2 | export * from './src/form-control-mixin.js'; 3 | export * from './src/form-controller.js'; 4 | export * from './src/form-field.js'; 5 | export * from './src/form-validation-errors.js'; 6 | export * from './src/form.js'; 7 | export * from './src/hint.js'; 8 | export * from './src/label.js'; 9 | -------------------------------------------------------------------------------- /packages/components/form/register.ts: -------------------------------------------------------------------------------- 1 | import { Error } from './src/error.js'; 2 | import { FormField } from './src/form-field.js'; 3 | import { FormValidationErrors } from './src/form-validation-errors.js'; 4 | import { Form } from './src/form.js'; 5 | import { Hint } from './src/hint.js'; 6 | import { Label } from './src/label.js'; 7 | 8 | customElements.define('sl-error', Error); 9 | customElements.define('sl-form', Form); 10 | customElements.define('sl-form-field', FormField); 11 | customElements.define('sl-form-validation-errors', FormValidationErrors); 12 | customElements.define('sl-hint', Hint); 13 | customElements.define('sl-label', Label); 14 | -------------------------------------------------------------------------------- /packages/components/form/src/error.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | color: var(--sl-color-foreground-negative-plain); 4 | display: flex; 5 | font-weight: var(--sl-text-typeset-fontWeight-demibold); 6 | gap: var(--sl-size-050); 7 | padding-block-start: var(--sl-size-050); 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/form/src/form-field.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | } 5 | 6 | slot:not([name])::slotted(*) { 7 | margin-block-start: var(--sl-size-050); 8 | } 9 | 10 | slot:not([name])::slotted(:is(sl-checkbox, sl-switch[reverse])) { 11 | align-self: start; 12 | } 13 | 14 | .wrapper { 15 | display: flex; 16 | flex-direction: column; 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/form/src/form-validation-errors.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: none; 3 | } 4 | 5 | ul { 6 | display: inline; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | li { 12 | display: inline; 13 | 14 | &::after { 15 | content: ', '; 16 | } 17 | 18 | &:last-of-type::after { 19 | content: ''; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/form/src/form.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | gap: var(--sl-size-300); 5 | } 6 | -------------------------------------------------------------------------------- /packages/components/form/src/hint.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | color: var(--sl-color-foreground-subtlest); 3 | display: block; 4 | } 5 | -------------------------------------------------------------------------------- /packages/components/form/src/label.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | color: var(--sl-color-foreground-bold); 4 | display: inline-flex; 5 | font-weight: var(--sl-text-typeset-fontWeight-demibold); 6 | } 7 | 8 | .optional, 9 | .required { 10 | margin-inline-start: var(--sl-size-050); 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/format-date/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/format.js'; 2 | export * from './src/format-date.js'; 3 | -------------------------------------------------------------------------------- /packages/components/format-date/register.ts: -------------------------------------------------------------------------------- 1 | import { FormatDate } from './src/format-date'; 2 | 3 | customElements.define('sl-format-date', FormatDate); 4 | -------------------------------------------------------------------------------- /packages/components/format-date/src/format.ts: -------------------------------------------------------------------------------- 1 | export const format = (date: Date, locale = 'default', options?: Intl.DateTimeFormatOptions): string => { 2 | return Intl.DateTimeFormat(locale, options).format(date); 3 | }; 4 | -------------------------------------------------------------------------------- /packages/components/format-date/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/format-number/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/format-number.js'; 2 | -------------------------------------------------------------------------------- /packages/components/format-number/register.ts: -------------------------------------------------------------------------------- 1 | import { FormatNumber } from './src/format-number.js'; 2 | 3 | customElements.define('sl-format-number', FormatNumber); 4 | -------------------------------------------------------------------------------- /packages/components/format-number/src/format.ts: -------------------------------------------------------------------------------- 1 | export const format = (value: number, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string => { 2 | return new Intl.NumberFormat(locale, options).format(value); 3 | }; 4 | -------------------------------------------------------------------------------- /packages/components/format-number/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/grid/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/column.js'; 2 | export * from './src/column-group.js'; 3 | export * from './src/drag-handle-column.js'; 4 | export * from './src/filter-column.js'; 5 | export * from './src/grid.js'; 6 | export * from './src/select-column.js'; 7 | export * from './src/selection-column.js'; 8 | export * from './src/sort-column.js'; 9 | export * from './src/text-field-column.js'; 10 | -------------------------------------------------------------------------------- /packages/components/grid/src/filter.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | display: flex; 4 | font-weight: var(--sl-text-typeset-fontWeight-regular); 5 | gap: var(--sl-size-100); 6 | inline-size: 100%; 7 | min-inline-size: 0; 8 | padding: var(--sl-size-075) var(--sl-size-150); 9 | } 10 | 11 | sl-search-field, 12 | sl-select { 13 | inline-size: 100%; 14 | min-inline-size: 0; 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/grid/src/sorter.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | display: flex; 4 | flex: 1; 5 | gap: var(--sl-size-100); 6 | padding: var(--sl-size-150); 7 | } 8 | 9 | slot { 10 | font-weight: var(--sl-text-typeset-fontWeight-demibold); 11 | } 12 | 13 | sl-button { 14 | margin-inline-start: auto; 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/grid/src/stories/story-utils.ts: -------------------------------------------------------------------------------- 1 | import { type Student } from '@sl-design-system/example-data'; 2 | import { html } from 'lit'; 3 | import { type GridColumnDataRenderer } from '../column.js'; 4 | 5 | export const avatarRenderer: GridColumnDataRenderer = ({ firstName, infix, lastName, pictureUrl }) => { 6 | return html` 7 | 12 | `; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/components/grid/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { type Grid } from './grid.js'; 2 | 3 | export function waitForGridToRenderData(grid: Grid): Promise { 4 | return new Promise(resolve => { 5 | const checkForTd = () => { 6 | if (grid.renderRoot.querySelector('td')) { 7 | resolve(); 8 | } else { 9 | setTimeout(checkForTd, 10); 10 | } 11 | }; 12 | 13 | checkForTd(); 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /packages/components/grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/icon.js'; 2 | export * from './src/models.js'; 3 | -------------------------------------------------------------------------------- /packages/components/icon/register.ts: -------------------------------------------------------------------------------- 1 | import { Icon } from './src/icon.js'; 2 | 3 | customElements.define('sl-icon', Icon); 4 | -------------------------------------------------------------------------------- /packages/components/icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/inline-message/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/inline-message.js'; 2 | -------------------------------------------------------------------------------- /packages/components/inline-message/register.ts: -------------------------------------------------------------------------------- 1 | import { InlineMessage } from './src/inline-message.js'; 2 | 3 | customElements.define('sl-inline-message', InlineMessage); 4 | -------------------------------------------------------------------------------- /packages/components/inline-message/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/listbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/listbox.js'; 2 | export * from './src/option.js'; 3 | export * from './src/option-group.js'; 4 | export * from './src/option-group-header.js'; 5 | -------------------------------------------------------------------------------- /packages/components/listbox/register.ts: -------------------------------------------------------------------------------- 1 | import { Listbox } from './src/listbox.js'; 2 | import { OptionGroup } from './src/option-group.js'; 3 | import { Option } from './src/option.js'; 4 | 5 | customElements.define('sl-listbox', Listbox); 6 | customElements.define('sl-option-group', OptionGroup); 7 | customElements.define('sl-option', Option); 8 | -------------------------------------------------------------------------------- /packages/components/listbox/src/listbox.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: stretch; 3 | contain: layout paint style; 4 | display: flex; 5 | flex-direction: column; 6 | gap: var(--sl-size-025); 7 | overflow: auto; 8 | padding: var(--sl-size-100) 0; 9 | scroll-padding-block: var(--sl-size-100); 10 | scrollbar-width: thin; 11 | } 12 | 13 | ::slotted(hr) { 14 | border: 0; 15 | border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default); 16 | margin: var(--sl-size-075) 0; 17 | padding: 0; 18 | } 19 | -------------------------------------------------------------------------------- /packages/components/listbox/src/option-group-header.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | color: var(--sl-color-foreground-subtlest); 3 | display: block; 4 | inline-size: 100%; 5 | } 6 | 7 | .wrapper { 8 | padding: var(--sl-size-075); 9 | padding-inline-start: var(--sl-size-300); 10 | } 11 | 12 | .divider { 13 | border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default); 14 | margin-block-start: var(--sl-size-100); 15 | padding-block-start: var(--sl-size-100); 16 | } 17 | -------------------------------------------------------------------------------- /packages/components/listbox/src/option-group.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex: 1; 4 | inline-size: 100%; 5 | } 6 | 7 | :host(:not(:first-of-type)) { 8 | border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default); 9 | margin-block-start: var(--sl-size-075); 10 | padding-block-start: var(--sl-size-100); 11 | } 12 | 13 | ::slotted(sl-option:first-of-type) { 14 | margin-block-start: var(--sl-size-025); 15 | } 16 | 17 | [part='wrapper'] { 18 | flex: 1; 19 | } 20 | -------------------------------------------------------------------------------- /packages/components/listbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/menu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/menu.js'; 2 | export * from './src/menu-button.js'; 3 | export * from './src/menu-item.js'; 4 | export * from './src/menu-item-group.js'; 5 | -------------------------------------------------------------------------------- /packages/components/menu/register.ts: -------------------------------------------------------------------------------- 1 | import { MenuButton } from './src/menu-button.js'; 2 | import { MenuItemGroup } from './src/menu-item-group.js'; 3 | import { MenuItem } from './src/menu-item.js'; 4 | import { Menu } from './src/menu.js'; 5 | 6 | customElements.define('sl-menu', Menu); 7 | customElements.define('sl-menu-button', MenuButton); 8 | customElements.define('sl-menu-item', MenuItem); 9 | customElements.define('sl-menu-item-group', MenuItemGroup); 10 | -------------------------------------------------------------------------------- /packages/components/menu/src/menu-button.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-flex; 3 | } 4 | 5 | // Workaround for sl-menu-item-group being the first child in this slot, 6 | // but *NOT* being the first child in the light DOM. 7 | sl-menu slot::slotted(:nth-child(1 of :not([slot]))) { 8 | border-block-start: 0; 9 | margin-block-start: 0; 10 | padding-block-start: 0; 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/menu/src/menu-item-group.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex: 1; 4 | } 5 | 6 | [part='wrapper'] { 7 | display: flex; 8 | flex: 1; 9 | flex-direction: column; 10 | gap: var(--sl-space-new-2xs); 11 | margin-inline: var(--sl-space-new-md); 12 | } 13 | 14 | slot[name='header'] .heading, 15 | slot[name='header']::slotted(*) { 16 | color: var(--sl-color-foreground-subtlest); 17 | padding: var(--sl-space-new-md); 18 | padding-inline-start: calc( 19 | var(--sl-menu-item-indent, 0) * (var(--sl-size-icon-sm) + var(--sl-space-new-md)) + var(--sl-space-new-md) 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/components/menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/message-dialog/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/message-dialog.js'; 2 | -------------------------------------------------------------------------------- /packages/components/message-dialog/register.ts: -------------------------------------------------------------------------------- 1 | import { MessageDialog } from './src/message-dialog.js'; 2 | 3 | customElements.define('sl-message-dialog', MessageDialog); 4 | -------------------------------------------------------------------------------- /packages/components/message-dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/number-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/number-field.js'; 2 | -------------------------------------------------------------------------------- /packages/components/number-field/register.ts: -------------------------------------------------------------------------------- 1 | import { NumberField } from './src/number-field.js'; 2 | 3 | customElements.define('sl-number-field', NumberField); 4 | -------------------------------------------------------------------------------- /packages/components/number-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/paginator/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/paginator.js'; 2 | export * from './src/page-size.js'; 3 | export * from './src/status.js'; 4 | -------------------------------------------------------------------------------- /packages/components/paginator/register.ts: -------------------------------------------------------------------------------- 1 | import { PaginatorPageSize } from './src/page-size.js'; 2 | import { Paginator } from './src/paginator.js'; 3 | import { PaginatorStatus } from './src/status.js'; 4 | 5 | customElements.define('sl-paginator', Paginator); 6 | customElements.define('sl-paginator-page-size', PaginatorPageSize); 7 | customElements.define('sl-paginator-status', PaginatorStatus); 8 | -------------------------------------------------------------------------------- /packages/components/paginator/src/page-size.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: center; 3 | color: var(--sl-color-foreground-plain); 4 | display: flex; 5 | flex-wrap: wrap; 6 | gap: var(--sl-size-100); 7 | text-wrap: nowrap; 8 | } 9 | 10 | sl-select { 11 | min-inline-size: var(--sl-size-1000); 12 | } 13 | 14 | sl-label label { 15 | font: inherit; 16 | font-weight: var(--sl-text-typeset-fontWeight-regular); 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/paginator/src/status.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | color: var(--sl-color-foreground-plain); 3 | display: block; 4 | font: inherit; 5 | padding: 0; 6 | text-wrap: nowrap; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/paginator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/panel/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/panel.js'; 2 | -------------------------------------------------------------------------------- /packages/components/panel/register.ts: -------------------------------------------------------------------------------- 1 | import { Panel } from './src/panel.js'; 2 | 3 | customElements.define('sl-panel', Panel); 4 | -------------------------------------------------------------------------------- /packages/components/panel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/popover.js'; 2 | -------------------------------------------------------------------------------- /packages/components/popover/register.ts: -------------------------------------------------------------------------------- 1 | import { Popover } from './src/popover.js'; 2 | 3 | customElements.define('sl-popover', Popover); 4 | -------------------------------------------------------------------------------- /packages/components/popover/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/progress-bar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/progress-bar.js'; 2 | -------------------------------------------------------------------------------- /packages/components/progress-bar/register.ts: -------------------------------------------------------------------------------- 1 | import { ProgressBar } from './src/progress-bar.js'; 2 | 3 | customElements.define('sl-progress-bar', ProgressBar); 4 | -------------------------------------------------------------------------------- /packages/components/progress-bar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/radio-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/radio.js'; 2 | export * from './src/radio-group.js'; 3 | -------------------------------------------------------------------------------- /packages/components/radio-group/register.ts: -------------------------------------------------------------------------------- 1 | import { RadioGroup } from './src/radio-group.js'; 2 | import { Radio } from './src/radio.js'; 3 | 4 | customElements.define('sl-radio', Radio); 5 | customElements.define('sl-radio-group', RadioGroup); 6 | -------------------------------------------------------------------------------- /packages/components/radio-group/src/radio-group.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-items: start; 3 | display: flex; 4 | flex-direction: column; 5 | gap: var(--sl-size-050); 6 | vertical-align: top; 7 | } 8 | 9 | :host([horizontal]) { 10 | flex-direction: row; 11 | gap: var(--sl-size-300); 12 | } 13 | -------------------------------------------------------------------------------- /packages/components/radio-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/scrollbar.js'; 2 | -------------------------------------------------------------------------------- /packages/components/scrollbar/register.ts: -------------------------------------------------------------------------------- 1 | import { Scrollbar } from './src/scrollbar.js'; 2 | 3 | customElements.define('sl-scrollbar', Scrollbar); 4 | -------------------------------------------------------------------------------- /packages/components/scrollbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/search-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/search-field.js'; 2 | -------------------------------------------------------------------------------- /packages/components/search-field/register.ts: -------------------------------------------------------------------------------- 1 | import { SearchField } from './src/search-field.js'; 2 | 3 | customElements.define('sl-search-field', SearchField); 4 | -------------------------------------------------------------------------------- /packages/components/search-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/select.js'; 2 | -------------------------------------------------------------------------------- /packages/components/select/register.ts: -------------------------------------------------------------------------------- 1 | import { Select } from './src/select.js'; 2 | 3 | customElements.define('sl-select', Select); 4 | -------------------------------------------------------------------------------- /packages/components/select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/shared/src/breakpoints.scss: -------------------------------------------------------------------------------- 1 | $md-breakpoint: 600px; 2 | -------------------------------------------------------------------------------- /packages/components/shared/src/browser.ts: -------------------------------------------------------------------------------- 1 | const testUserAgent = (regexp: RegExp): boolean => regexp.test(navigator.userAgent); 2 | 3 | export const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i); 4 | -------------------------------------------------------------------------------- /packages/components/shared/src/converters.ts: -------------------------------------------------------------------------------- 1 | export * from './converters/date.js'; 2 | -------------------------------------------------------------------------------- /packages/components/shared/src/converters/date.ts: -------------------------------------------------------------------------------- 1 | export const dateConverter = { 2 | fromAttribute: (value: string): Date | undefined => { 3 | const date = Date.parse(value); 4 | 5 | return isNaN(date) ? undefined : new Date(date); 6 | }, 7 | toAttribute: (value: Date | undefined): string => { 8 | return value ? value.toISOString() : ''; 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /packages/components/shared/src/css.ts: -------------------------------------------------------------------------------- 1 | import breakpoints from './breakpoints.scss.js'; 2 | 3 | export { breakpoints }; 4 | 5 | export const firstFocusableSelector = 6 | 'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [focusable]:not([tabindex="-1"])'; 7 | -------------------------------------------------------------------------------- /packages/components/shared/src/events.ts: -------------------------------------------------------------------------------- 1 | export type { SlBlurEvent } from './events/blur.js'; 2 | export type { SlCancelEvent } from './events/cancel.js'; 3 | export type { SlChangeEvent } from './events/change.js'; 4 | export type { SlClearEvent } from './events/clear.js'; 5 | export type { SlFocusEvent } from './events/focus.js'; 6 | export type { SlSelectEvent } from './events/select.js'; 7 | export type { SlToggleEvent } from './events/toggle.js'; 8 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/blur.ts: -------------------------------------------------------------------------------- 1 | export type SlBlurEvent = CustomEvent; 2 | 3 | declare global { 4 | interface GlobalEventHandlersEventMap { 5 | 'sl-blur': SlBlurEvent; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/cancel.ts: -------------------------------------------------------------------------------- 1 | export type SlCancelEvent = CustomEvent; 2 | 3 | declare global { 4 | interface GlobalEventHandlersEventMap { 5 | 'sl-cancel': SlCancelEvent; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/change.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 2 | export type SlChangeEvent = CustomEvent; 3 | 4 | declare global { 5 | interface GlobalEventHandlersEventMap { 6 | 'sl-change': SlChangeEvent; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/clear.ts: -------------------------------------------------------------------------------- 1 | export type SlClearEvent = CustomEvent; 2 | 3 | declare global { 4 | interface GlobalEventHandlersEventMap { 5 | 'sl-clear': SlClearEvent; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/focus.ts: -------------------------------------------------------------------------------- 1 | export type SlFocusEvent = CustomEvent; 2 | 3 | declare global { 4 | interface GlobalEventHandlersEventMap { 5 | 'sl-focus': SlFocusEvent; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/select.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 2 | export type SlSelectEvent = CustomEvent; 3 | 4 | declare global { 5 | interface GlobalEventHandlersEventMap { 6 | 'sl-select': SlSelectEvent; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/shared/src/events/toggle.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 2 | export type SlToggleEvent = CustomEvent; 3 | 4 | declare global { 5 | interface GlobalEventHandlersEventMap { 6 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 7 | 'sl-toggle': SlToggleEvent; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/components/shared/src/mixins.ts: -------------------------------------------------------------------------------- 1 | export { type Locale, LocaleMixin } from './mixins/locale-mixin.js'; 2 | export { type ObserveAttributesMixinInterface, ObserveAttributesMixin } from './mixins/observe-attributes-mixin.js'; 3 | -------------------------------------------------------------------------------- /packages/components/shared/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/skeleton.js'; 2 | -------------------------------------------------------------------------------- /packages/components/skeleton/register.ts: -------------------------------------------------------------------------------- 1 | import { Skeleton } from './src/skeleton.js'; 2 | 3 | customElements.define('sl-skeleton', Skeleton); 4 | -------------------------------------------------------------------------------- /packages/components/skeleton/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/spinner.js'; 2 | -------------------------------------------------------------------------------- /packages/components/spinner/register.ts: -------------------------------------------------------------------------------- 1 | import { Spinner } from './src/spinner.js'; 2 | 3 | customElements.define('sl-spinner', Spinner); 4 | -------------------------------------------------------------------------------- /packages/components/spinner/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/stylelint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '@sl-design-system/stylelint-config'; 2 | 3 | export default { 4 | ...config, 5 | overrides: [ 6 | ...config.overrides, 7 | { 8 | files: ['**/*.scss'], 9 | rules: { 10 | 'custom-property-pattern': [ 11 | '((_[a-z]+)|sl)(-[a-z]+)*', 12 | { 13 | message: 'Expected --sl or --_ custom property prefix' 14 | } 15 | ] 16 | } 17 | } 18 | ] 19 | }; 20 | -------------------------------------------------------------------------------- /packages/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/switch.js'; 2 | -------------------------------------------------------------------------------- /packages/components/switch/register.ts: -------------------------------------------------------------------------------- 1 | import { Switch } from './src/switch.js'; 2 | 3 | customElements.define('sl-switch', Switch); 4 | -------------------------------------------------------------------------------- /packages/components/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tab-group.js'; 2 | export * from './src/tab-panel.js'; 3 | export * from './src/tab.js'; 4 | -------------------------------------------------------------------------------- /packages/components/tabs/register.ts: -------------------------------------------------------------------------------- 1 | import { TabGroup } from './src/tab-group.js'; 2 | import { TabPanel } from './src/tab-panel.js'; 3 | import { Tab } from './src/tab.js'; 4 | 5 | customElements.define('sl-tab', Tab); 6 | customElements.define('sl-tab-group', TabGroup); 7 | customElements.define('sl-tab-panel', TabPanel); 8 | -------------------------------------------------------------------------------- /packages/components/tabs/src/tab-panel.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | :host([aria-hidden='true']) { 6 | display: none; 7 | pointer-events: none; 8 | } 9 | -------------------------------------------------------------------------------- /packages/components/tabs/src/tab-panel.spec.ts: -------------------------------------------------------------------------------- 1 | import { expect, fixture } from '@open-wc/testing'; 2 | import { html } from 'lit'; 3 | import '../register.js'; 4 | import { TabPanel } from './tab-panel.js'; 5 | 6 | describe('sl-tab-panel', () => { 7 | let el: TabPanel; 8 | 9 | beforeEach(async () => { 10 | el = await fixture(html``); 11 | }); 12 | 13 | it('should have a tabpanel role', () => { 14 | expect(el).to.have.attribute('role', 'tabpanel'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /packages/components/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tag.js'; 2 | export * from './src/tag-list.js'; 3 | -------------------------------------------------------------------------------- /packages/components/tag/register.ts: -------------------------------------------------------------------------------- 1 | import { TagList } from './src/tag-list.js'; 2 | import { Tag } from './src/tag.js'; 3 | 4 | customElements.define('sl-tag-list', TagList); 5 | customElements.define('sl-tag', Tag); 6 | -------------------------------------------------------------------------------- /packages/components/tag/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/text-area/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/text-area.js'; 2 | -------------------------------------------------------------------------------- /packages/components/text-area/register.ts: -------------------------------------------------------------------------------- 1 | import { TextArea } from './src/text-area.js'; 2 | 3 | customElements.define('sl-text-area', TextArea); 4 | -------------------------------------------------------------------------------- /packages/components/text-area/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/text-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/field-button.js'; 2 | export * from './src/text-field.js'; 3 | -------------------------------------------------------------------------------- /packages/components/text-field/register.ts: -------------------------------------------------------------------------------- 1 | import { FieldButton } from './src/field-button.js'; 2 | import { TextField } from './src/text-field.js'; 3 | 4 | customElements.define('sl-field-button', FieldButton); 5 | customElements.define('sl-text-field', TextField); 6 | -------------------------------------------------------------------------------- /packages/components/text-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/toggle-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/toggle-button.js'; 2 | -------------------------------------------------------------------------------- /packages/components/toggle-button/register.ts: -------------------------------------------------------------------------------- 1 | import { ToggleButton } from './src/toggle-button.js'; 2 | 3 | customElements.define('sl-toggle-button', ToggleButton); 4 | -------------------------------------------------------------------------------- /packages/components/toggle-button/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/toggle-group/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/toggle-group.js'; 2 | -------------------------------------------------------------------------------- /packages/components/toggle-group/register.ts: -------------------------------------------------------------------------------- 1 | import { ToggleGroup } from './src/toggle-group.js'; 2 | 3 | customElements.define('sl-toggle-group', ToggleGroup); 4 | -------------------------------------------------------------------------------- /packages/components/toggle-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tool-bar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tool-bar.js'; 2 | export * from './src/tool-bar-divider.js'; 3 | -------------------------------------------------------------------------------- /packages/components/tool-bar/register.ts: -------------------------------------------------------------------------------- 1 | import { ToolBarDivider } from './src/tool-bar-divider.js'; 2 | import { ToolBar } from './src/tool-bar.js'; 3 | 4 | customElements.define('sl-tool-bar', ToolBar); 5 | customElements.define('sl-tool-bar-divider', ToolBarDivider); 6 | -------------------------------------------------------------------------------- /packages/components/tool-bar/src/tool-bar-divider.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | align-self: stretch; 3 | background: var(--sl-color-palette-neutral-200); 4 | display: inline-flex; 5 | flex-shrink: 0; 6 | inline-size: 1px; 7 | } 8 | -------------------------------------------------------------------------------- /packages/components/tool-bar/src/tool-bar-divider.ts: -------------------------------------------------------------------------------- 1 | import { type CSSResultGroup, LitElement } from 'lit'; 2 | import styles from './tool-bar-divider.scss.js'; 3 | 4 | declare global { 5 | interface HTMLElementTagNameMap { 6 | 'sl-tool-bar-divider': ToolBarDivider; 7 | } 8 | } 9 | 10 | export class ToolBarDivider extends LitElement { 11 | /** @internal */ 12 | static override styles: CSSResultGroup = styles; 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/tool-bar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/tooltip.js'; 2 | export * from './src/tooltip-directive.js'; 3 | -------------------------------------------------------------------------------- /packages/components/tooltip/register.ts: -------------------------------------------------------------------------------- 1 | import { Tooltip } from './src/tooltip.js'; 2 | 3 | customElements.define('sl-tooltip', Tooltip); 4 | -------------------------------------------------------------------------------- /packages/components/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tree/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/flat-tree-data-source.js'; 2 | export * from './src/nested-tree-data-source.js'; 3 | export * from './src/tree-data-source.js'; 4 | export * from './src/tree.js'; 5 | -------------------------------------------------------------------------------- /packages/components/tree/register.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from './src/tree.js'; 2 | 3 | customElements.define('sl-tree', Tree); 4 | -------------------------------------------------------------------------------- /packages/components/tree/src/tree.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | scroll-padding-block: var(--sl-size-100); 4 | } 5 | -------------------------------------------------------------------------------- /packages/components/tree/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "." 6 | }, 7 | "include": ["**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/locales/index.ts: -------------------------------------------------------------------------------- 1 | export * from './src/locale-codes.js'; 2 | export * as nl from './src/nl.js'; 3 | -------------------------------------------------------------------------------- /packages/locales/src/locale-codes.ts: -------------------------------------------------------------------------------- 1 | // Do not modify this file by hand! 2 | // Re-generate this file by running lit-localize. 3 | 4 | /** 5 | * The locale code that templates in this source code are written in. 6 | */ 7 | export const sourceLocale = 'en'; 8 | 9 | /** 10 | * The other locale codes that this application is localized into. Sorted 11 | * lexicographically. 12 | */ 13 | export const targetLocales = ['nl'] as const; 14 | 15 | /** 16 | * All valid project locale codes. Sorted lexicographically. 17 | */ 18 | export const allLocales = ['en', 'nl'] as const; 19 | -------------------------------------------------------------------------------- /packages/locales/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["index.ts", "register.ts", "src/**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/bingel-dc/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/bingel-dc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/bingel-int/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/bingel-int/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/clickedu/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: space-grotesk; 3 | font-weight: 400; 4 | src: url('./fonts/space-grotesk-regular.woff2') format('woff2'); 5 | } 6 | 7 | @font-face { 8 | font-family: space-grotesk; 9 | font-weight: 500; 10 | src: url('./fonts/space-grotesk-medium.woff2') format('woff2'); 11 | } 12 | 13 | @font-face { 14 | font-family: space-grotesk; 15 | font-weight: 700; 16 | src: url('./fonts/space-grotesk-bold.woff2') format('woff2'); 17 | } 18 | -------------------------------------------------------------------------------- /packages/themes/clickedu/fonts/space-grotesk-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/clickedu/fonts/space-grotesk-bold.woff2 -------------------------------------------------------------------------------- /packages/themes/clickedu/fonts/space-grotesk-light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/clickedu/fonts/space-grotesk-light.woff2 -------------------------------------------------------------------------------- /packages/themes/clickedu/fonts/space-grotesk-medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/clickedu/fonts/space-grotesk-medium.woff2 -------------------------------------------------------------------------------- /packages/themes/clickedu/fonts/space-grotesk-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/clickedu/fonts/space-grotesk-regular.woff2 -------------------------------------------------------------------------------- /packages/themes/clickedu/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/clickedu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/core/icons/badge-available.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/badge-away.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/badge-donotdisturb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/badge-offline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/ellipsis-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/info.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/sort-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/sort-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/sort.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/core/icons/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/editorial-suite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '../../eslint.config.mjs'; 2 | 3 | /** 4 | * NOTE: All paths are relative to where eslint is run from, 5 | * in our case the root of the monorepo. 6 | */ 7 | export default [ 8 | { 9 | ignores: [ 10 | 'packages/themes/**/*.d.ts', 11 | 'packages/themes/core**/*' 12 | ] 13 | }, 14 | ...config, 15 | { 16 | languageOptions: { 17 | parserOptions: { 18 | project: 'packages/components/tsconfig.json' 19 | } 20 | } 21 | } 22 | ]; 23 | -------------------------------------------------------------------------------- /packages/themes/itslearning/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/itslearning/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/kampus/icons/applets.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/book-loader.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/content-has-audio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/content-has-video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/lab-work.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/programs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/teachers-view.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/toc-collapse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/icons/toc-expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/kampus/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/kampus/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/magister/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/magister/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/max/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/max/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/my-digital-book/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: the-message; 3 | font-weight: 400; 4 | src: url('./fonts/the_message-regular.woff2') format('woff2'); 5 | } 6 | 7 | @font-face { 8 | font-family: the-message; 9 | font-weight: 600; 10 | src: url('./fonts/the_message-demibold.woff2') format('woff2'); 11 | } 12 | 13 | @font-face { 14 | font-family: the-message; 15 | font-weight: 700; 16 | src: url('./fonts/the_message-bold.woff2') format('woff2'); 17 | } 18 | -------------------------------------------------------------------------------- /packages/themes/my-digital-book/fonts/the_message-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/my-digital-book/fonts/the_message-bold.woff2 -------------------------------------------------------------------------------- /packages/themes/my-digital-book/fonts/the_message-demibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/my-digital-book/fonts/the_message-demibold.woff2 -------------------------------------------------------------------------------- /packages/themes/my-digital-book/fonts/the_message-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/my-digital-book/fonts/the_message-regular.woff2 -------------------------------------------------------------------------------- /packages/themes/my-digital-book/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/my-digital-book/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/myvanin_onhold/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/myvanin_onhold/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/neon/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: the-message; 3 | font-weight: 400; 4 | src: url('./fonts/the_message-regular.woff2') format('woff2'); 5 | } 6 | 7 | @font-face { 8 | font-family: the-message; 9 | font-weight: 600; 10 | src: url('./fonts/the_message-demibold.woff2') format('woff2'); 11 | } 12 | 13 | @font-face { 14 | font-family: the-message; 15 | font-weight: 700; 16 | src: url('./fonts/the_message-bold.woff2') format('woff2'); 17 | } 18 | -------------------------------------------------------------------------------- /packages/themes/neon/fonts/the_message-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/neon/fonts/the_message-bold.woff2 -------------------------------------------------------------------------------- /packages/themes/neon/fonts/the_message-demibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/neon/fonts/the_message-demibold.woff2 -------------------------------------------------------------------------------- /packages/themes/neon/fonts/the_message-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/neon/fonts/the_message-regular.woff2 -------------------------------------------------------------------------------- /packages/themes/neon/index.ts: -------------------------------------------------------------------------------- 1 | import type { IconLibrary } from '@sl-design-system/icon'; 2 | import { Icon } from '@sl-design-system/icon'; 3 | import { icons } from './icons.js'; 4 | 5 | /** 6 | * initializes all necessary things to load your theme, 7 | * like icons, ... 8 | */ 9 | export const setup = (): void => { 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/neon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: the-message; 3 | font-weight: 400; 4 | src: url('./fonts/the_message-regular.woff2') format('woff2'); 5 | } 6 | 7 | @font-face { 8 | font-family: the-message; 9 | font-weight: 600; 10 | src: url('./fonts/the_message-demibold.woff2') format('woff2'); 11 | } 12 | 13 | @font-face { 14 | font-family: the-message; 15 | font-weight: 700; 16 | src: url('./fonts/the_message-bold.woff2') format('woff2'); 17 | } 18 | -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/fonts/the_message-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/sanoma-learning/fonts/the_message-bold.woff2 -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/fonts/the_message-demibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/sanoma-learning/fonts/the_message-demibold.woff2 -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/fonts/the_message-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/packages/themes/sanoma-learning/fonts/the_message-regular.woff2 -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/icons/ellipsis-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/themes/sanoma-learning/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/sanoma-utbildning_onhold/index.ts: -------------------------------------------------------------------------------- 1 | import { Icon, type IconLibrary } from '@sl-design-system/icon'; 2 | import { icons } from './icons.js'; 3 | 4 | /** 5 | * initializes all necessary things to load your theme, 6 | * like icons, ... 7 | */ 8 | export const setup = (): void => { 9 | console.log('register Icons'); 10 | Icon.register(icons as IconLibrary); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/themes/sanoma-utbildning_onhold/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/themes/stylelint.config.mjs: -------------------------------------------------------------------------------- 1 | import config from '@sl-design-system/stylelint-config'; 2 | 3 | export default { 4 | ...config, 5 | rules: { 6 | ...config.rules, 7 | 'block-no-empty': null, 8 | 'color-no-hex': null, 9 | 'custom-property-pattern': [ 10 | 'sl-[a-z][a-zA-Z]*(-[a-z][a-zA-Z]*)*', 11 | { 12 | message: 'Expected custom property names to match --sl(-snakeCase)+' 13 | } 14 | ], 15 | 'font-family-no-missing-generic-family-keyword': null, 16 | 'no-unknown-custom-properties': true 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /packages/themes/teas/index.ts: -------------------------------------------------------------------------------- 1 | import { Icon, type IconLibrary } from '@sl-design-system/icon'; 2 | import { icons } from './icons.js'; 3 | 4 | // export const setup = (): void => { 5 | // 1. Add typekit url to `` 6 | // 2. Add theme icons 7 | // 3. Load the base stylesheet/css variables 8 | // 4. Start using the SLDS in your application 9 | // }; 10 | 11 | /** 12 | * initializes all necessary things to load your theme, 13 | * like icons, ... 14 | */ 15 | export const setup = (): void => { 16 | Icon.register(icons as IconLibrary); 17 | }; 18 | -------------------------------------------------------------------------------- /packages/themes/teas/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "./" 6 | }, 7 | "include": ["*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/themes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "." 6 | }, 7 | "include": ["**/*.ts"] 8 | } -------------------------------------------------------------------------------- /packages/tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sl-design-system/tokens", 3 | "description": "Design tokens for the SL Design System", 4 | "version": "0.0.0", 5 | "private": true, 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/sl-design-system/components.git", 9 | "directory": "packages/tokens" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/tokens/src/device/desktop.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /packages/tokens/src/device/digiboard.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /packages/tokens/src/device/mobile.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /packages/tokens/src/device/tablet.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /scripts/setup-themes.js: -------------------------------------------------------------------------------- 1 | import fg from 'fast-glob'; 2 | import {cp} from 'fs'; 3 | import { join } from 'path'; 4 | 5 | const cwd = new URL('.', import.meta.url).pathname; 6 | 7 | const setupTheme = (theme) => { 8 | const source = join(cwd, '../packages/themes/core/global.css'); 9 | const destination = join(cwd, `${theme}/global.css`); 10 | cp(source, destination,() => console.log(`${theme} done`)); 11 | 12 | } 13 | 14 | const setupAllThemes = async () => { 15 | const themes = (await fg('../packages/themes/*', { cwd, onlyDirectories: true })).filter(theme => theme.indexOf('core') < 0); 16 | 17 | themes.forEach(component => setupTheme(component)); 18 | }; 19 | 20 | setupAllThemes(); 21 | -------------------------------------------------------------------------------- /tools/eslint-config/README.md: -------------------------------------------------------------------------------- 1 | # @sl-design-system/eslint-config 2 | 3 | This package provides a shared ESLint configuration for SL Design System projects. 4 | -------------------------------------------------------------------------------- /tools/example-data/index.js: -------------------------------------------------------------------------------- 1 | export * from './data-service.js'; 2 | -------------------------------------------------------------------------------- /tools/example-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@sl-design-system/example-data", 3 | "version": "1.0.0", 4 | "description": "Example data for the SL Design System", 5 | "license": "Apache 2.0", 6 | "private": true, 7 | "type": "module", 8 | "main": "./index.js", 9 | "module": "./index.js", 10 | "types": "./index.d.ts", 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tools/stylelint-config/README.md: -------------------------------------------------------------------------------- 1 | # @sl-design-system/stylelint-config 2 | 3 | This package provides a Stylelint configuration for the SL Design System. 4 | -------------------------------------------------------------------------------- /tools/theme-selector-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | *.gz 2 | -------------------------------------------------------------------------------- /tools/theme-selector-plugin/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SLDS Theme Selector", 3 | "id": "1492071035666881902", 4 | "api": "1.0.0", 5 | "main": "dist/code.js", 6 | "capabilities": [], 7 | "enableProposedApi": false, 8 | "documentAccess": "dynamic-page", 9 | "editorType": [ 10 | "figma" 11 | ], 12 | "permissions": ["teamlibrary"], 13 | "ui": "src/ui.html", 14 | "networkAccess": { 15 | "allowedDomains": [ 16 | "none" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tools/theme-selector-plugin/src/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/tools/theme-selector-plugin/src/cover.png -------------------------------------------------------------------------------- /tools/theme-selector-plugin/src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/tools/theme-selector-plugin/src/favicon.png -------------------------------------------------------------------------------- /tools/theme-selector-plugin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "src", 6 | "emitDeclarationOnly": false, 7 | "outDir": "dist", 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /website/.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | dist 3 | node_modules 4 | custom-elements-manifest.config.js 5 | -------------------------------------------------------------------------------- /website/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parserOptions: { 3 | tsconfigRootDir: __dirname, 4 | project: [ 5 | 'tsconfig.json' 6 | ] 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /website/.prettierignore: -------------------------------------------------------------------------------- 1 | **/assets 2 | 3 | # Ignore all MD files: 4 | *.md 5 | 6 | # Ignore all njk files 7 | *.njk 8 | -------------------------------------------------------------------------------- /website/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.stylelintrc.mjs", 3 | "plugins": [ 4 | "stylelint-prettier" 5 | ], 6 | "rules": { 7 | "prettier/prettier": true, 8 | "selector-class-pattern": [ 9 | "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$", 10 | { 11 | "message": "Class names should match the SUIT CSS naming convention" 12 | } 13 | ], 14 | "custom-property-pattern": [ 15 | "(-[a-z]+)*", 16 | { 17 | "message": "Expected kebab case for custom properties" 18 | } 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /website/ds_11ty_docs.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /website/src/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base.njk 3 | permalink: 404.html 4 | templateEngineOverride: html 5 | eleventyExcludeFromCollections: true 6 | --- 7 | # 404 - Page Not found! 8 | 9 | We couldn’t find the content you were looking for. 10 | -------------------------------------------------------------------------------- /website/src/_includes/404.njk: -------------------------------------------------------------------------------- 1 |
{{ content | safe }}
2 | -------------------------------------------------------------------------------- /website/src/_includes/categories/getting-started.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base.njk 3 | --- 4 | 5 |
6 |
7 |

{{title}}

8 |

9 | {{description}} 10 |

11 |
12 |
13 |
14 |
15 | {{ content | safe }} 16 |
17 | 18 |
19 | -------------------------------------------------------------------------------- /website/src/_includes/search.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 |
    4 | 5 |
    6 |

    No results found.

    7 |
    8 | -------------------------------------------------------------------------------- /website/src/_includes/theme-switch.js: -------------------------------------------------------------------------------- 1 | function isLight() { 2 | return localStorage.getItem('light-mode'); 3 | } 4 | 5 | function toggleLightClass() { 6 | document.querySelector(':root').classList.toggle('light'); 7 | } 8 | 9 | function toggleLocalStorageItem() { 10 | if (isLight()) { 11 | localStorage.removeItem('light-mode'); 12 | } else { 13 | localStorage.setItem('light-mode', 'set'); 14 | } 15 | } 16 | 17 | if (isLight()) { 18 | toggleLightClass(); 19 | } 20 | 21 | document.querySelector('.ds-theme-icon').addEventListener('click', () => { 22 | toggleLocalStorageItem(); 23 | toggleLightClass(); 24 | }); 25 | -------------------------------------------------------------------------------- /website/src/_includes/theme-switch.njk: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 | -------------------------------------------------------------------------------- /website/src/assets/favicon/sl-favicon-16-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/favicon/sl-favicon-16-black.png -------------------------------------------------------------------------------- /website/src/assets/favicon/sl-favicon-16-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/favicon/sl-favicon-16-white.png -------------------------------------------------------------------------------- /website/src/assets/favicon/sl-favicon-32-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/favicon/sl-favicon-32-black.png -------------------------------------------------------------------------------- /website/src/assets/favicon/sl-favicon-32-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/favicon/sl-favicon-32-white.png -------------------------------------------------------------------------------- /website/src/assets/fonts/the-message-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/fonts/the-message-bold.woff2 -------------------------------------------------------------------------------- /website/src/assets/fonts/the-message-demibold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/fonts/the-message-demibold.woff2 -------------------------------------------------------------------------------- /website/src/assets/fonts/the-message-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/fonts/the-message-regular.woff2 -------------------------------------------------------------------------------- /website/src/assets/icons/angle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/angle-right-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/angle-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/bootstrap-icons/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/check-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/chevron-right-dark-lighter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/chevron-right-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/chevron-right-darker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/hamburger-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/hamburger.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/search-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /website/src/assets/images/components/avatar/toa-heftiba-ANNsvl-6AG0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/components/avatar/toa-heftiba-ANNsvl-6AG0-unsplash.jpg -------------------------------------------------------------------------------- /website/src/assets/images/components/avatar/xia-yang-AGGA9LH3FLo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/components/avatar/xia-yang-AGGA9LH3FLo-unsplash.jpg -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-anatomy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-clickable-area.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-exclusive-selection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-focusable-area.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-overflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-behavior-validation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-figma-options.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-importance-graph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-variants-types-example.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-when-not-use-large-lists.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-when-not-use-multiple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-when-use-forms.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/radio-group/sl-radio-group-when-use-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/switch/sl-switch-anatomy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/switch/sl-switch-figma-options.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/switch/sl-switch-when-not-use-complex.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/switch/sl-switch-when-use-feedback.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/switch/sl-switch-when-use-settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-anatomy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-figma-options.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-when-not-use-long.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-when-not-use-predefined.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-when-not-use-sensitive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-when-use-memorable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/components/text-field/sl-text-field-when-use-unique.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | placeholder 4 | 5 | -------------------------------------------------------------------------------- /website/src/assets/images/open-graph-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/open-graph-card.jpg -------------------------------------------------------------------------------- /website/src/assets/images/open-graph-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/open-graph-card.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-inline-message-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-inline-message-dark.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-inline-message-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-inline-message-light.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-issue-template-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-issue-template-dark.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-issue-template-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-issue-template-light.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-resources-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-resources-dark.png -------------------------------------------------------------------------------- /website/src/assets/images/whats-new/2024-05-resources-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sl-design-system/components/68ea3c849b07a3a9b4e5071447794ac658937e44/website/src/assets/images/whats-new/2024-05-resources-light.png -------------------------------------------------------------------------------- /website/src/categories/FAQ/FAQ.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: FAQ 3 | eleventyExcludeFromCollections: true 4 | eleventyNavigation: 5 | parent: Pages 6 | key: FAQ 7 | --- -------------------------------------------------------------------------------- /website/src/categories/categories.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "base.njk", 3 | "tags": "categories" 4 | } 5 | -------------------------------------------------------------------------------- /website/src/categories/components.md: -------------------------------------------------------------------------------- 1 | --- 2 | eleventyNavigation: 3 | parent: Pages 4 | key: Components 5 | order: 5 6 | title: Components 7 | --- 8 | 9 | 10 | Components list 11 |
    12 | {% for component in collections.components %} 13 |
    14 |

    {{component.data.title}}

    15 | 16 | {{ component.data.title }} 17 | 18 |
    19 | {% endfor %} 20 |
    21 | 22 | -------------------------------------------------------------------------------- /website/src/categories/components/accordion/accordion.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "accordion", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Accordion", 8 | "selector": "sl-accordion" 9 | }, 10 | { 11 | "name": "Accordion item", 12 | "selector": "sl-accordion-item" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/components/avatar/avatar.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "avatar", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Avatar", 8 | "selector": "sl-avatar" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/badge/badge.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "badge", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Badge", 8 | "selector": "sl-badge" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/breadcrumbs/breadcrumbs.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "breadcrumbs", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Breadcrumbs", 8 | "selector": "sl-breadcrumbs" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/breadcrumbs/breadcrumbs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breadcrumbs 3 | description: Breadcrumbs are a navigation element used to show a user's location in a digital product. 4 | componentType: navigation 5 | shortDescription: Breadcrumbs are a navigation element used to show a user's location in a digital product. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: breadcrumbs 9 | storybookCategory: navigation 10 | eleventyNavigation: 11 | parent: Components 12 | key: Breadcrumbs 13 | --- 14 | 15 | -------------------------------------------------------------------------------- /website/src/categories/components/button-bar/accessibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button bar accessibility 3 | tags: accessibility 4 | eleventyNavigation: 5 | parent: Button bar 6 | key: ButtonBarAccessibility 7 | --- 8 | 9 |
    10 | 11 | ## WAI-ARIA 12 | 13 | {{ 'aria-attributes' | recurringText }} 14 | 15 |
    16 | 17 | |Attribute|Value|Description| 18 | |-|-|-| 19 | |`aria-label`|string|Provides a label describing the group of buttons wrapped by button bar component. Please remember to add `aria-label` to the icon-only buttons (when used) as well.| 20 | 21 | {.ds-table .ds-table-align-top} 22 | 23 |
    24 | 25 |
    26 | 27 | -------------------------------------------------------------------------------- /website/src/categories/components/button-bar/button-bar.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "button-bar", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Button bar", 8 | "selector": "sl-button-bar" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/button-bar/button-bar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button bar 3 | description: The Button bar provides a organized way to present buttons side by side, which will stack up when there's not enough space. 4 | componentType: actions 5 | shortDescription: The Button bar provides a organized way to present buttons side by side. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: button-bar 9 | storybookCategory: actions 10 | eleventyNavigation: 11 | parent: Components 12 | key: Button bar 13 | --- 14 | -------------------------------------------------------------------------------- /website/src/categories/components/button/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "button", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Button", 8 | "selector": "sl-button" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/card/card.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "card", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Card", 8 | "selector": "sl-card" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/checkbox/checkbox.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "checkbox", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Checkbox", 8 | "selector": "sl-checkbox" 9 | }, 10 | { 11 | "name": "Checkbox group", 12 | "selector": "sl-checkbox-group" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/components/combobox/combobox.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "combobox", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Combobox", 8 | "selector": "sl-combobox" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "components" 4 | } 5 | -------------------------------------------------------------------------------- /website/src/categories/components/dialog/dialog.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "dialog", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Dialog", 8 | "selector": "sl-dialog" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/drawer/drawer.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "drawer", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Drawer", 8 | "selector": "sl-drawer" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/drawer/drawer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Drawer 3 | description: Drawer component description 4 | componentType: overlay 5 | shortDescription: We are still working on the drawer component 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | storybookCategory: overlay 9 | eleventyExcludeFromCollections: true 10 | eleventyNavigation: 11 | parent: Components 12 | key: Drawer 13 | status: coming 14 | --- 15 | 16 | -------------------------------------------------------------------------------- /website/src/categories/components/editor/editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "editor", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Editor", 8 | "selector": "sl-editor" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/editor/editor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Editor 3 | description: Editor component description 4 | componentType: form 5 | shortDescription: We are still working on the editor component 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | storybookCategory: form 9 | eleventyExcludeFromCollections: true 10 | eleventyNavigation: 11 | parent: Components 12 | key: Editor 13 | status: coming 14 | --- 15 | 16 | -------------------------------------------------------------------------------- /website/src/categories/components/form-field/form-field.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "form-field", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Form field", 8 | "selector": "sl-form-field" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/form/accessibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Form accessibility 3 | tags: accessibility 4 | eleventyNavigation: 5 | parent: Form 6 | key: FormAccessibility 7 | --- 8 | 9 |
    10 | 11 | ## Keyboard interactions 12 | 13 | Here's an overview of the common keyboard interactions associated with a form: 14 | 15 |
    16 | 17 | |Command|Description| 18 | |-|-| 19 | |Tab|When focus is outside the form, moves focus to the first form field. 20 | 21 | {.ds-table .ds-table-align-top} 22 | 23 |
    24 | 25 |
    26 | -------------------------------------------------------------------------------- /website/src/categories/components/form/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "form", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Form", 8 | "selector": "sl-form" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/grid/grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grid 3 | description: Grid description 4 | componentType: grid 5 | shortDescription: We are still working on the grid component 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: grid 9 | storybookCategory: grid 10 | eleventyExcludeFromCollections: true 11 | eleventyNavigation: 12 | parent: Components 13 | key: Grid 14 | status: coming 15 | --- 16 | 17 | -------------------------------------------------------------------------------- /website/src/categories/components/icon/icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "icon", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Icon", 8 | "selector": "sl-icon" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/inline-message/inline-message.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "inline-message", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Inline message", 8 | "selector": "sl-inline-message" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/inline-message/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline message 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Inline message 6 | key: InlineMessageOverview 7 | --- 8 | 9 | -------------------------------------------------------------------------------- /website/src/categories/components/inline-message/specs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inline message specs 3 | tags: specs 4 | eleventyNavigation: 5 | parent: Inline message 6 | key: InlineMessageSpecs 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/components/menu/menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "menu", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Menu button", 8 | "selector": "sl-menu-button" 9 | }, 10 | { 11 | "name": "Menu", 12 | "selector": "sl-menu" 13 | }, 14 | { 15 | "name": "Menu item", 16 | "selector": "sl-menu-item" 17 | }, 18 | { 19 | "name": "Menu item group", 20 | "selector": "sl-menu-item-group" 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /website/src/categories/components/menu/menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Menu 3 | description: A menu provides relevant actions based on the user's current selection, enhancing usability by offering quick access to necessary options and reducing cognitive load. 4 | componentType: overlay 5 | shortDescription: A menu provides relevant actions based on the user's current selection, enhancing usability by offering quick access to necessary options and reducing cognitive load. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: menu 9 | storybookCategory: actions-menu 10 | eleventyNavigation: 11 | parent: Components 12 | key: Menu 13 | status: new 14 | --- 15 | -------------------------------------------------------------------------------- /website/src/categories/components/message-dialog/message-dialog.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "message-dialog", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Message dialog", 8 | "selector": "sl-message-dialog" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/message-dialog/message-dialog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Message dialog 3 | description: A dialog for displaying messages or asking for confirmation. 4 | componentType: overlay 5 | shortDescription: A dialog for displaying messages to the user. 6 | picture: 7 | pictureDark: 8 | layout: "categories/components/components.njk" 9 | tags: component 10 | packageName: message-dialog 11 | storybookCategory: overlay 12 | eleventyNavigation: 13 | parent: Components 14 | key: Message dialog 15 | status: ready 16 | --- 17 | -------------------------------------------------------------------------------- /website/src/categories/components/number-field/number-field.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "number-field", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Number Field", 8 | "selector": "sl-number-field" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/number-field/number-field.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Number Field 3 | description: A number field component allows users to enter and adjust numeric values. 4 | componentType: form 5 | shortDescription: Number Field is a component for entering and adjusting numeric values with optional increment and decrement controls. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: number-field 9 | storybookCategory: form 10 | eleventyNavigation: 11 | parent: Components 12 | key: Number Field 13 | status: new 14 | --- 15 | -------------------------------------------------------------------------------- /website/src/categories/components/number-field/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Number Field 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Number Field 6 | key: NumberFieldOverview 7 | --- 8 |
    9 | 10 |
    11 | 12 | ... 13 | 14 |
    15 | 16 |
    17 | 18 | ```html 19 | 20 | ... 21 | 22 | ``` 23 | 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /website/src/categories/components/popover/popover.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "popover", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Popover", 8 | "selector": "sl-popover" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/progress-bar/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress bar 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Progress bar 6 | key: ProgressBarOverview 7 | --- 8 | 9 | -------------------------------------------------------------------------------- /website/src/categories/components/progress-bar/progress-bar.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "progress-bar", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Progress bar", 8 | "selector": "sl-progress-bar" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/progress-bar/progress-bar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress bar 3 | description: The progress bar is a visual indicator that shows how much of a task or process has been completed, giving users immediate feedback. 4 | componentType: feedback & status 5 | shortDescription: The progress bar is a visual indicator that shows how much of a task or process has been completed. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: progress-bar 9 | storybookCategory: feedback-status 10 | eleventyNavigation: 11 | parent: Components 12 | key: Progress bar 13 | --- 14 | 15 | -------------------------------------------------------------------------------- /website/src/categories/components/progress-bar/specs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Progress bar specs 3 | tags: specs 4 | eleventyNavigation: 5 | parent: Progress bar 6 | key: ProgressBarSpecs 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/components/radio-group/radio-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "radio-group", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Radio group", 8 | "selector": "sl-radio-group" 9 | }, 10 | { 11 | "name": "Radio", 12 | "selector": "sl-radio" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/components/search-field/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search field 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Search field 6 | key: SearchFieldOverview 7 | --- 8 | 9 | -------------------------------------------------------------------------------- /website/src/categories/components/search-field/search-field.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "search-field", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Search field", 8 | "selector": "sl-search-field" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/search-field/search-field.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search field 3 | description: A search field lets users specify a word or phrase to filter relevant content within a specific page section. For example, filter the content in a data grid or a list of content. 4 | componentType: form 5 | shortDescription: A search field lets users specify a word or phrase to filter relevant content within a specific page section. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: search-field 9 | storybookCategory: form 10 | eleventyNavigation: 11 | parent: Components 12 | key: Search field 13 | --- 14 | 15 | -------------------------------------------------------------------------------- /website/src/categories/components/search-field/specs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Search field specs 3 | tags: specs 4 | eleventyNavigation: 5 | parent: Search field 6 | key: SearchFieldSpecs 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/components/select/select.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "select", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Select", 8 | "selector": "sl-select" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/skeleton/accessibility.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Skeleton accessibility 3 | tags: accessibility 4 | eleventyNavigation: 5 | parent: Skeleton 6 | key: SkeletonAccessibility 7 | --- 8 |
    9 | 10 | ## WAI-Aria 11 | 12 | {{ 'aria-attributes' | recurringText }} 13 | 14 |
    15 | 16 | |Attribute | Value | Description | 17 | |-|-|-| 18 | |`aria-label` |string|Can be used to describe what content is being loaded. Can be added to the `sl-skeleton` or/and wrapper element. | 19 | 20 | {.ds-table .ds-table-align-top} 21 | 22 |
    23 | 24 |
    25 | 26 | -------------------------------------------------------------------------------- /website/src/categories/components/skeleton/skeleton.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "skeleton", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Skeleton", 8 | "selector": "sl-skeleton" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/spinner/spinner.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "spinner", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Spinner", 8 | "selector": "sl-spinner" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/switch/switch.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "switch", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Switch", 8 | "selector": "sl-switch" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/tabs/tabs.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "tab-group", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Tab", 8 | "selector": "sl-tab" 9 | }, 10 | { 11 | "name": "Tab group", 12 | "selector": "sl-tab-group" 13 | }, 14 | { 15 | "name": "Tab panel", 16 | "selector": "sl-tab-panel" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /website/src/categories/components/tag/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tag 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Tag 6 | key: TagOverview 7 | --- 8 |
    9 | 10 |
    11 | 12 | ... 13 | 14 |
    15 | 16 |
    17 | 18 | ```html 19 | 20 | ... 21 | 22 | ``` 23 | 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /website/src/categories/components/tag/tag.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "tag", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Tag", 8 | "selector": "sl-tag" 9 | }, 10 | { 11 | "name": "Tag list", 12 | "selector": "sl-tag-list" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/components/tag/tag.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tag 3 | description: Tags represent a set of keywords that help label, categorize, and organize objects. Commonly used to signify the attributes of an object. 4 | componentType: feedback & status 5 | shortDescription: Tags represent a set of keywords that help label, categorize, and organize objects. 6 | layout: "categories/components/components.njk" 7 | tags: component 8 | packageName: tag 9 | storybookCategory: feedback-status 10 | eleventyNavigation: 11 | parent: Components 12 | key: Tag 13 | status: new 14 | --- 15 | -------------------------------------------------------------------------------- /website/src/categories/components/text-area/text-area.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "text-area", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Text area", 8 | "selector": "sl-text-area" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/text-field/text-field.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "text-field", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Text field", 8 | "selector": "sl-text-field" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-button/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toggle button 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Toggle button 6 | key: ToggleButtonOverview 7 | --- 8 |
    9 | 10 |
    11 | 12 | ... 13 | 14 |
    15 | 16 |
    17 | 18 | ```html 19 | Input example code 20 | ``` 21 | 22 |
    23 | 24 |
    25 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-button/specs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toggle button specs 3 | tags: specs 4 | eleventyNavigation: 5 | parent: Toggle button 6 | key: ToggleButtonSpecs 7 | --- 8 |
    9 | 10 | ... 11 | 12 |
    13 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-button/toggle-button.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "toggle-button", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Toggle button", 8 | "selector": "sl-toggle-button" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-group/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toggle group 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Toggle group 6 | key: ToggleGroupOverview 7 | --- 8 |
    9 | 10 |
    11 | 12 | ... 13 | 14 |
    15 | 16 |
    17 | 18 | ```html 19 | Input example code 20 | ``` 21 | 22 |
    23 | 24 |
    25 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-group/specs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Toggle group specs 3 | tags: specs 4 | eleventyNavigation: 5 | parent: Toggle group 6 | key: ToggleGroupSpecs 7 | --- 8 |
    9 | 10 | ... 11 | 12 |
    13 | -------------------------------------------------------------------------------- /website/src/categories/components/toggle-group/toggle-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "toggle-group", 4 | "componentStatus": "preview", 5 | "componentTagName": [ 6 | { 7 | "name": "Toggle group", 8 | "selector": "sl-toggle-group" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /website/src/categories/components/tooltip/tooltip.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "tooltip", 4 | "componentStatus": "stable", 5 | "componentTagName": [ 6 | { 7 | "name": "Tooltip", 8 | "selector": "sl-tooltip" 9 | }, 10 | { 11 | "name": "TooltipDirective", 12 | "selector": "TooltipDirective" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/components/tree-view/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tree 3 | tags: overview 4 | eleventyNavigation: 5 | parent: Tree 6 | key: TreeOverview 7 | --- 8 |
    9 | 10 |
    11 | 12 | ... 13 | 14 |
    15 | 16 |
    17 | 18 | ```html 19 | 20 | ... 21 | 22 | ``` 23 | 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /website/src/categories/components/tree-view/tree-view.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "categories/components/components.njk", 3 | "tags": "tag", 4 | "componentStatus": "draft", 5 | "componentTagName": [ 6 | { 7 | "name": "Tag", 8 | "selector": "sl-tag" 9 | }, 10 | { 11 | "name": "Tag list", 12 | "selector": "sl-tag-list" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /website/src/categories/design-tokens.md: -------------------------------------------------------------------------------- 1 | --- 2 | eleventyNavigation: 3 | parent: Pages 4 | key: Design Tokens 5 | order: 4 6 | title: Design Tokens 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/design-tokens/color/color.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Color 3 | eleventyNavigation: 4 | parent: Design Tokens 5 | key: Color 6 | order: 1 7 | --- 8 | 9 |
    10 |
    11 |

    Design Tokens

    12 |

    13 | Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing. 14 |

    15 |
    16 |
    17 | 18 |
    19 | {% include "./color-tokens-table.njk" %} 20 |
    -------------------------------------------------------------------------------- /website/src/categories/design-tokens/design-tokens.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "base.njk", 3 | "tags": "design-tokens" 4 | } 5 | -------------------------------------------------------------------------------- /website/src/categories/design-tokens/size/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Size 3 | eleventyNavigation: 4 | parent: Design Tokens 5 | key: Size 6 | order: 6 7 | --- 8 | 9 |
    10 |
    11 |

    Design Tokens

    12 |

    13 | Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing. 14 |

    15 |
    16 |
    17 | 18 |
    19 | {% include "./size-tokens-table.njk" %} 20 |
    -------------------------------------------------------------------------------- /website/src/categories/design-tokens/space/space.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Space 3 | eleventyNavigation: 4 | parent: Design Tokens 5 | key: Space 6 | order: 4 7 | --- 8 | 9 |
    10 |
    11 |

    Design Tokens

    12 |

    13 | Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing. 14 |

    15 |
    16 |
    17 | 18 |
    19 | {% include "./space-tokens-table.njk" %} 20 |
    -------------------------------------------------------------------------------- /website/src/categories/design-tokens/text/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Text 3 | eleventyNavigation: 4 | parent: Design Tokens 5 | key: Text 6 | order: 2 7 | --- 8 | 9 |
    10 |
    11 |

    Design Tokens

    12 |

    13 | Design tokens are named entities that store visual and functional information. They take the place of hardcoded values, such as hex values for color or pixel values for spacing. 14 |

    15 |
    16 |
    17 | 18 |
    19 | {% include "./text-tokens-table.njk" %} 20 |
    -------------------------------------------------------------------------------- /website/src/categories/getting-started.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | eleventyNavigation: 4 | parent: Pages 5 | key: Getting Started 6 | order: 1 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/getting-started/getting-started.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "base.njk", 3 | "tags": "getting-started" 4 | } 5 | -------------------------------------------------------------------------------- /website/src/categories/guidelines.md: -------------------------------------------------------------------------------- 1 | --- 2 | eleventyNavigation: 3 | parent: Pages 4 | key: Guidelines 5 | order: 3 6 | title: Guidelines 7 | --- -------------------------------------------------------------------------------- /website/src/categories/guidelines/design-principles.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Design principles 3 | eleventyExcludeFromCollections: true 4 | eleventyNavigation: 5 | parent: Guidelines 6 | key: Design Principles 7 | --- -------------------------------------------------------------------------------- /website/src/categories/guidelines/figma-toolkit.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Figma toolkit 3 | eleventyExcludeFromCollections: true 4 | eleventyNavigation: 5 | parent: Guidelines 6 | key: Figma Toolkit 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/categories/guidelines/guidelines.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "base.njk", 3 | "tags": "guidelines" 4 | } 5 | -------------------------------------------------------------------------------- /website/src/categories/guidelines/naming.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Naming 3 | eleventyExcludeFromCollections: true 4 | eleventyNavigation: 5 | parent: Guidelines 6 | key: Naming 7 | --- 8 | -------------------------------------------------------------------------------- /website/src/scripts/demo-greeter.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from 'lit'; 2 | 3 | class DemoGreeter extends LitElement { 4 | static styles = css` 5 | b { 6 | color: var(--n-tab-color); 7 | } 8 | `; 9 | 10 | static properties = { 11 | name: {} 12 | }; 13 | 14 | render() { 15 | return html`Hello ${this.name}!`; 16 | } 17 | } 18 | 19 | customElements.define('demo-greeter', DemoGreeter); 20 | -------------------------------------------------------------------------------- /website/src/scripts/filters/search-index-json.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /search-index.json 3 | --- 4 | 5 | {{ collections.content | search | dump | safe }} 6 | -------------------------------------------------------------------------------- /website/src/styles/basic.scss: -------------------------------------------------------------------------------- 1 | @import 'breakpoints'; 2 | 3 | *:focus-visible:not(input, sl-button, sl-select, sl-select-button, sl-text-area, sl-tab, sl-tag, sl-toggle-button) { 4 | border-radius: 0.6rem; 5 | box-shadow: var(--focus-box-shadow); 6 | outline: none; 7 | } 8 | 9 | $sticky-breakpoint: 1px; 10 | 11 | html { 12 | font-size: 62.5%; 13 | 14 | @media (min-height: $sticky-breakpoint) { 15 | scroll-padding-top: 134px; 16 | 17 | /* stylelint-disable-next-line max-nesting-depth */ 18 | @media screen and (min-width: $lg-breakpoint) { 19 | scroll-padding-top: 95px; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /website/src/styles/breakpoints.scss: -------------------------------------------------------------------------------- 1 | $md-breakpoint: 600px; 2 | $md-lg-breakpoint: 750px; 3 | $lg-breakpoint-y: 875px; 4 | $lg-breakpoint: 900px; 5 | $xl-breakpoint: 1200px; 6 | $xxl-breakpoint: 1600px; 7 | -------------------------------------------------------------------------------- /website/src/styles/categories/components/button.scss: -------------------------------------------------------------------------------- 1 | h3 { 2 | margin-bottom: 16px; 3 | } 4 | 5 | .ds-buttons-wrapper { 6 | display: flex; 7 | flex-wrap: wrap; 8 | gap: 16px; 9 | margin: 16px 0; 10 | } 11 | -------------------------------------------------------------------------------- /website/src/styles/reset.scss: -------------------------------------------------------------------------------- 1 | /* Box sizing rules */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | } 7 | 8 | /* Remove default margin */ 9 | :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /website/src/ts/components/main.ts: -------------------------------------------------------------------------------- 1 | import './code-snippet/code-snippet'; 2 | import './component-status/component-status'; 3 | import './install-info'; 4 | import './status/status'; 5 | import './vertical-tabs/vertical-tabs'; 6 | -------------------------------------------------------------------------------- /website/src/ts/scripts/main.ts: -------------------------------------------------------------------------------- 1 | import './code-component'; 2 | import './navigation'; 3 | import './slds-components'; 4 | -------------------------------------------------------------------------------- /website/src/ts/utils/active-element.ts: -------------------------------------------------------------------------------- 1 | export const getActiveElement = (el: Node): Element | null => { 2 | return (el.getRootNode() as Document).activeElement; 3 | }; 4 | -------------------------------------------------------------------------------- /website/src/utilities/recurring-text/aria-attributes-no-list.txt: -------------------------------------------------------------------------------- 1 | In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used. 2 | 3 | For this component we can't think of any common scenarios that require you to add specific attributes, but keep in mind that if you use images or icons that (partially) replace text you need to provide an alternative for assistive technology, by adding an `alt`text or `aria-label` as you normally would. 4 | -------------------------------------------------------------------------------- /website/src/utilities/recurring-text/aria-attributes.txt: -------------------------------------------------------------------------------- 1 | In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used. 2 | 3 | Attributes that we recommend you add in certain scenarios are mentioned below. 4 | -------------------------------------------------------------------------------- /website/tsconfig.cem.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "noResolve":true 4 | } 5 | -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "emitDeclarationOnly": false 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ] 10 | } 11 | --------------------------------------------------------------------------------