From 79ce145946d6efa1d2e4b60364cc76c3955e27c1 Mon Sep 17 00:00:00 2001 From: Jeroen Zwartepoorte Date: Tue, 19 Mar 2024 16:28:53 +0100 Subject: [PATCH 1/7] Add special checklist component (#1069) Co-authored-by: DanielleRameau --- .gitignore | 4 + .storybook/main.ts | 2 +- package.json | 25 ++- packages/checklist/eslint.config.mjs | 23 +++ packages/checklist/index.ts | 3 + packages/checklist/package.json | 43 +++++ packages/checklist/src/checklist.scss | 96 +++++++++++ packages/checklist/src/checklist.stories.ts | 15 ++ packages/checklist/src/checklist.ts | 153 ++++++++++++++++++ packages/checklist/stylelint.config.mjs | 28 ++++ packages/checklist/tsconfig.json | 8 + .../accordion/src/accordion.stories.ts | 2 +- .../components/avatar/src/avatar.stories.ts | 2 +- .../components/badge/src/badge.stories.ts | 2 +- .../breadcrumbs/src/breadcrumbs.stories.ts | 2 +- .../button-bar/src/button-bar.stories.ts | 2 +- .../components/button/src/button.stories.ts | 2 +- packages/components/card/src/card.stories.ts | 2 +- .../checkbox/src/checkbox.stories.ts | 2 +- .../components/dialog/src/dialog.stories.ts | 2 +- .../components/drawer/src/drawer.stories.ts | 2 +- .../components/editor/src/editor.stories.ts | 2 +- packages/components/icon/src/icon.stories.ts | 2 +- .../src/inline-message.stories.ts | 2 +- .../menu/src/menu-button.stories.ts | 2 +- packages/components/menu/src/menu.stories.ts | 2 +- .../src/message-dialog.stories.ts | 2 +- .../components/popover/src/popover.stories.ts | 2 +- .../radio-group/src/radio-group.stories.ts | 2 +- .../components/select/src/select.stories.ts | 2 +- .../skeleton/src/skeleton.stories.ts | 2 +- .../components/spinner/src/spinner.stories.ts | 2 +- .../components/switch/src/switch.stories.ts | 2 +- .../components/tabs/src/tab-group.stories.ts | 2 +- .../text-field/src/text-field.stories.ts | 2 +- .../textarea/src/textarea.stories.ts | 2 +- .../components/tooltip/src/tooltip.stories.ts | 2 +- packages/themes/bingel-dc/all.css | 4 +- packages/themes/bingel-dc/base.css | 2 + packages/themes/bingel-dc/base.json | 25 +++ packages/themes/bingel-dc/base.scss | 12 +- packages/themes/bingel-dc/light.css | 2 +- packages/themes/bingel-dc/light.scss | 16 +- packages/themes/bingel-int/all.css | 4 +- packages/themes/bingel-int/base.css | 2 + packages/themes/bingel-int/base.json | 25 +++ packages/themes/bingel-int/base.scss | 12 +- packages/themes/bingel-int/light.css | 2 +- packages/themes/bingel-int/light.scss | 16 +- packages/themes/bingel/all.css | 2 + packages/themes/bingel/base.css | 2 + packages/themes/bingel/base.json | 25 +++ packages/themes/bingel/base.scss | 12 +- packages/themes/clickedu/all.css | 6 +- packages/themes/clickedu/base.css | 2 + packages/themes/clickedu/base.json | 25 +++ packages/themes/clickedu/base.scss | 12 +- packages/themes/clickedu/light.css | 4 +- packages/themes/clickedu/light.scss | 20 +-- packages/themes/editorial-suite/all.css | 6 +- packages/themes/editorial-suite/base.css | 2 + packages/themes/editorial-suite/base.json | 25 +++ packages/themes/editorial-suite/base.scss | 12 +- packages/themes/editorial-suite/light.css | 4 +- packages/themes/editorial-suite/light.scss | 18 +-- packages/themes/itslearning/all.css | 6 +- packages/themes/itslearning/base.css | 2 + packages/themes/itslearning/base.json | 25 +++ packages/themes/itslearning/base.scss | 12 +- packages/themes/itslearning/light.css | 4 +- packages/themes/itslearning/light.scss | 14 +- packages/themes/kampus/all.css | 6 +- packages/themes/kampus/base.css | 2 + packages/themes/kampus/base.json | 25 +++ packages/themes/kampus/base.scss | 12 +- packages/themes/kampus/light.css | 4 +- packages/themes/kampus/light.scss | 18 +-- packages/themes/magister/all.css | 8 +- packages/themes/magister/base.css | 2 + packages/themes/magister/base.json | 25 +++ packages/themes/magister/base.scss | 2 + packages/themes/magister/dark.css | 4 +- packages/themes/magister/dark.scss | 18 +-- packages/themes/magister/light.css | 2 +- packages/themes/magister/light.scss | 16 +- packages/themes/max/all.css | 6 +- packages/themes/max/base.css | 2 + packages/themes/max/base.json | 25 +++ packages/themes/max/base.scss | 12 +- packages/themes/max/light.css | 4 +- packages/themes/max/light.scss | 4 +- packages/themes/my-digital-book/all.css | 6 +- packages/themes/my-digital-book/base.css | 2 + packages/themes/my-digital-book/base.json | 25 +++ packages/themes/my-digital-book/base.scss | 12 +- packages/themes/my-digital-book/light.css | 4 +- packages/themes/my-digital-book/light.scss | 18 +-- packages/themes/myvanin/all.css | 6 +- packages/themes/myvanin/base.css | 2 + packages/themes/myvanin/base.json | 25 +++ packages/themes/myvanin/base.scss | 12 +- packages/themes/myvanin/light.css | 4 +- packages/themes/myvanin/light.scss | 18 +-- packages/themes/neon/all.css | 8 +- packages/themes/neon/base.css | 2 + packages/themes/neon/base.json | 25 +++ packages/themes/neon/base.scss | 12 +- packages/themes/neon/dark.css | 4 +- packages/themes/neon/dark.scss | 24 +-- packages/themes/neon/light.css | 2 +- packages/themes/neon/light.scss | 18 +-- packages/themes/nowa-era/all.css | 4 +- packages/themes/nowa-era/base.css | 2 + packages/themes/nowa-era/base.json | 25 +++ packages/themes/nowa-era/base.scss | 12 +- packages/themes/nowa-era/light.css | 2 +- packages/themes/nowa-era/light.scss | 2 +- packages/themes/sanoma-learning/all.css | 38 ++++- packages/themes/sanoma-learning/base.css | 10 ++ packages/themes/sanoma-learning/base.json | 68 ++++++++ packages/themes/sanoma-learning/base.scss | 20 ++- packages/themes/sanoma-learning/dark.css | 13 +- packages/themes/sanoma-learning/dark.json | 53 ++++++ packages/themes/sanoma-learning/dark.scss | 27 ++-- packages/themes/sanoma-learning/light.css | 15 +- packages/themes/sanoma-learning/light.json | 77 +++++++++ packages/themes/sanoma-learning/light.scss | 29 ++-- .../themes/sanoma-learning/typography.css | 21 +++ .../themes/sanoma-learning/typography.scss | 21 +++ packages/themes/sanoma-utbildning/all.css | 6 +- packages/themes/sanoma-utbildning/base.css | 2 + packages/themes/sanoma-utbildning/base.json | 25 +++ packages/themes/sanoma-utbildning/base.scss | 2 + packages/themes/sanoma-utbildning/light.css | 4 +- packages/themes/sanoma-utbildning/light.scss | 4 +- packages/themes/teas/all.css | 6 +- packages/themes/teas/base.css | 2 + packages/themes/teas/base.json | 25 +++ packages/themes/teas/base.scss | 12 +- packages/themes/teas/light.css | 4 +- packages/themes/teas/light.scss | 4 +- packages/tokens/src/core.json | 25 +++ packages/tokens/src/sanoma-learning/base.json | 43 +++++ packages/tokens/src/sanoma-learning/dark.json | 44 +++++ .../tokens/src/sanoma-learning/light.json | 67 ++++++++ scripts/build-packages.js | 2 +- scripts/build-scss.js | 8 +- yarn.lock | 9 ++ 148 files changed, 1675 insertions(+), 298 deletions(-) create mode 100644 packages/checklist/eslint.config.mjs create mode 100644 packages/checklist/index.ts create mode 100644 packages/checklist/package.json create mode 100644 packages/checklist/src/checklist.scss create mode 100644 packages/checklist/src/checklist.stories.ts create mode 100644 packages/checklist/src/checklist.ts create mode 100644 packages/checklist/stylelint.config.mjs create mode 100644 packages/checklist/tsconfig.json diff --git a/.gitignore b/.gitignore index 730eac5b4c..ae17bc741e 100644 --- a/.gitignore +++ b/.gitignore @@ -57,6 +57,10 @@ node_modules/ # Dist files & folders dist +packages/checklist/**/*.d.ts +packages/checklist/**/*.d.ts.map +packages/checklist/**/*.js +packages/checklist/**/*.js.map packages/components/**/*.d.ts packages/components/**/*.d.ts.map packages/components/**/*.js diff --git a/.storybook/main.ts b/.storybook/main.ts index cc437719e1..351725f89a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -4,7 +4,7 @@ import { argv } from 'node:process'; const devMode = !argv.includes('build'); const config: StorybookConfig = { - stories: ['../packages/components/**/*.stories.ts'], + stories: ['../packages/{checklist,components}/**/*.stories.ts'], addons: [ '@storybook/addon-a11y', '@storybook/addon-actions', diff --git a/package.json b/package.json index b1963f75e9..2c74f9218c 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "workspaces": [ "chromatic", "packages/angular", + "packages/checklist", "packages/components/*", "packages/locales", "packages/themes/*", @@ -40,6 +41,7 @@ "build": { "dependencies": [ "build:cem", + "build:checklist", "build:components", "build:locales", "build:themes", @@ -59,6 +61,21 @@ "packages/components/*/custom-elements.json" ] }, + "build:checklist": { + "command": "node scripts/build-packages.js checklist", + "clean": "if-file-deleted", + "dependencies": [ + "build:scss" + ], + "files": [ + "packages/checklist/**/*.ts", + "!packages/checklist/**/*.d.ts" + ], + "output": [ + "packages/checklist/**/*.js", + "packages/checklist/**/*.js.map" + ] + }, "build:components": { "command": "node scripts/build-packages.js components", "clean": "if-file-deleted", @@ -120,10 +137,10 @@ "command": "node scripts/build-scss.js", "clean": "if-file-deleted", "files": [ - "packages/components/**/*.scss" + "packages/{checklist,components}/**/*.scss" ], "output": [ - "packages/components/**/*.scss.ts" + "packages/{checklist,components}/**/*.scss.ts" ] }, "build:themes": { @@ -205,6 +222,10 @@ "script": "build:cem", "cascade": false }, + { + "script": "build:checklist", + "cascade": false + }, { "script": "build:components", "cascade": false diff --git a/packages/checklist/eslint.config.mjs b/packages/checklist/eslint.config.mjs new file mode 100644 index 0000000000..956899734c --- /dev/null +++ b/packages/checklist/eslint.config.mjs @@ -0,0 +1,23 @@ +import config from '../../eslint.config.mjs'; + +/** + * NOTE: All paths are relative to where eslint is run from, + * in our case the root of the monorepo. + */ +export default [ + { + ignores: [ + 'packages/checklist/**/*.js', + 'packages/checklist/**/*.d.ts', + 'packages/checklist/**/*.scss.ts' + ] + }, + ...config, + { + languageOptions: { + parserOptions: { + project: 'packages/checklist/tsconfig.json' + } + } + } +]; diff --git a/packages/checklist/index.ts b/packages/checklist/index.ts new file mode 100644 index 0000000000..f6cd110cf7 --- /dev/null +++ b/packages/checklist/index.ts @@ -0,0 +1,3 @@ +import { Checklist } from './src/checklist.js'; + +customElements.define('slds-checklist', Checklist); diff --git a/packages/checklist/package.json b/packages/checklist/package.json new file mode 100644 index 0000000000..287c05390f --- /dev/null +++ b/packages/checklist/package.json @@ -0,0 +1,43 @@ +{ + "name": "@sl-design-system/checklist", + "version": "0.0.0", + "description": "Checklist component if the SL Design System is successfully installed", + "license": "Apache-2.0", + "publishConfig": { + "registry": "https://npm.pkg.github.com" + }, + "repository": { + "type": "git", + "url": "https://github.com/sl-design-system/components.git", + "directory": "packages/checlist" + }, + "homepage": "https://sanomalearning.design/getting-started/developers/", + "bugs": { + "url": "https://github.com/sl-design-system/components/issues" + }, + "type": "module", + "main": "./index.js", + "module": "./index.js", + "types": "./index.d.ts", + "customElements": "custom-elements.json", + "exports": { + ".": "./index.js", + "./package.json": "./package.json" + }, + "files": [ + "**/*.d.ts", + "**/*.js", + "**/*.js.map", + "custom-elements.json" + ], + "sideEffects": [ + "index.js" + ], + "scripts": { + "test": "echo \"Error: run tests from monorepo root.\" && exit 1" + }, + "dependencies": { + "@open-wc/scoped-elements": "^3.0.5", + "@sl-design-system/shared": "0.2.6" + } +} diff --git a/packages/checklist/src/checklist.scss b/packages/checklist/src/checklist.scss new file mode 100644 index 0000000000..4166689759 --- /dev/null +++ b/packages/checklist/src/checklist.scss @@ -0,0 +1,96 @@ +:host { + --_background: var(--sl-color-slds-checklist-background); + --_border-radius: var(--sl-border-radius-slds-checklist); + --_border: var(--sl-border-width-slds-checklist) solid var(--sl-color-slds-checklist-border); + --_box-shadow: var(--sl-box-shadow-slds-checklist); + --_color: var(--sl-color-slds-checklist-foreground); + --_correct-color: var(--sl-color-slds-checklist-icon-success); + --_divider-color: var(--sl-color-slds-checklist-divider); + --_header-font: var(--sl-text-slds-checklist-heading); + --_incorrect-color: var(--sl-color-slds-checklist-icon-danger); + --_link-color: var(--sl-color-slds-checklist-link-idle); + --_link-hover-color: var(--sl-color-slds-checklist-link-hover); + --_link-active-color: var(--sl-color-slds-checklist-link-active); + --_padding: var(--sl-space-2xl); + --_paragraph-font: var(--sl-text-slds-checklist-body); + --_summary-font: var(--sl-text-slds-checklist-listitem); + + background: var(--_background); + border: var(--_border); + border-radius: var(--_border-radius); + box-shadow: var(--_box-shadow); + color: var(--_color); + display: inline-flex; + flex-direction: column; + margin: 1rem; + max-inline-size: min(80vw, 500px); + padding: var(--_padding); +} + +h1 { + font: var(--_header-font); + margin: 0; +} + +p { + font: var(--_paragraph-font); + margin-block: 1rem; +} + +details { + border-block-end: 1px solid var(--_divider-color); + margin-block-start: 0.75rem; + padding-block-end: 0.75rem; + + &[open] { + --_icon-color: var(--_incorrect-color); + } + + &:last-of-type { + margin-block-end: 1rem; + } + + p { + margin-block: 0.5rem; + padding-inline-start: 2.5rem; + } +} + +summary { + align-items: center; + display: flex; + font: var(--_summary-font); + gap: 1rem; + + &::-webkit-details-marker { + display: none; + } +} + +sl-icon { + color: var(--_icon-color, var(--_correct-color)); +} + +code { + font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', + 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + font-size: 0.9em; + font-weight: bolder; +} + +a { + color: var(--_link-color); + + &:visited { + color: var(--_link-color); + } + + &:hover { + color: var(--_link-hover-color); + text-decoration: underline; + } + + &:active { + color: var(--_link-active-color); + } +} diff --git a/packages/checklist/src/checklist.stories.ts b/packages/checklist/src/checklist.stories.ts new file mode 100644 index 0000000000..3ae4f7af97 --- /dev/null +++ b/packages/checklist/src/checklist.stories.ts @@ -0,0 +1,15 @@ +import { type Meta, type StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; +import '../index.js'; + +type Story = StoryObj; + +export default { + title: 'Checklist', + parameters: { + layout: 'centered' + }, + render: () => html`` +} satisfies Meta; + +export const Basic: Story = {}; diff --git a/packages/checklist/src/checklist.ts b/packages/checklist/src/checklist.ts new file mode 100644 index 0000000000..c7728dd4b4 --- /dev/null +++ b/packages/checklist/src/checklist.ts @@ -0,0 +1,153 @@ +import { faCircleCheck, faCircleExclamation } from '@fortawesome/pro-solid-svg-icons'; +import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js'; +import { Icon } from '@sl-design-system/icon'; +import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit'; +import { state } from 'lit/decorators.js'; +import styles from './checklist.scss.js'; + +declare global { + interface HTMLElementTagNameMap { + 'slds-checklist': Checklist; + } +} + +interface ChecklistItem { + title: string; + description: TemplateResult | void; +} + +Icon.register(faCircleCheck, faCircleExclamation); + +/** + * A component to check if the SL Design System has been installed correctly. + */ +export class Checklist extends ScopedElementsMixin(LitElement) { + /** @internal */ + static get scopedElements(): ScopedElementsMap { + return { + 'sl-icon': Icon + }; + } + + /** @internal */ + static override styles: CSSResultGroup = styles; + + /** The items in the list. */ + @state() items: ChecklistItem[] = []; + + override firstUpdated(): void { + // Delay the check to give the application time to initialize. + setTimeout(() => void this.check(), 500); + } + + override render(): TemplateResult { + return html` + +

SL Design System Checklist

+

+ Welcome to the Sanoma Learning Design System. You will find a checklist below of the steps described in our + getting started for developers guide🚀. +

+ + ${this.items.map( + item => html` +
+ event.preventDefault()}> + + ${item.title} + +

${item.description}

+
+ ` + )} + +

+ 📚 You can find the documentation for the SL Design System at + sanomalearning.design. If you have any questions or + need help, you can reach out to us on + Slack or + GitHub. +

+ `; + } + + /** Perform the checks. */ + async check(): Promise { + this.items = [ + { + title: 'CSS Custom Properties present', + description: this.#checkTheme() + }, + { + title: 'Webfonts are available', + description: await this.#checkFonts() + }, + { + title: 'Theme is set up correctly', + description: this.#checkIcons() + }, + { + title: 'Button web component is loaded', + description: this.#checkButton() + } + ]; + } + + #checkButton(): TemplateResult | void { + if (!customElements.get('sl-button')) { + return html` + The sl-button component is not loaded. Make sure you have installed the button package and added + the import statement to your application as described in the + start using components + section. + `; + } + } + + async #checkFonts(): Promise { + const styles = getComputedStyle(this), + required = ['--sl-text-typeset-font-family-body', '--sl-text-typeset-font-family-heading'].map(name => + styles.getPropertyValue(name) + ), + available = Array.from((await document.fonts.ready).keys()).map(ff => ff.family); + + if (!required.every(family => available.includes(family))) { + return html`Not all required fonts are available. Your theme uses the font families + ${required.map((family, index) => html`${family}${index < required.length - 1 ? ' and ' : ''}`)}. The + fonts used in the theme are not a part of the theme package. Please make sure the fonts are loaded and the + font-family names match the exact spelling used in the Design System tokens.`; + } + } + + #checkIcons(): TemplateResult | void { + const iconCount = Object.keys(window.SLDS?.icons ?? {}).length; + + if (iconCount <= 2) { + return html` + The theme icons are not loaded. Please make sure you are calling the setup() method from the theme + package as described in the + setup a theme + section. + `; + } + } + + #checkTheme(): TemplateResult | void { + const base = !!getComputedStyle(this).getPropertyValue('--sl-color-palette-white-base'), + lightOrDark = !!getComputedStyle(this).getPropertyValue('--sl-color-surface-solid-primary-foreground'); + + if (base && !lightOrDark) { + return html`The base theme is set up correctly, but the tokens for the light or dark mode are missing. You likely + need to include the stylesheet for the light or dark mode in your application.`; + } else if (!base && !lightOrDark) { + return html`We could not detect any theme tokens. Please make sure you have installed the theme package and added + the stylesheets to your application as described in the + setup a theme + section.`; + } + } +} diff --git a/packages/checklist/stylelint.config.mjs b/packages/checklist/stylelint.config.mjs new file mode 100644 index 0000000000..b062501777 --- /dev/null +++ b/packages/checklist/stylelint.config.mjs @@ -0,0 +1,28 @@ +import config from '@sl-design-system/stylelint-config'; + +export default { + ignoreFiles: [ + '**/*.js', + '**/*.json', + '**/*.map', + '**/*.mjs', + '**/*.md', + '**/*.ts', + '**/*.tsbuildinfo' + ], + ...config, + overrides: [ + ...config.overrides, + { + files: ['**/*.scss'], + rules: { + 'custom-property-pattern': [ + '((_[a-z]+)|sl)(-[a-z]+)*', + { + message: 'Expected --sl or --_ custom property prefix' + } + ] + } + } + ] +}; diff --git a/packages/checklist/tsconfig.json b/packages/checklist/tsconfig.json new file mode 100644 index 0000000000..2bb7272874 --- /dev/null +++ b/packages/checklist/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "composite": true, + "rootDir": "." + }, + "include": ["index.ts", "**/*.ts"] +} \ No newline at end of file diff --git a/packages/components/accordion/src/accordion.stories.ts b/packages/components/accordion/src/accordion.stories.ts index 5c04b0548e..67c45dc60c 100644 --- a/packages/components/accordion/src/accordion.stories.ts +++ b/packages/components/accordion/src/accordion.stories.ts @@ -4,7 +4,7 @@ import { html } from 'lit'; import '../register.js'; export default { - title: 'Accordion' + title: 'Components/Accordion' }; export const API: StoryObj = { diff --git a/packages/components/avatar/src/avatar.stories.ts b/packages/components/avatar/src/avatar.stories.ts index cf16372603..7cd456794f 100644 --- a/packages/components/avatar/src/avatar.stories.ts +++ b/packages/components/avatar/src/avatar.stories.ts @@ -82,7 +82,7 @@ const sizeName = (size: string): string => { }; export default { - title: 'Avatar', + title: 'Components/Avatar', args: { displayName: 'Rose Nylund', pictureUrl: diff --git a/packages/components/badge/src/badge.stories.ts b/packages/components/badge/src/badge.stories.ts index efce6c711d..092740e648 100644 --- a/packages/components/badge/src/badge.stories.ts +++ b/packages/components/badge/src/badge.stories.ts @@ -37,7 +37,7 @@ const sizeName = (size: string): string => { }; export default { - title: 'Badge', + title: 'Components/Badge', args: { text: '99+', size: 'md', diff --git a/packages/components/breadcrumbs/src/breadcrumbs.stories.ts b/packages/components/breadcrumbs/src/breadcrumbs.stories.ts index 9203b6856f..47ac64316c 100644 --- a/packages/components/breadcrumbs/src/breadcrumbs.stories.ts +++ b/packages/components/breadcrumbs/src/breadcrumbs.stories.ts @@ -7,7 +7,7 @@ type Props = Pick & { breadcrumbs: TemplateRe type Story = StoryObj; export default { - title: 'Breadcrumbs', + title: 'Components/Breadcrumbs', args: { homeUrl: '/', noHome: false diff --git a/packages/components/button-bar/src/button-bar.stories.ts b/packages/components/button-bar/src/button-bar.stories.ts index 7b3a270e5f..cd1dae8679 100644 --- a/packages/components/button-bar/src/button-bar.stories.ts +++ b/packages/components/button-bar/src/button-bar.stories.ts @@ -9,7 +9,7 @@ type Props = Pick & { buttons: TemplateResult }; type Story = StoryObj; export default { - title: 'Button bar', + title: 'Components/Button bar', args: { align: 'start', reverse: false diff --git a/packages/components/button/src/button.stories.ts b/packages/components/button/src/button.stories.ts index 712c1ccafb..c25463fd7b 100644 --- a/packages/components/button/src/button.stories.ts +++ b/packages/components/button/src/button.stories.ts @@ -22,7 +22,7 @@ const sizes: ButtonSize[] = ['sm', 'md', 'lg']; Icon.register(faPinata); export default { - title: 'Button', + title: 'Components/Button', args: { text: 'Button', icon: 'none', diff --git a/packages/components/card/src/card.stories.ts b/packages/components/card/src/card.stories.ts index b4a3367377..19b59314a4 100644 --- a/packages/components/card/src/card.stories.ts +++ b/packages/components/card/src/card.stories.ts @@ -24,7 +24,7 @@ type Story = StoryObj; const orientations = ['horizontal', 'vertical']; export default { - title: 'Card', + title: 'Components/Card', args: { title: 'Lorem Ipsum', bodyText: diff --git a/packages/components/checkbox/src/checkbox.stories.ts b/packages/components/checkbox/src/checkbox.stories.ts index 3c256bc2af..f31fc72ced 100644 --- a/packages/components/checkbox/src/checkbox.stories.ts +++ b/packages/components/checkbox/src/checkbox.stories.ts @@ -21,7 +21,7 @@ type Story = StoryObj; const sizes: CheckboxSize[] = ['sm', 'md', 'lg']; export default { - title: 'Checkbox', + title: 'Components/Checkbox', args: { checked: false, disabled: false, diff --git a/packages/components/dialog/src/dialog.stories.ts b/packages/components/dialog/src/dialog.stories.ts index ea1140c14e..9a68fb4cfd 100644 --- a/packages/components/dialog/src/dialog.stories.ts +++ b/packages/components/dialog/src/dialog.stories.ts @@ -22,7 +22,7 @@ type Story = StoryObj; Icon.register(faBurst); export default { - title: 'Dialog', + title: 'Components/Dialog', args: { body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac augue neque. Nunc sed ex ut neque lacinia rutrum nec vitae mi. Donec dictum urna elit, et feugiat nunc fringilla nec. Maecenas nisi lorem, facilisis nec libero ut, hendrerit ultricies orci. Vivamus massa ligula, ultricies quis odio a, scelerisque tincidunt lorem. Morbi quis pulvinar augue. Nunc eros magna, laoreet vitae ornare at, iaculis quis diam. Duis odio urna, viverra ut ex mattis, egestas tincidunt enim. Praesent ac ex tincidunt, hendrerit sem et, aliquam metus. Nunc quis nisi nulla. Sed nibh ante, posuere eu volutpat vitae, elementum ut leo. Ut aliquet tincidunt tellus, ut molestie urna ultrices in. Suspendisse potenti. Nunc non nunc eu nibh venenatis vestibulum. Maecenas rutrum nibh lacus. Fusce sodales purus ut arcu hendrerit, non interdum nulla suscipit. Duis vitae felis facilisis, eleifend ipsum ut, condimentum est. Nullam metus massa, venenatis vitae suscipit in, feugiat quis turpis. In pellentesque velit at sagittis mattis. Nam ut tellus elit. Proin luctus lectus velit, ut ultricies libero blandit blandit. Aenean molestie est ipsum, in dictum turpis dictum nec.', closeButton: true, diff --git a/packages/components/drawer/src/drawer.stories.ts b/packages/components/drawer/src/drawer.stories.ts index 68fd0d8401..4b25ce3012 100644 --- a/packages/components/drawer/src/drawer.stories.ts +++ b/packages/components/drawer/src/drawer.stories.ts @@ -5,7 +5,7 @@ import '../register.js'; import { type Drawer } from './drawer.js'; export default { - title: 'Drawer', + title: 'Components/Drawer', args: { attachment: 'right', buttonSize: 'sm' diff --git a/packages/components/editor/src/editor.stories.ts b/packages/components/editor/src/editor.stories.ts index a0850eee84..9dcd084b23 100644 --- a/packages/components/editor/src/editor.stories.ts +++ b/packages/components/editor/src/editor.stories.ts @@ -9,7 +9,7 @@ interface Props { type Story = StoryObj; export default { - title: 'Editor', + title: 'Components/Editor', render: ({ value }) => { return html``; } diff --git a/packages/components/icon/src/icon.stories.ts b/packages/components/icon/src/icon.stories.ts index fa1fb4e4db..077c8a6180 100644 --- a/packages/components/icon/src/icon.stories.ts +++ b/packages/components/icon/src/icon.stories.ts @@ -45,7 +45,7 @@ const copyIconName = async (name: string): Promise => { }; export default { - title: 'Icon', + title: 'Components/Icon', args: { icons: Object.keys(window.SLDS?.icons) }, diff --git a/packages/components/inline-message/src/inline-message.stories.ts b/packages/components/inline-message/src/inline-message.stories.ts index 56dd110e53..9f25a6d01c 100644 --- a/packages/components/inline-message/src/inline-message.stories.ts +++ b/packages/components/inline-message/src/inline-message.stories.ts @@ -22,7 +22,7 @@ const onClose = (): void => { }; export default { - title: 'Inline message' + title: 'Components/Inline message' }; export const API: StoryObj = { diff --git a/packages/components/menu/src/menu-button.stories.ts b/packages/components/menu/src/menu-button.stories.ts index e3a22c9e8b..722280e04e 100644 --- a/packages/components/menu/src/menu-button.stories.ts +++ b/packages/components/menu/src/menu-button.stories.ts @@ -18,7 +18,7 @@ type Story = StoryObj; Icon.register(faGear, faList, faRectanglesMixed, faTableCells); export default { - title: 'Menu button', + title: 'Components/Menu button', args: { alignSelf: 'center', body: 'Button', diff --git a/packages/components/menu/src/menu.stories.ts b/packages/components/menu/src/menu.stories.ts index fefe36732d..76c3385610 100644 --- a/packages/components/menu/src/menu.stories.ts +++ b/packages/components/menu/src/menu.stories.ts @@ -39,7 +39,7 @@ Icon.register( ); export default { - title: 'Menu', + title: 'Components/Menu', args: { maxWidth: '200px' }, diff --git a/packages/components/message-dialog/src/message-dialog.stories.ts b/packages/components/message-dialog/src/message-dialog.stories.ts index 20a73f44d5..3269969288 100644 --- a/packages/components/message-dialog/src/message-dialog.stories.ts +++ b/packages/components/message-dialog/src/message-dialog.stories.ts @@ -7,7 +7,7 @@ type Props = MessageDialogConfig & { onClick(args: Props): Promise }; type Story = StoryObj; export default { - title: 'Message dialog', + title: 'Components/Message dialog', render: args => { const onClick = async (): Promise => { const result = await args.onClick(args); diff --git a/packages/components/popover/src/popover.stories.ts b/packages/components/popover/src/popover.stories.ts index 7ddbc53d56..0cf46dfe77 100644 --- a/packages/components/popover/src/popover.stories.ts +++ b/packages/components/popover/src/popover.stories.ts @@ -14,7 +14,7 @@ type Props = Pick & { type Story = StoryObj; export default { - title: 'Popover', + title: 'Components/Popover', args: { alignSelf: 'center', body: "I'm a popover example", diff --git a/packages/components/radio-group/src/radio-group.stories.ts b/packages/components/radio-group/src/radio-group.stories.ts index 15ffbedac5..e98695f26b 100644 --- a/packages/components/radio-group/src/radio-group.stories.ts +++ b/packages/components/radio-group/src/radio-group.stories.ts @@ -18,7 +18,7 @@ type Story = StoryObj; const sizes: RadioButtonSize[] = ['md', 'lg']; export default { - title: 'Radio group', + title: 'Components/Radio group', args: { disabled: false, horizontal: false, diff --git a/packages/components/select/src/select.stories.ts b/packages/components/select/src/select.stories.ts index 3b3d2e5a93..9980526a2f 100644 --- a/packages/components/select/src/select.stories.ts +++ b/packages/components/select/src/select.stories.ts @@ -19,7 +19,7 @@ type Story = StoryObj; const sizes: SelectSize[] = ['md', 'lg']; export default { - title: 'Select', + title: 'Components/Select', args: { disabled: false, label: 'Label', diff --git a/packages/components/skeleton/src/skeleton.stories.ts b/packages/components/skeleton/src/skeleton.stories.ts index 69eaca1095..2384660491 100644 --- a/packages/components/skeleton/src/skeleton.stories.ts +++ b/packages/components/skeleton/src/skeleton.stories.ts @@ -6,7 +6,7 @@ import '../register.js'; type Story = StoryObj; export default { - title: 'Skeleton' + title: 'Components/Skeleton' }; export const API: Story = { diff --git a/packages/components/spinner/src/spinner.stories.ts b/packages/components/spinner/src/spinner.stories.ts index d5ce98cd16..d5c1e5c344 100644 --- a/packages/components/spinner/src/spinner.stories.ts +++ b/packages/components/spinner/src/spinner.stories.ts @@ -35,7 +35,7 @@ const sizeName = (size: string): string => { }; export default { - title: 'Spinner', + title: 'Components/Spinner', args: { size: 'md' }, diff --git a/packages/components/switch/src/switch.stories.ts b/packages/components/switch/src/switch.stories.ts index caf7d919ec..d42116ea3e 100644 --- a/packages/components/switch/src/switch.stories.ts +++ b/packages/components/switch/src/switch.stories.ts @@ -17,7 +17,7 @@ type Story = StoryObj; const sizes: SwitchSize[] = ['sm', 'md', 'lg']; export default { - title: 'Switch', + title: 'Components/Switch', args: { checked: false, disabled: false, diff --git a/packages/components/tabs/src/tab-group.stories.ts b/packages/components/tabs/src/tab-group.stories.ts index a4cf610ad2..34501addf9 100644 --- a/packages/components/tabs/src/tab-group.stories.ts +++ b/packages/components/tabs/src/tab-group.stories.ts @@ -6,7 +6,7 @@ import '../register.js'; import { type Tab } from './tab.js'; export default { - title: 'Tab Group', + title: 'Components/Tab Group', args: { vertical: false, alignment: 'start' diff --git a/packages/components/text-field/src/text-field.stories.ts b/packages/components/text-field/src/text-field.stories.ts index b2446cbe6a..5728990629 100644 --- a/packages/components/text-field/src/text-field.stories.ts +++ b/packages/components/text-field/src/text-field.stories.ts @@ -30,7 +30,7 @@ type Story = StoryObj; const sizes: TextFieldSize[] = ['md', 'lg']; export default { - title: 'Text field', + title: 'Components/Text field', args: { disabled: false, label: 'Label', diff --git a/packages/components/textarea/src/textarea.stories.ts b/packages/components/textarea/src/textarea.stories.ts index 2d8e2c10bb..598e22ae5a 100644 --- a/packages/components/textarea/src/textarea.stories.ts +++ b/packages/components/textarea/src/textarea.stories.ts @@ -28,7 +28,7 @@ type Story = StoryObj; const sizes: TextareaSize[] = ['md', 'lg']; export default { - title: 'Textarea', + title: 'Components/Textarea', args: { disabled: false, label: 'Label', diff --git a/packages/components/tooltip/src/tooltip.stories.ts b/packages/components/tooltip/src/tooltip.stories.ts index 4df9f01d2b..559ccdd9f7 100644 --- a/packages/components/tooltip/src/tooltip.stories.ts +++ b/packages/components/tooltip/src/tooltip.stories.ts @@ -16,7 +16,7 @@ type Props = Pick & { type Story = StoryObj; export default { - title: 'Tooltip', + title: 'Components/Tooltip', args: { alignSelf: 'center', justifySelf: 'center', diff --git a/packages/themes/bingel-dc/all.css b/packages/themes/bingel-dc/all.css index 1d6f2581ee..a068635642 100644 --- a/packages/themes/bingel-dc/all.css +++ b/packages/themes/bingel-dc/all.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -802,9 +804,9 @@ @media (prefers-color-scheme: light) { :root { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/bingel-dc/base.css b/packages/themes/bingel-dc/base.css index a29d6802cc..397f0d70c2 100644 --- a/packages/themes/bingel-dc/base.css +++ b/packages/themes/bingel-dc/base.css @@ -232,6 +232,8 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/bingel-dc/base.json b/packages/themes/bingel-dc/base.json index c7a039269f..5d25b1ca5e 100644 --- a/packages/themes/bingel-dc/base.json +++ b/packages/themes/bingel-dc/base.json @@ -4279,6 +4279,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/bingel-dc/base.scss b/packages/themes/bingel-dc/base.scss index 0878269b22..2b8a44acd6 100644 --- a/packages/themes/bingel-dc/base.scss +++ b/packages/themes/bingel-dc/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -233,7 +233,9 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -303,8 +305,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/bingel-dc/light.css b/packages/themes/bingel-dc/light.css index a6eacd3a24..7bfc965196 100644 --- a/packages/themes/bingel-dc/light.css +++ b/packages/themes/bingel-dc/light.css @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/bingel-dc/light.scss b/packages/themes/bingel-dc/light.scss index 9756bf184e..d803bea6c5 100644 --- a/packages/themes/bingel-dc/light.scss +++ b/packages/themes/bingel-dc/light.scss @@ -4,9 +4,9 @@ */ @mixin sl-theme-light { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -489,17 +489,17 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-select-item-active-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-hover-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-select-panel-bacground: var(--sl-body-background); --sl-color-input-field-label-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/bingel-int/all.css b/packages/themes/bingel-int/all.css index 077472aebf..ff920222fe 100644 --- a/packages/themes/bingel-int/all.css +++ b/packages/themes/bingel-int/all.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -810,9 +812,9 @@ @media (prefers-color-scheme: light) { :root { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/bingel-int/base.css b/packages/themes/bingel-int/base.css index f2c3772473..ecda011c3d 100644 --- a/packages/themes/bingel-int/base.css +++ b/packages/themes/bingel-int/base.css @@ -232,6 +232,8 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/bingel-int/base.json b/packages/themes/bingel-int/base.json index aec570a820..0435977d47 100644 --- a/packages/themes/bingel-int/base.json +++ b/packages/themes/bingel-int/base.json @@ -4321,6 +4321,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/bingel-int/base.scss b/packages/themes/bingel-int/base.scss index db0ecc0d83..fec0569eef 100644 --- a/packages/themes/bingel-int/base.scss +++ b/packages/themes/bingel-int/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -233,7 +233,9 @@ --sl-color-palette-primary-150: 129 186 239; --sl-color-palette-primary-100: 172 210 245; --sl-color-palette-primary-50: 230 241 251; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -303,8 +305,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/bingel-int/light.css b/packages/themes/bingel-int/light.css index 8fcca9e101..914858c7fe 100644 --- a/packages/themes/bingel-int/light.css +++ b/packages/themes/bingel-int/light.css @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/bingel-int/light.scss b/packages/themes/bingel-int/light.scss index e663b39cb4..eefd550c6a 100644 --- a/packages/themes/bingel-int/light.scss +++ b/packages/themes/bingel-int/light.scss @@ -4,9 +4,9 @@ */ @mixin sl-theme-light { + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-500)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -490,17 +490,17 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-select-item-active-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-hover-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-select-panel-bacground: var(--sl-body-background); --sl-color-input-field-label-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/bingel/all.css b/packages/themes/bingel/all.css index 54e0db5ce9..ca58fc60b3 100644 --- a/packages/themes/bingel/all.css +++ b/packages/themes/bingel/all.css @@ -162,6 +162,8 @@ --sl-text-typeset-font-family-body: open-sans; --sl-text-typeset-font-family-heading: open-sans; --sl-color-palette-neutral-base: 170 179 189; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/bingel/base.css b/packages/themes/bingel/base.css index e0537dea8e..9bbe6322a0 100644 --- a/packages/themes/bingel/base.css +++ b/packages/themes/bingel/base.css @@ -154,6 +154,8 @@ --sl-text-typeset-font-family-body: open-sans; --sl-text-typeset-font-family-heading: open-sans; --sl-color-palette-neutral-base: 170 179 189; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/bingel/base.json b/packages/themes/bingel/base.json index fa9c7a4d5d..9c2353dfc6 100644 --- a/packages/themes/bingel/base.json +++ b/packages/themes/bingel/base.json @@ -2902,6 +2902,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/bingel/base.scss b/packages/themes/bingel/base.scss index f0243a84e4..48d1859e6b 100644 --- a/packages/themes/bingel/base.scss +++ b/packages/themes/bingel/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -155,7 +155,9 @@ --sl-text-typeset-font-family-body: open-sans; --sl-text-typeset-font-family-heading: open-sans; --sl-color-palette-neutral-base: 170 179 189; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -220,8 +222,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-card-slotheader-badges-gap: var(--sl-space-sm); diff --git a/packages/themes/clickedu/all.css b/packages/themes/clickedu/all.css index 46c4b3639e..238d40b059 100644 --- a/packages/themes/clickedu/all.css +++ b/packages/themes/clickedu/all.css @@ -242,6 +242,8 @@ --sl-color-palette-primary-150: 254 159 166; --sl-color-palette-primary-100: 254 192 196; --sl-color-palette-primary-50: 255 225 227; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -804,8 +806,8 @@ @media (prefers-color-scheme: light) { :root { --sl-box-shadow-none: 0 0 0 0; - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -1201,9 +1203,9 @@ --sl-color-badge-danger-background: rgb(var(--sl-color-palette-danger-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-500)); + --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-box-shadow-tooltip: [object Object]; --sl-box-shadow-select-listbox: [object Object]; - --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-color-skeleton-shimmer: linear-gradient ( 90deg, diff --git a/packages/themes/clickedu/base.css b/packages/themes/clickedu/base.css index cb35a927bd..ee7e773b4c 100644 --- a/packages/themes/clickedu/base.css +++ b/packages/themes/clickedu/base.css @@ -234,6 +234,8 @@ --sl-color-palette-primary-150: 254 159 166; --sl-color-palette-primary-100: 254 192 196; --sl-color-palette-primary-50: 255 225 227; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/clickedu/base.json b/packages/themes/clickedu/base.json index a43582f1c8..6578e0cb01 100644 --- a/packages/themes/clickedu/base.json +++ b/packages/themes/clickedu/base.json @@ -4283,6 +4283,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/clickedu/base.scss b/packages/themes/clickedu/base.scss index 19502cf92c..a957d216e7 100644 --- a/packages/themes/clickedu/base.scss +++ b/packages/themes/clickedu/base.scss @@ -103,7 +103,7 @@ --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; --sl-border-radius-button-lg: 20px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-sm: 12px; --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -235,7 +235,9 @@ --sl-color-palette-primary-150: 254 159 166; --sl-color-palette-primary-100: 254 192 196; --sl-color-palette-primary-50: 255 225 227; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -305,8 +307,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/clickedu/light.css b/packages/themes/clickedu/light.css index e93a0ff888..33197511f8 100644 --- a/packages/themes/clickedu/light.css +++ b/packages/themes/clickedu/light.css @@ -4,8 +4,8 @@ */ :root { --sl-box-shadow-none: 0 0 0 0; - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -401,9 +401,9 @@ --sl-color-badge-danger-background: rgb(var(--sl-color-palette-danger-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-500)); + --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-box-shadow-tooltip: [object Object]; --sl-box-shadow-select-listbox: [object Object]; - --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-color-skeleton-shimmer: linear-gradient ( 90deg, diff --git a/packages/themes/clickedu/light.scss b/packages/themes/clickedu/light.scss index a60a7ec465..216671eb8c 100644 --- a/packages/themes/clickedu/light.scss +++ b/packages/themes/clickedu/light.scss @@ -5,8 +5,8 @@ @mixin sl-theme-light { --sl-box-shadow-none: 0 0 0 0; - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -402,9 +402,9 @@ --sl-color-badge-danger-background: rgb(var(--sl-color-palette-danger-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-500)); - --sl-box-shadow-tooltip: [object Object]; - --sl-box-shadow-select-listbox: [object Object]; --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); + --sl-box-shadow-tooltip: [object object]; + --sl-box-shadow-select-listbox: [object object]; --sl-color-skeleton-shimmer: linear-gradient ( 90deg, @@ -541,14 +541,14 @@ --sl-color-select-selectbox-default-default-placeholder: var(--sl-color-input-text-field-default-default-placeholder); --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-button-danger-link-disabled-border: var(--sl-color-button-default-link-idle-background); --sl-color-button-danger-link-disabled-background: var(--sl-color-button-default-link-idle-background); --sl-color-button-danger-link-active-border: var(--sl-color-button-default-link-idle-background); diff --git a/packages/themes/editorial-suite/all.css b/packages/themes/editorial-suite/all.css index e92be08bea..6703d320c7 100644 --- a/packages/themes/editorial-suite/all.css +++ b/packages/themes/editorial-suite/all.css @@ -243,6 +243,8 @@ --sl-color-palette-primary-150: 151 212 210; --sl-color-palette-primary-100: 185 227 225; --sl-color-palette-primary-50: 220 241 240; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -811,13 +813,13 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/editorial-suite/base.css b/packages/themes/editorial-suite/base.css index 512f831a4c..f2e5604786 100644 --- a/packages/themes/editorial-suite/base.css +++ b/packages/themes/editorial-suite/base.css @@ -235,6 +235,8 @@ --sl-color-palette-primary-150: 151 212 210; --sl-color-palette-primary-100: 185 227 225; --sl-color-palette-primary-50: 220 241 240; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/editorial-suite/base.json b/packages/themes/editorial-suite/base.json index be6a225851..6d5269cd92 100644 --- a/packages/themes/editorial-suite/base.json +++ b/packages/themes/editorial-suite/base.json @@ -4318,6 +4318,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/editorial-suite/base.scss b/packages/themes/editorial-suite/base.scss index 3f497b9e50..5006be544c 100644 --- a/packages/themes/editorial-suite/base.scss +++ b/packages/themes/editorial-suite/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -145,7 +145,7 @@ --sl-text-typeset-font-size-md: 14px; --sl-text-typeset-font-size-sm: 12px; --sl-text-typeset-font-size-xs: 10px; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -236,7 +236,9 @@ --sl-color-palette-primary-150: 151 212 210; --sl-color-palette-primary-100: 185 227 225; --sl-color-palette-primary-50: 220 241 240; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -504,8 +506,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-conceptual-border-width-default: var(--sl-border-width-xs); diff --git a/packages/themes/editorial-suite/light.css b/packages/themes/editorial-suite/light.css index 2d3c9ccc67..f9026bb656 100644 --- a/packages/themes/editorial-suite/light.css +++ b/packages/themes/editorial-suite/light.css @@ -3,13 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/editorial-suite/light.scss b/packages/themes/editorial-suite/light.scss index 9b7538a639..44ceead6f1 100644 --- a/packages/themes/editorial-suite/light.scss +++ b/packages/themes/editorial-suite/light.scss @@ -4,13 +4,13 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -419,14 +419,14 @@ --sl-color-select-selectbox-default-active-background: var(--sl-color-input-text-field-default-active-background); --sl-color-select-selectbox-default-hover-background: var(--sl-color-input-text-field-default-hover-background); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-select-panel-bacground: var(--sl-body-background); --sl-color-input-field-label-select-focus-foreground: rgb(var(--sl-color-palette-neutral-600)); --sl-color-input-field-label-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); diff --git a/packages/themes/itslearning/all.css b/packages/themes/itslearning/all.css index bdb6e691e5..e1373cb443 100644 --- a/packages/themes/itslearning/all.css +++ b/packages/themes/itslearning/all.css @@ -248,6 +248,8 @@ --sl-color-palette-primary-150: 233 228 236; --sl-color-palette-primary-100: 239 235 241; --sl-color-palette-primary-50: 244 242 246; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -802,10 +804,10 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-300)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); diff --git a/packages/themes/itslearning/base.css b/packages/themes/itslearning/base.css index 9855a1697c..92181f6078 100644 --- a/packages/themes/itslearning/base.css +++ b/packages/themes/itslearning/base.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 233 228 236; --sl-color-palette-primary-100: 239 235 241; --sl-color-palette-primary-50: 244 242 246; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/itslearning/base.json b/packages/themes/itslearning/base.json index f5a99fe774..40bd613c88 100644 --- a/packages/themes/itslearning/base.json +++ b/packages/themes/itslearning/base.json @@ -4279,6 +4279,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/itslearning/base.scss b/packages/themes/itslearning/base.scss index 15194c6020..e1f249b221 100644 --- a/packages/themes/itslearning/base.scss +++ b/packages/themes/itslearning/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -241,7 +241,9 @@ --sl-color-palette-primary-150: 233 228 236; --sl-color-palette-primary-100: 239 235 241; --sl-color-palette-primary-50: 244 242 246; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -311,8 +313,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/itslearning/light.css b/packages/themes/itslearning/light.css index 9622b1b027..51d1f40301 100644 --- a/packages/themes/itslearning/light.css +++ b/packages/themes/itslearning/light.css @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-300)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); diff --git a/packages/themes/itslearning/light.scss b/packages/themes/itslearning/light.scss index 80b8e94042..4e137107bc 100644 --- a/packages/themes/itslearning/light.scss +++ b/packages/themes/itslearning/light.scss @@ -4,10 +4,10 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-500) / var(--sl-opacity-700)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-300)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); @@ -517,12 +517,12 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); --sl-color-input-field-label-icon-disabled: var(--sl-body-foreground); --sl-color-input-field-label-icon-default: var(--sl-body-foreground); diff --git a/packages/themes/kampus/all.css b/packages/themes/kampus/all.css index 97825d77e4..3935f8e707 100644 --- a/packages/themes/kampus/all.css +++ b/packages/themes/kampus/all.css @@ -248,6 +248,8 @@ --sl-color-palette-primary-150: 224 210 239; --sl-color-palette-primary-100: 240 236 245; --sl-color-palette-primary-50: 254 254 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -802,10 +804,10 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/kampus/base.css b/packages/themes/kampus/base.css index e6aea2c649..08d0319a23 100644 --- a/packages/themes/kampus/base.css +++ b/packages/themes/kampus/base.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 224 210 239; --sl-color-palette-primary-100: 240 236 245; --sl-color-palette-primary-50: 254 254 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/kampus/base.json b/packages/themes/kampus/base.json index 7cadaaa370..d0150c4375 100644 --- a/packages/themes/kampus/base.json +++ b/packages/themes/kampus/base.json @@ -4279,6 +4279,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/kampus/base.scss b/packages/themes/kampus/base.scss index 1d9ca7c0b0..a661bd76c2 100644 --- a/packages/themes/kampus/base.scss +++ b/packages/themes/kampus/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -241,7 +241,9 @@ --sl-color-palette-primary-150: 224 210 239; --sl-color-palette-primary-100: 240 236 245; --sl-color-palette-primary-50: 254 254 255; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -311,8 +313,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/kampus/light.css b/packages/themes/kampus/light.css index 1ace75e2f6..2d6fec10e7 100644 --- a/packages/themes/kampus/light.css +++ b/packages/themes/kampus/light.css @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/kampus/light.scss b/packages/themes/kampus/light.scss index 39a505ebee..e1947d72f6 100644 --- a/packages/themes/kampus/light.scss +++ b/packages/themes/kampus/light.scss @@ -4,10 +4,10 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-600)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -468,14 +468,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-popover-foreground: var(--sl-body-foreground); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); --sl-color-input-field-label-icon-default: var(--sl-body-foreground); diff --git a/packages/themes/magister/all.css b/packages/themes/magister/all.css index ca2b3a958d..2d0822c95e 100644 --- a/packages/themes/magister/all.css +++ b/packages/themes/magister/all.css @@ -245,6 +245,8 @@ --sl-color-palette-primary-150: 151 207 252; --sl-color-palette-primary-100: 183 222 253; --sl-color-palette-primary-50: 221 239 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -807,12 +809,12 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-800) / var(--sl-opacity-900)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -1583,10 +1585,10 @@ } @media (prefers-color-scheme: dark) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-700) / var(--sl-opacity-600)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-primary-800)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-primary-900)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-900)); @@ -1965,9 +1967,9 @@ --sl-color-button-default-solid-hover-background: rgb(var(--sl-color-palette-primary-100)); --sl-color-button-default-solid-idle-foreground: rgb(var(--sl-color-palette-primary-800)); --sl-color-button-default-solid-idle-background: rgb(var(--sl-color-palette-primary-50)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-body-background: var(--sl-color-surface-solid-primary-background); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-color-skeleton-shimmer: linear-gradient ( 90deg, diff --git a/packages/themes/magister/base.css b/packages/themes/magister/base.css index 97c98662ae..a85e5b187d 100644 --- a/packages/themes/magister/base.css +++ b/packages/themes/magister/base.css @@ -237,6 +237,8 @@ --sl-color-palette-primary-150: 151 207 252; --sl-color-palette-primary-100: 183 222 253; --sl-color-palette-primary-50: 221 239 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/magister/base.json b/packages/themes/magister/base.json index c61421bb86..66a2ddaa06 100644 --- a/packages/themes/magister/base.json +++ b/packages/themes/magister/base.json @@ -4299,6 +4299,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/magister/base.scss b/packages/themes/magister/base.scss index a384b9a608..69ae6d63f8 100644 --- a/packages/themes/magister/base.scss +++ b/packages/themes/magister/base.scss @@ -238,6 +238,8 @@ --sl-color-palette-primary-150: 151 207 252; --sl-color-palette-primary-100: 183 222 253; --sl-color-palette-primary-50: 221 239 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/magister/dark.css b/packages/themes/magister/dark.css index 8ab3e056cc..54d1763233 100644 --- a/packages/themes/magister/dark.css +++ b/packages/themes/magister/dark.css @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-700) / var(--sl-opacity-600)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-primary-800)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-primary-900)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-900)); @@ -385,9 +385,9 @@ --sl-color-button-default-solid-hover-background: rgb(var(--sl-color-palette-primary-100)); --sl-color-button-default-solid-idle-foreground: rgb(var(--sl-color-palette-primary-800)); --sl-color-button-default-solid-idle-background: rgb(var(--sl-color-palette-primary-50)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-body-background: var(--sl-color-surface-solid-primary-background); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-color-skeleton-shimmer: linear-gradient ( 90deg, diff --git a/packages/themes/magister/dark.scss b/packages/themes/magister/dark.scss index 36456409cf..cca59c5674 100644 --- a/packages/themes/magister/dark.scss +++ b/packages/themes/magister/dark.scss @@ -4,10 +4,10 @@ */ @mixin sl-theme-dark { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-700) / var(--sl-opacity-600)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-primary-800)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-primary-900)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-900)); @@ -386,9 +386,9 @@ --sl-color-button-default-solid-hover-background: rgb(var(--sl-color-palette-primary-100)); --sl-color-button-default-solid-idle-foreground: rgb(var(--sl-color-palette-primary-800)); --sl-color-button-default-solid-idle-background: rgb(var(--sl-color-palette-primary-50)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-foreground: var(--sl-color-surface-solid-primary-foreground); --sl-body-background: var(--sl-color-surface-solid-primary-background); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-color-skeleton-shimmer: linear-gradient ( 90deg, @@ -598,17 +598,17 @@ --sl-color-select-selectbox-default-active-placeholder: var(--sl-color-input-text-field-default-active-placeholder); --sl-color-select-selectbox-default-hover-placeholder: var(--sl-color-input-text-field-default-hover-placeholder); --sl-color-select-selectbox-default-hover-border: var(--sl-color-input-text-field-default-hover-border); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-select-item-active-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-hover-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-popover-foreground: var(--sl-body-foreground); --sl-color-dialog-border: var(--sl-body-background); --sl-color-dialog-foreground: var(--sl-body-foreground); diff --git a/packages/themes/magister/light.css b/packages/themes/magister/light.css index 4fd9ca88c7..6fed391d50 100644 --- a/packages/themes/magister/light.css +++ b/packages/themes/magister/light.css @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-800) / var(--sl-opacity-900)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/magister/light.scss b/packages/themes/magister/light.scss index fd2d9cd61e..2df7c44f4a 100644 --- a/packages/themes/magister/light.scss +++ b/packages/themes/magister/light.scss @@ -4,12 +4,12 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-800) / var(--sl-opacity-900)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -454,15 +454,15 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-default-indicator: rgb(var(--sl-color-palette-primary-base)); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); --sl-color-input-field-label-icon-default: var(--sl-body-foreground); --sl-color-input-field-label-text-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/max/all.css b/packages/themes/max/all.css index c5b83d2e3f..7f7f66b919 100644 --- a/packages/themes/max/all.css +++ b/packages/themes/max/all.css @@ -248,6 +248,8 @@ --sl-color-palette-primary-150: 222 224 227; --sl-color-palette-primary-100: 238 239 241; --sl-color-palette-primary-50: 254 254 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -802,10 +804,10 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/max/base.css b/packages/themes/max/base.css index 058bb1a0fd..64afd6d446 100644 --- a/packages/themes/max/base.css +++ b/packages/themes/max/base.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 222 224 227; --sl-color-palette-primary-100: 238 239 241; --sl-color-palette-primary-50: 254 254 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/max/base.json b/packages/themes/max/base.json index 7ef4f6777c..52ed39929a 100644 --- a/packages/themes/max/base.json +++ b/packages/themes/max/base.json @@ -4279,6 +4279,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/max/base.scss b/packages/themes/max/base.scss index 1d54cc7aeb..69421e66c0 100644 --- a/packages/themes/max/base.scss +++ b/packages/themes/max/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -241,7 +241,9 @@ --sl-color-palette-primary-150: 222 224 227; --sl-color-palette-primary-100: 238 239 241; --sl-color-palette-primary-50: 254 254 254; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -311,8 +313,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/max/light.css b/packages/themes/max/light.css index dea2761c0b..38371b3287 100644 --- a/packages/themes/max/light.css +++ b/packages/themes/max/light.css @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/max/light.scss b/packages/themes/max/light.scss index eeb6ce2e20..14ff5cbaae 100644 --- a/packages/themes/max/light.scss +++ b/packages/themes/max/light.scss @@ -4,10 +4,10 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-400)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/my-digital-book/all.css b/packages/themes/my-digital-book/all.css index 7ce697bbca..4802b0719f 100644 --- a/packages/themes/my-digital-book/all.css +++ b/packages/themes/my-digital-book/all.css @@ -245,6 +245,8 @@ --sl-color-palette-primary-150: 163 195 231; --sl-color-palette-primary-100: 179 209 243; --sl-color-palette-primary-50: 232 243 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -806,13 +808,13 @@ @media (prefers-color-scheme: light) { :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/my-digital-book/base.css b/packages/themes/my-digital-book/base.css index c811d39155..8621ee234c 100644 --- a/packages/themes/my-digital-book/base.css +++ b/packages/themes/my-digital-book/base.css @@ -237,6 +237,8 @@ --sl-color-palette-primary-150: 163 195 231; --sl-color-palette-primary-100: 179 209 243; --sl-color-palette-primary-50: 232 243 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/my-digital-book/base.json b/packages/themes/my-digital-book/base.json index e91f08d19c..ce36a94b7f 100644 --- a/packages/themes/my-digital-book/base.json +++ b/packages/themes/my-digital-book/base.json @@ -4290,6 +4290,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/my-digital-book/base.scss b/packages/themes/my-digital-book/base.scss index 8ff464d3ff..c3ad125114 100644 --- a/packages/themes/my-digital-book/base.scss +++ b/packages/themes/my-digital-book/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -146,7 +146,7 @@ --sl-text-typeset-font-size-sm: 12px; --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -238,7 +238,9 @@ --sl-color-palette-primary-150: 163 195 231; --sl-color-palette-primary-100: 179 209 243; --sl-color-palette-primary-50: 232 243 255; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -508,8 +510,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-border-width-card-border: var(--sl-border-width-xs); diff --git a/packages/themes/my-digital-book/light.css b/packages/themes/my-digital-book/light.css index 472af5624f..947252f52b 100644 --- a/packages/themes/my-digital-book/light.css +++ b/packages/themes/my-digital-book/light.css @@ -4,13 +4,13 @@ */ :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/my-digital-book/light.scss b/packages/themes/my-digital-book/light.scss index 4d571ff877..4f9f9dd1a2 100644 --- a/packages/themes/my-digital-book/light.scss +++ b/packages/themes/my-digital-book/light.scss @@ -5,13 +5,13 @@ @mixin sl-theme-light { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -472,14 +472,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-panel-bacground: var(--sl-body-background); --sl-color-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/myvanin/all.css b/packages/themes/myvanin/all.css index 5c295a844d..083fdb8523 100644 --- a/packages/themes/myvanin/all.css +++ b/packages/themes/myvanin/all.css @@ -248,6 +248,8 @@ --sl-color-palette-primary-150: 215 140 195; --sl-color-palette-primary-100: 229 179 215; --sl-color-palette-primary-50: 242 218 236; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -805,13 +807,13 @@ @media (prefers-color-scheme: light) { :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/myvanin/base.css b/packages/themes/myvanin/base.css index a95e6e4419..96b9f908c7 100644 --- a/packages/themes/myvanin/base.css +++ b/packages/themes/myvanin/base.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 215 140 195; --sl-color-palette-primary-100: 229 179 215; --sl-color-palette-primary-50: 242 218 236; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/myvanin/base.json b/packages/themes/myvanin/base.json index b6b4f0bfd3..87e5de2066 100644 --- a/packages/themes/myvanin/base.json +++ b/packages/themes/myvanin/base.json @@ -4287,6 +4287,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/myvanin/base.scss b/packages/themes/myvanin/base.scss index 6434d32d20..314424efc9 100644 --- a/packages/themes/myvanin/base.scss +++ b/packages/themes/myvanin/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -241,7 +241,9 @@ --sl-color-palette-primary-150: 215 140 195; --sl-color-palette-primary-100: 229 179 215; --sl-color-palette-primary-50: 242 218 236; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -511,8 +513,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-border-width-card-border: var(--sl-border-width-xs); diff --git a/packages/themes/myvanin/light.css b/packages/themes/myvanin/light.css index d508c95764..9c9aca676e 100644 --- a/packages/themes/myvanin/light.css +++ b/packages/themes/myvanin/light.css @@ -4,13 +4,13 @@ */ :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/myvanin/light.scss b/packages/themes/myvanin/light.scss index a88bf31c84..8d2f10ea14 100644 --- a/packages/themes/myvanin/light.scss +++ b/packages/themes/myvanin/light.scss @@ -5,13 +5,13 @@ @mixin sl-theme-light { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); @@ -476,14 +476,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-panel-bacground: var(--sl-body-background); --sl-color-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/neon/all.css b/packages/themes/neon/all.css index 092c96315a..c821312179 100644 --- a/packages/themes/neon/all.css +++ b/packages/themes/neon/all.css @@ -249,6 +249,8 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -803,9 +805,9 @@ @media (prefers-color-scheme: light) { :root { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -1588,10 +1590,10 @@ } @media (prefers-color-scheme: dark) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-700)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-800)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-700)); diff --git a/packages/themes/neon/base.css b/packages/themes/neon/base.css index 753a2e8e7e..b1490e1d65 100644 --- a/packages/themes/neon/base.css +++ b/packages/themes/neon/base.css @@ -241,6 +241,8 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/neon/base.json b/packages/themes/neon/base.json index c4bbb16ee5..a2f33c43fc 100644 --- a/packages/themes/neon/base.json +++ b/packages/themes/neon/base.json @@ -4279,6 +4279,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/neon/base.scss b/packages/themes/neon/base.scss index 2ad9467480..42e08d40ba 100644 --- a/packages/themes/neon/base.scss +++ b/packages/themes/neon/base.scss @@ -103,7 +103,7 @@ --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; --sl-border-radius-button-lg: 20px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-sm: 12px; --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -242,7 +242,9 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -312,8 +314,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-tab-content-vertical-gap: var(--sl-space-xl); diff --git a/packages/themes/neon/dark.css b/packages/themes/neon/dark.css index ea157d0265..c71a8e6482 100644 --- a/packages/themes/neon/dark.css +++ b/packages/themes/neon/dark.css @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-700)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-800)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-700)); diff --git a/packages/themes/neon/dark.scss b/packages/themes/neon/dark.scss index b6586cb78c..c460b5eccc 100644 --- a/packages/themes/neon/dark.scss +++ b/packages/themes/neon/dark.scss @@ -4,10 +4,10 @@ */ @mixin sl-theme-dark { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 4px rgba(var(--sl-color-palette-info-200) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-700)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-800)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-700)); @@ -450,7 +450,7 @@ --sl-color-badge-danger-background: rgb(var(--sl-color-palette-danger-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-primary-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-primary-150)); - --sl-box-shadow-tooltip: [object Object]; + --sl-box-shadow-tooltip: [object object]; --sl-color-skeleton-shimmer: linear-gradient ( 90deg, @@ -497,17 +497,17 @@ --sl-color-select-selectbox-default-default-placeholder: var(--sl-color-input-text-field-default-default-placeholder); --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-active-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-hover-indicator: var(--sl-color-select-item-default-indicator); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-select-panel-bacground: var(--sl-body-background); --sl-color-input-field-label-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); @@ -612,7 +612,7 @@ --sl-color-input-option-valid-unchecked-active-label: var(--sl-body-foreground); --sl-color-input-option-valid-unchecked-hover-label: var(--sl-body-foreground); --sl-color-input-option-valid-unchecked-default-label: var(--sl-body-foreground); - --sl-color-input-option-valid-unchecked-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-input-option-valid-unchecked-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-option-invalid-checked-disabled-background: var( --sl-color-input-option-default-checked-disabled-background ); diff --git a/packages/themes/neon/light.css b/packages/themes/neon/light.css index b35b4edc05..30bb5bb6be 100644 --- a/packages/themes/neon/light.css +++ b/packages/themes/neon/light.css @@ -4,9 +4,9 @@ */ :root { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/neon/light.scss b/packages/themes/neon/light.scss index 4596ab408b..132c282a04 100644 --- a/packages/themes/neon/light.scss +++ b/packages/themes/neon/light.scss @@ -5,10 +5,10 @@ @mixin sl-theme-light { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-300)), @@ -527,14 +527,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-select-panel-bacground: var(--sl-body-background); --sl-color-input-field-label-select-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/nowa-era/all.css b/packages/themes/nowa-era/all.css index 7c42389d35..eece92877d 100644 --- a/packages/themes/nowa-era/all.css +++ b/packages/themes/nowa-era/all.css @@ -249,6 +249,8 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -649,9 +651,9 @@ @media (prefers-color-scheme: light) { :root { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-focusring-default: rgb(var(--sl-color-palette-primary-base)); --sl-color-input-field-label-select-panel-bacground-copy: rgb(var(--sl-color-palette-neutral-100)); --sl-color-input-field-label-select-disabled-border: rgb(var(--sl-color-palette-transparent-base)); diff --git a/packages/themes/nowa-era/base.css b/packages/themes/nowa-era/base.css index 5611c21df4..958d7957f9 100644 --- a/packages/themes/nowa-era/base.css +++ b/packages/themes/nowa-era/base.css @@ -241,6 +241,8 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/nowa-era/base.json b/packages/themes/nowa-era/base.json index 057b4d04ee..0394471301 100644 --- a/packages/themes/nowa-era/base.json +++ b/packages/themes/nowa-era/base.json @@ -3436,6 +3436,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/nowa-era/base.scss b/packages/themes/nowa-era/base.scss index 748457f525..e355f3c5fb 100644 --- a/packages/themes/nowa-era/base.scss +++ b/packages/themes/nowa-era/base.scss @@ -103,7 +103,7 @@ --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; --sl-border-radius-button-lg: 20px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-sm: 12px; --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -242,7 +242,9 @@ --sl-color-palette-primary-150: 174 198 218; --sl-color-palette-primary-100: 197 222 242; --sl-color-palette-primary-50: 239 248 255; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -307,8 +309,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-space-card-slotheader-badges-gap: var(--sl-space-sm); diff --git a/packages/themes/nowa-era/light.css b/packages/themes/nowa-era/light.css index ce870c21c9..7606bbb3a8 100644 --- a/packages/themes/nowa-era/light.css +++ b/packages/themes/nowa-era/light.css @@ -4,9 +4,9 @@ */ :root { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-focusring-default: rgb(var(--sl-color-palette-primary-base)); --sl-color-input-field-label-select-panel-bacground-copy: rgb(var(--sl-color-palette-neutral-100)); --sl-color-input-field-label-select-disabled-border: rgb(var(--sl-color-palette-transparent-base)); diff --git a/packages/themes/nowa-era/light.scss b/packages/themes/nowa-era/light.scss index b69cddfd3a..ea4bade314 100644 --- a/packages/themes/nowa-era/light.scss +++ b/packages/themes/nowa-era/light.scss @@ -5,9 +5,9 @@ @mixin sl-theme-light { --sl-color-button-primary-ghost-hover-border: #; + --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); - --sl-body-background: rgb(var(--sl-color-palette-white-base)); --sl-color-focusring-default: rgb(var(--sl-color-palette-primary-base)); --sl-color-input-field-label-select-panel-bacground-copy: rgb(var(--sl-color-palette-neutral-100)); --sl-color-input-field-label-select-disabled-border: rgb(var(--sl-color-palette-transparent-base)); diff --git a/packages/themes/sanoma-learning/all.css b/packages/themes/sanoma-learning/all.css index 2d684fec21..acde2e7f7d 100644 --- a/packages/themes/sanoma-learning/all.css +++ b/packages/themes/sanoma-learning/all.css @@ -245,6 +245,8 @@ --sl-color-palette-primary-150: 213 213 213; --sl-color-palette-primary-100: 234 234 234; --sl-color-palette-primary-50: 254 254 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -526,6 +528,7 @@ --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-conceptual-border-width-default: var(--sl-border-width-xs); + --sl-border-width-slds-checklist: var(--sl-border-width-xs); --sl-border-width-card-border: var(--sl-border-width-xs); --sl-border-width-border-tabbar: var(--sl-border-width-xs); --sl-border-width-border-tab: var(--sl-border-width-xs); @@ -541,6 +544,7 @@ --sl-border-width-focusring-default: var(--sl-border-width-sm); --sl-border-width-input-option: var(--sl-border-width-xs); --sl-border-width-input-none: var(--sl-border-width-none); + --sl-border-radius-slds-checklist: var(--sl-border-radius-2xl); --sl-border-radius-badge-full: var(--sl-border-radius-full); --sl-border-radius-select-indicator: var(--sl-border-radius-3xs); --sl-border-radius-select-item: var(--sl-border-radius-3xs); @@ -618,6 +622,12 @@ var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-input-text-field-font-icon-md: var(--sl-text-typeset-font-weight-icon-solid) 15 / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-slds-checklist-listitem: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-body: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-heading: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); --sl-text-dialog-subheading: var(--sl-text-typeset-font-weight-demibold) var(--sl-icon-typeset-font-size-md) / var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-dialog-heading: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-xl) / @@ -825,14 +835,22 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay-copy: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-primary-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-600)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-500)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-400)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-500)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-200)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-accordion-active-border: rgb(var(--sl-color-palette-neutral-100)); --sl-color-accordion-active-icon: rgb(var(--sl-color-palette-accent-800)); --sl-color-accordion-active-foreground: rgb(var(--sl-color-palette-accent-800)); @@ -1307,6 +1325,9 @@ --sl-color-badge-info-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-base)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-400)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-accordion-active-background: var(--sl-body-background); --sl-color-accordion-disabled-header: var(--sl-body-background); --sl-color-accordion-disabled-background: var(--sl-body-background); @@ -1626,13 +1647,19 @@ } @media (prefers-color-scheme: dark) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-white-base) / var(--sl-opacity-500)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-800)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-900)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-150)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-200)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-300)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-400)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-800)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-active-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-tab-active-background: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-tabbar-border: rgb(var(--sl-color-palette-neutral-200)); @@ -2108,6 +2135,9 @@ --sl-color-badge-info-background: rgb(var(--sl-color-palette-info-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-black-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-300)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-300)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-tab-content-foreground: var(--sl-body-foreground); --sl-color-tab-content-background: var(--sl-body-background); --sl-color-tab-active-foreground: var(--sl-body-foreground); diff --git a/packages/themes/sanoma-learning/base.css b/packages/themes/sanoma-learning/base.css index d13b422265..74c2686520 100644 --- a/packages/themes/sanoma-learning/base.css +++ b/packages/themes/sanoma-learning/base.css @@ -237,6 +237,8 @@ --sl-color-palette-primary-150: 213 213 213; --sl-color-palette-primary-100: 234 234 234; --sl-color-palette-primary-50: 254 254 254; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -518,6 +520,7 @@ --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-conceptual-border-width-default: var(--sl-border-width-xs); + --sl-border-width-slds-checklist: var(--sl-border-width-xs); --sl-border-width-card-border: var(--sl-border-width-xs); --sl-border-width-border-tabbar: var(--sl-border-width-xs); --sl-border-width-border-tab: var(--sl-border-width-xs); @@ -533,6 +536,7 @@ --sl-border-width-focusring-default: var(--sl-border-width-sm); --sl-border-width-input-option: var(--sl-border-width-xs); --sl-border-width-input-none: var(--sl-border-width-none); + --sl-border-radius-slds-checklist: var(--sl-border-radius-2xl); --sl-border-radius-badge-full: var(--sl-border-radius-full); --sl-border-radius-select-indicator: var(--sl-border-radius-3xs); --sl-border-radius-select-item: var(--sl-border-radius-3xs); @@ -610,6 +614,12 @@ var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-input-text-field-font-icon-md: var(--sl-text-typeset-font-weight-icon-solid) 15 / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-slds-checklist-listitem: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-body: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-heading: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); --sl-text-dialog-subheading: var(--sl-text-typeset-font-weight-demibold) var(--sl-icon-typeset-font-size-md) / var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-dialog-heading: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-xl) / diff --git a/packages/themes/sanoma-learning/base.json b/packages/themes/sanoma-learning/base.json index 5a4a4a8783..a86190b83f 100644 --- a/packages/themes/sanoma-learning/base.json +++ b/packages/themes/sanoma-learning/base.json @@ -1530,6 +1530,37 @@ "type": "typography" } }, + "slds": { + "checklist": { + "heading": { + "value": { + "fontFamily": "{text.typeset.fontFamily.heading}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "lineHeight": "{text.typeset.lineHeight.xl}", + "fontSize": "{text.typeset.fontSize.xl}" + }, + "type": "typography" + }, + "body": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.regular}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + }, + "listitem": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + } + } + }, "input": { "textField": { "fontIcon": { @@ -2128,6 +2159,12 @@ "value": "{borderRadius.default}", "type": "borderRadius" } + }, + "slds": { + "checklist": { + "value": "{border.radius.2xl}", + "type": "borderRadius" + } } }, "border": { @@ -2252,6 +2289,12 @@ "type": "borderWidth" } }, + "slds": { + "checklist": { + "value": "{border.width.xs}", + "type": "borderWidth" + } + }, "none": { "value": 0, "type": "borderWidth", @@ -4402,6 +4445,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/sanoma-learning/base.scss b/packages/themes/sanoma-learning/base.scss index 426f91fcbb..a4eedd1be8 100644 --- a/packages/themes/sanoma-learning/base.scss +++ b/packages/themes/sanoma-learning/base.scss @@ -104,7 +104,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -149,7 +149,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -238,7 +238,9 @@ --sl-color-palette-primary-150: 213 213 213; --sl-color-palette-primary-100: 234 234 234; --sl-color-palette-primary-50: 254 254 254; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -514,11 +516,12 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-conceptual-border-width-default: var(--sl-border-width-xs); + --sl-border-width-slds-checklist: var(--sl-border-width-xs); --sl-border-width-card-border: var(--sl-border-width-xs); --sl-border-width-border-tabbar: var(--sl-border-width-xs); --sl-border-width-border-tab: var(--sl-border-width-xs); @@ -534,6 +537,7 @@ --sl-border-width-focusring-default: var(--sl-border-width-sm); --sl-border-width-input-option: var(--sl-border-width-xs); --sl-border-width-input-none: var(--sl-border-width-none); + --sl-border-radius-slds-checklist: var(--sl-border-radius-2xl); --sl-border-radius-badge-full: var(--sl-border-radius-full); --sl-border-radius-select-indicator: var(--sl-border-radius-3xs); --sl-border-radius-select-item: var(--sl-border-radius-3xs); @@ -611,6 +615,12 @@ var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-input-text-field-font-icon-md: var(--sl-text-typeset-font-weight-icon-solid) 15 / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-slds-checklist-listitem: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-body: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-heading: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); --sl-text-dialog-subheading: var(--sl-text-typeset-font-weight-demibold) var(--sl-icon-typeset-font-size-md) / var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); --sl-text-dialog-heading: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-xl) / diff --git a/packages/themes/sanoma-learning/dark.css b/packages/themes/sanoma-learning/dark.css index 75a7e27455..0ae9f2553f 100644 --- a/packages/themes/sanoma-learning/dark.css +++ b/packages/themes/sanoma-learning/dark.css @@ -3,13 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-white-base) / var(--sl-opacity-500)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-800)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-900)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-150)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-200)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-300)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-400)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-800)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-active-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-tab-active-background: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-tabbar-border: rgb(var(--sl-color-palette-neutral-200)); @@ -485,6 +491,9 @@ --sl-color-badge-info-background: rgb(var(--sl-color-palette-info-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-black-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-300)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-300)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-tab-content-foreground: var(--sl-body-foreground); --sl-color-tab-content-background: var(--sl-body-background); --sl-color-tab-active-foreground: var(--sl-body-foreground); diff --git a/packages/themes/sanoma-learning/dark.json b/packages/themes/sanoma-learning/dark.json index 46a5f631df..05f3b85f9e 100644 --- a/packages/themes/sanoma-learning/dark.json +++ b/packages/themes/sanoma-learning/dark.json @@ -4859,6 +4859,59 @@ "failedToResolve": true } } + }, + "slds": { + "checklist": { + "backgroud": { + "value": "{body.background}", + "type": "color", + "failedToResolve": true + }, + "foreground": { + "value": "{body.foreground}", + "type": "color", + "failedToResolve": true + }, + "border": { + "value": "{color.palette.neutral.800}", + "type": "color", + "failedToResolve": true + }, + "divider": { + "value": "{color.palette.neutral.800}", + "type": "color", + "failedToResolve": true + }, + "icon": { + "success": { + "value": "{color.palette.success.400}", + "type": "color", + "failedToResolve": true + }, + "danger": { + "value": "{color.palette.danger.300}", + "type": "color", + "failedToResolve": true + } + }, + "link": { + "idle": { + "value": "{color.palette.info.300}", + "type": "color", + "failedToResolve": true + }, + "hover": { + "value": "{color.palette.info.200}", + "type": "color", + "failedToResolve": true + }, + "active": { + "value": "{color.palette.info.150}", + "type": "color", + "failedToResolve": true + } + } + } } }, "boxShadow": { diff --git a/packages/themes/sanoma-learning/dark.scss b/packages/themes/sanoma-learning/dark.scss index 591455caa3..f7b428f816 100644 --- a/packages/themes/sanoma-learning/dark.scss +++ b/packages/themes/sanoma-learning/dark.scss @@ -4,13 +4,19 @@ */ @mixin sl-theme-dark { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-white-base) / var(--sl-opacity-500)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-800)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-900)); --sl-body-foreground: rgb(var(--sl-color-palette-white-base)); --sl-body-background: rgb(var(--sl-color-palette-black-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-800)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-150)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-200)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-300)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-400)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-800)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-active-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-tab-active-background: rgb(var(--sl-color-palette-neutral-800)); --sl-color-tab-tabbar-border: rgb(var(--sl-color-palette-neutral-200)); @@ -486,6 +492,9 @@ --sl-color-badge-info-background: rgb(var(--sl-color-palette-info-500)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-black-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-300)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-300)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-tab-content-foreground: var(--sl-body-foreground); --sl-color-tab-content-background: var(--sl-body-background); --sl-color-tab-active-foreground: var(--sl-body-foreground); @@ -533,14 +542,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-popover-foreground: var(--sl-body-foreground); --sl-color-dialog-border: var(--sl-body-background); --sl-color-dialog-foreground: var(--sl-body-foreground); diff --git a/packages/themes/sanoma-learning/light.css b/packages/themes/sanoma-learning/light.css index 1ff5119566..7e52d3c1d2 100644 --- a/packages/themes/sanoma-learning/light.css +++ b/packages/themes/sanoma-learning/light.css @@ -3,14 +3,22 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay-copy: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-primary-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-600)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-500)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-400)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-500)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-200)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-accordion-active-border: rgb(var(--sl-color-palette-neutral-100)); --sl-color-accordion-active-icon: rgb(var(--sl-color-palette-accent-800)); --sl-color-accordion-active-foreground: rgb(var(--sl-color-palette-accent-800)); @@ -485,6 +493,9 @@ --sl-color-badge-info-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-base)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-400)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-accordion-active-background: var(--sl-body-background); --sl-color-accordion-disabled-header: var(--sl-body-background); --sl-color-accordion-disabled-background: var(--sl-body-background); diff --git a/packages/themes/sanoma-learning/light.json b/packages/themes/sanoma-learning/light.json index 5a5ce58de6..27b81672e3 100644 --- a/packages/themes/sanoma-learning/light.json +++ b/packages/themes/sanoma-learning/light.json @@ -4629,6 +4629,59 @@ "failedToResolve": true } } + }, + "slds": { + "checklist": { + "backgroud": { + "value": "{body.background}", + "type": "color", + "failedToResolve": true + }, + "foreground": { + "value": "{body.foreground}", + "type": "color", + "failedToResolve": true + }, + "border": { + "value": "{color.palette.neutral.200}", + "type": "color", + "failedToResolve": true + }, + "divider": { + "value": "{color.palette.neutral.200}", + "type": "color", + "failedToResolve": true + }, + "icon": { + "success": { + "value": "{color.palette.success.500}", + "type": "color", + "failedToResolve": true + }, + "danger": { + "value": "{color.palette.danger.400}", + "type": "color", + "failedToResolve": true + } + }, + "link": { + "idle": { + "value": "{color.palette.info.400}", + "type": "color", + "failedToResolve": true + }, + "hover": { + "value": "{color.palette.info.500}", + "type": "color", + "failedToResolve": true + }, + "active": { + "value": "{color.palette.info.600}", + "type": "color", + "failedToResolve": true + } + } + } } }, "boxShadow": { @@ -4657,6 +4710,30 @@ "type": "boxShadow", "description": "boxShadow.none", "failedToResolve": true + }, + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow", + "failedToResolve": true + } } } } \ No newline at end of file diff --git a/packages/themes/sanoma-learning/light.scss b/packages/themes/sanoma-learning/light.scss index cf1f56661f..e9d04b2daa 100644 --- a/packages/themes/sanoma-learning/light.scss +++ b/packages/themes/sanoma-learning/light.scss @@ -4,14 +4,22 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay-copy: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-primary-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-primary-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-color-slds-checklist-link-active: rgb(var(--sl-color-palette-info-600)); + --sl-color-slds-checklist-link-hover: rgb(var(--sl-color-palette-info-500)); + --sl-color-slds-checklist-icon-danger: rgb(var(--sl-color-palette-danger-400)); + --sl-color-slds-checklist-icon-success: rgb(var(--sl-color-palette-success-500)); + --sl-color-slds-checklist-divider: rgb(var(--sl-color-palette-neutral-200)); + --sl-color-slds-checklist-border: rgb(var(--sl-color-palette-neutral-200)); --sl-color-accordion-active-border: rgb(var(--sl-color-palette-neutral-100)); --sl-color-accordion-active-icon: rgb(var(--sl-color-palette-accent-800)); --sl-color-accordion-active-foreground: rgb(var(--sl-color-palette-accent-800)); @@ -486,6 +494,9 @@ --sl-color-badge-info-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-foreground: rgb(var(--sl-color-palette-white-base)); --sl-color-avatar-background: rgb(var(--sl-color-palette-accent-base)); + --sl-color-slds-checklist-link-idle: rgb(var(--sl-color-palette-info-400)); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-backgroud: var(--sl-body-background); --sl-color-accordion-active-background: var(--sl-body-background); --sl-color-accordion-disabled-header: var(--sl-body-background); --sl-color-accordion-disabled-background: var(--sl-body-background); @@ -553,14 +564,14 @@ --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); - --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-disabled-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-disabled-background: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-focus-border: rgba(var(--sl-body-background) / 0%); --sl-color-select-item-focus-background: rgba(var(--sl-body-background) / var(--sl-opacity-100)); - --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0); - --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0); + --sl-color-select-item-active-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-hover-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-border: rgba(var(--sl-body-background) / 0%); + --sl-color-select-item-default-background: rgba(var(--sl-body-background) / 0%); --sl-color-input-field-label-icon-invalid: var(--sl-color-input-text-field-invalid-default-icon); --sl-color-input-field-label-icon-default: var(--sl-body-foreground); --sl-color-input-field-label-text-invalid: var(--sl-color-input-text-field-invalid-default-icon); diff --git a/packages/themes/sanoma-learning/typography.css b/packages/themes/sanoma-learning/typography.css index 1ee6d6e224..4dec7f397f 100644 --- a/packages/themes/sanoma-learning/typography.css +++ b/packages/themes/sanoma-learning/typography.css @@ -242,6 +242,27 @@ line-height: var(--sl-text-typeset-line-height-sm); } +.sl-text-slds-checklist-listitem { + font-family: var(--sl-text-typeset-font-family-body); + font-size: var(--sl-text-typeset-font-size-lg); + font-weight: var(--sl-text-typeset-font-weight-demibold); + line-height: var(--sl-text-typeset-line-height-lg); +} + +.sl-text-slds-checklist-body { + font-family: var(--sl-text-typeset-font-family-body); + font-size: var(--sl-text-typeset-font-size-lg); + font-weight: var(--sl-text-typeset-font-weight-regular); + line-height: var(--sl-text-typeset-line-height-lg); +} + +.sl-text-slds-checklist-heading { + font-family: var(--sl-text-typeset-font-family-heading); + font-size: var(--sl-text-typeset-font-size-xl); + font-weight: var(--sl-text-typeset-font-weight-demibold); + line-height: var(--sl-text-typeset-line-height-xl); +} + .sl-text-dialog-subheading { font-family: var(--sl-text-typeset-font-family-body); font-size: var(--sl-icon-typeset-font-size-md); diff --git a/packages/themes/sanoma-learning/typography.scss b/packages/themes/sanoma-learning/typography.scss index 62a83a03cd..f52bd1cbb3 100644 --- a/packages/themes/sanoma-learning/typography.scss +++ b/packages/themes/sanoma-learning/typography.scss @@ -242,6 +242,27 @@ line-height: var(--sl-text-typeset-line-height-sm); } +@mixin sl-text-slds-checklist-listitem { + font-family: var(--sl-text-typeset-font-family-body); + font-size: var(--sl-text-typeset-font-size-lg); + font-weight: var(--sl-text-typeset-font-weight-demibold); + line-height: var(--sl-text-typeset-line-height-lg); +} + +@mixin sl-text-slds-checklist-body { + font-family: var(--sl-text-typeset-font-family-body); + font-size: var(--sl-text-typeset-font-size-lg); + font-weight: var(--sl-text-typeset-font-weight-regular); + line-height: var(--sl-text-typeset-line-height-lg); +} + +@mixin sl-text-slds-checklist-heading { + font-family: var(--sl-text-typeset-font-family-heading); + font-size: var(--sl-text-typeset-font-size-xl); + font-weight: var(--sl-text-typeset-font-weight-demibold); + line-height: var(--sl-text-typeset-line-height-xl); +} + @mixin sl-text-dialog-subheading { font-family: var(--sl-text-typeset-font-family-body); font-size: var(--sl-icon-typeset-font-size-md); diff --git a/packages/themes/sanoma-utbildning/all.css b/packages/themes/sanoma-utbildning/all.css index 3c9905d069..7fba4a4cc6 100644 --- a/packages/themes/sanoma-utbildning/all.css +++ b/packages/themes/sanoma-utbildning/all.css @@ -245,6 +245,8 @@ --sl-color-palette-primary-150: 103 201 193; --sl-color-palette-primary-100: 154 219 214; --sl-color-palette-primary-50: 204 237 234; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -805,13 +807,13 @@ @media (prefers-color-scheme: light) { :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/sanoma-utbildning/base.css b/packages/themes/sanoma-utbildning/base.css index 3e2e572e8a..c83054bd5c 100644 --- a/packages/themes/sanoma-utbildning/base.css +++ b/packages/themes/sanoma-utbildning/base.css @@ -237,6 +237,8 @@ --sl-color-palette-primary-150: 103 201 193; --sl-color-palette-primary-100: 154 219 214; --sl-color-palette-primary-50: 204 237 234; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/sanoma-utbildning/base.json b/packages/themes/sanoma-utbildning/base.json index 50465a70bc..08c42766c8 100644 --- a/packages/themes/sanoma-utbildning/base.json +++ b/packages/themes/sanoma-utbildning/base.json @@ -4287,6 +4287,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/sanoma-utbildning/base.scss b/packages/themes/sanoma-utbildning/base.scss index 36fbeecc25..1cc821f230 100644 --- a/packages/themes/sanoma-utbildning/base.scss +++ b/packages/themes/sanoma-utbildning/base.scss @@ -238,6 +238,8 @@ --sl-color-palette-primary-150: 103 201 193; --sl-color-palette-primary-100: 154 219 214; --sl-color-palette-primary-50: 204 237 234; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/sanoma-utbildning/light.css b/packages/themes/sanoma-utbildning/light.css index f17945f8bd..0634f5d841 100644 --- a/packages/themes/sanoma-utbildning/light.css +++ b/packages/themes/sanoma-utbildning/light.css @@ -4,13 +4,13 @@ */ :root { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/sanoma-utbildning/light.scss b/packages/themes/sanoma-utbildning/light.scss index 8908c5dfef..fc38b6029f 100644 --- a/packages/themes/sanoma-utbildning/light.scss +++ b/packages/themes/sanoma-utbildning/light.scss @@ -5,13 +5,13 @@ @mixin sl-theme-light { --sl-color-input-option-invalid-unchecked-disabled-background: color.input.option.default.unchecked.disabled.background; - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-body-surface-overlay: rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-700)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-base) / var(--sl-opacity-500)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-150)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-100)); diff --git a/packages/themes/teas/all.css b/packages/themes/teas/all.css index 48edaac1e9..746b56b302 100644 --- a/packages/themes/teas/all.css +++ b/packages/themes/teas/all.css @@ -248,6 +248,8 @@ --sl-color-palette-primary-150: 132 194 192; --sl-color-palette-primary-100: 174 215 214; --sl-color-palette-primary-50: 216 236 235; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); @@ -828,12 +830,12 @@ @media (prefers-color-scheme: light) { :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-200)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); diff --git a/packages/themes/teas/base.css b/packages/themes/teas/base.css index 20ed5b30ec..903813e046 100644 --- a/packages/themes/teas/base.css +++ b/packages/themes/teas/base.css @@ -240,6 +240,8 @@ --sl-color-palette-primary-150: 132 194 192; --sl-color-palette-primary-100: 174 215 214; --sl-color-palette-primary-50: 216 236 235; + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); diff --git a/packages/themes/teas/base.json b/packages/themes/teas/base.json index a21760d8d0..0e1acac18f 100644 --- a/packages/themes/teas/base.json +++ b/packages/themes/teas/base.json @@ -4412,6 +4412,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/themes/teas/base.scss b/packages/themes/teas/base.scss index c74f39dc26..6b01f9a63f 100644 --- a/packages/themes/teas/base.scss +++ b/packages/themes/teas/base.scss @@ -102,7 +102,7 @@ --sl-border-width-xs: 1px; --sl-border-width-2xs: 0.5px; --sl-border-width-none: 0px; - --sl-text-text-field: [object Object]; + --sl-text-text-field: [object object]; --sl-text-typeset-letter-spacing-xl: 2%; --sl-text-typeset-letter-spacing-lg: 1%; --sl-text-typeset-letter-spacing-md: 0%; @@ -147,7 +147,7 @@ --sl-text-typeset-font-size-xs: 10px; --sl-text-typeset-font-weight-bold: 700; --sl-text-typeset-font-weight-regular: 400; - --sl-text-typeset-font-weight-icon-solid: Solid; + --sl-text-typeset-font-weight-icon-solid: solid; --sl-text-typeset-font-weight-icon-regular: 400; --sl-text-typeset-font-weight-icon-light: 300; --sl-text-typeset-font-weight-icon-thin: 100; @@ -241,7 +241,9 @@ --sl-color-palette-primary-150: 132 194 192; --sl-color-palette-primary-100: 174 215 214; --sl-color-palette-primary-50: 216 236 235; - --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), + 0 4px 8px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-150)); + --sl-elevation-shadow-none: 0 0 0 0 rgba(var(--sl-color-palette-neutral-base) / 0%); --sl-elevation-shadow-lg: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-100)), 0 8px 16px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-200)); --sl-elevation-shadow-md: 0 0 4px 0 rgba(var(--sl-color-palette-neutral-base) / var(--sl-opacity-50)), @@ -510,8 +512,8 @@ --sl-icon-typeset-font-size-xs: var(--sl-size-xs); --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); --sl-icon-style-outline: 400; - --sl-component-button-md: [object Object]; - --sl-component-button-lg: [object Object]; + --sl-component-button-md: [object object]; + --sl-component-button-lg: [object object]; --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); --sl-animation-button-duration: var(--sl-animation-duration-normal); --sl-border-width-card-border: var(--sl-border-width-xs); diff --git a/packages/themes/teas/light.css b/packages/themes/teas/light.css index 76da43b4c3..0b2248d4ca 100644 --- a/packages/themes/teas/light.css +++ b/packages/themes/teas/light.css @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ :root { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-200)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); diff --git a/packages/themes/teas/light.scss b/packages/themes/teas/light.scss index ef924947df..464367f05f 100644 --- a/packages/themes/teas/light.scss +++ b/packages/themes/teas/light.scss @@ -4,12 +4,12 @@ */ @mixin sl-theme-light { - --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); - --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-body-surface-200: rgb(var(--sl-color-palette-neutral-150)); --sl-body-surface-100: rgb(var(--sl-color-palette-neutral-100)); --sl-body-foreground: rgb(var(--sl-color-palette-black-base)); --sl-body-background: rgb(var(--sl-color-palette-white-base)); + --sl-box-shadow-none: 0 0 0 0 rgb(var(--sl-color-palette-transparent-base)); + --sl-box-shadow-focus: 0 0 0 3px rgba(var(--sl-color-palette-info-300) / var(--sl-opacity-800)); --sl-color-skeleton-pulse: rgb(var(--sl-color-palette-neutral-100)); --sl-color-skeleton-effect: rgb(var(--sl-color-palette-neutral-200)); --sl-color-skeleton-base: rgb(var(--sl-color-palette-neutral-150)); diff --git a/packages/tokens/src/core.json b/packages/tokens/src/core.json index 46036e3a1c..c9f88b14b6 100644 --- a/packages/tokens/src/core.json +++ b/packages/tokens/src/core.json @@ -2240,6 +2240,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": "0", + "y": "4", + "blur": "8", + "spread": "0", + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/packages/tokens/src/sanoma-learning/base.json b/packages/tokens/src/sanoma-learning/base.json index 0953a25f8d..9355c67778 100644 --- a/packages/tokens/src/sanoma-learning/base.json +++ b/packages/tokens/src/sanoma-learning/base.json @@ -1278,6 +1278,37 @@ "type": "typography" } }, + "slds": { + "checklist": { + "heading": { + "value": { + "fontFamily": "{text.typeset.fontFamily.heading}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "lineHeight": "{text.typeset.lineHeight.xl}", + "fontSize": "{text.typeset.fontSize.xl}" + }, + "type": "typography" + }, + "body": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.regular}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + }, + "listitem": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + } + } + }, "input": { "textField": { "fontIcon": { @@ -1879,6 +1910,12 @@ "value": "{borderRadius.default}", "type": "borderRadius" } + }, + "slds": { + "checklist": { + "value": "{border.radius.2xl}", + "type": "borderRadius" + } } }, "border": { @@ -2002,6 +2039,12 @@ "value": "{border.width.xs}", "type": "borderWidth" } + }, + "slds": { + "checklist": { + "value": "{border.width.xs}", + "type": "borderWidth" + } } } }, diff --git a/packages/tokens/src/sanoma-learning/dark.json b/packages/tokens/src/sanoma-learning/dark.json index d75dd3afaa..7dde982337 100644 --- a/packages/tokens/src/sanoma-learning/dark.json +++ b/packages/tokens/src/sanoma-learning/dark.json @@ -4111,6 +4111,50 @@ "type": "color" } } + }, + "slds": { + "checklist": { + "backgroud": { + "value": "{body.background}", + "type": "color" + }, + "foreground": { + "value": "{body.foreground}", + "type": "color" + }, + "border": { + "value": "{color.palette.neutral.800}", + "type": "color" + }, + "divider": { + "value": "{color.palette.neutral.800}", + "type": "color" + }, + "icon": { + "success": { + "value": "{color.palette.success.400}", + "type": "color" + }, + "danger": { + "value": "{color.palette.danger.300}", + "type": "color" + } + }, + "link": { + "idle": { + "value": "{color.palette.info.300}", + "type": "color" + }, + "hover": { + "value": "{color.palette.info.200}", + "type": "color" + }, + "active": { + "value": "{color.palette.info.150}", + "type": "color" + } + } + } } }, "boxShadow": { diff --git a/packages/tokens/src/sanoma-learning/light.json b/packages/tokens/src/sanoma-learning/light.json index 2cd0cba818..c4a9295862 100644 --- a/packages/tokens/src/sanoma-learning/light.json +++ b/packages/tokens/src/sanoma-learning/light.json @@ -3910,6 +3910,50 @@ "type": "color" } } + }, + "slds": { + "checklist": { + "backgroud": { + "value": "{body.background}", + "type": "color" + }, + "foreground": { + "value": "{body.foreground}", + "type": "color" + }, + "border": { + "value": "{color.palette.neutral.200}", + "type": "color" + }, + "divider": { + "value": "{color.palette.neutral.200}", + "type": "color" + }, + "icon": { + "success": { + "value": "{color.palette.success.500}", + "type": "color" + }, + "danger": { + "value": "{color.palette.danger.400}", + "type": "color" + } + }, + "link": { + "idle": { + "value": "{color.palette.info.400}", + "type": "color" + }, + "hover": { + "value": "{color.palette.info.500}", + "type": "color" + }, + "active": { + "value": "{color.palette.info.600}", + "type": "color" + } + } + } } }, "boxShadow": { @@ -3936,6 +3980,29 @@ }, "type": "boxShadow", "description": "boxShadow.none" + }, + "slds": { + "checklist": { + "value": [ + { + "x": "0", + "y": "0", + "blur": "4", + "spread": "0", + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": "0", + "y": "4", + "blur": "8", + "spread": "0", + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } } } } \ No newline at end of file diff --git a/scripts/build-packages.js b/scripts/build-packages.js index f4147aa4e1..dabccc2000 100644 --- a/scripts/build-packages.js +++ b/scripts/build-packages.js @@ -15,6 +15,6 @@ const buildPackages = async (packageType) => { }; const packageType = argv.at(-1); -if (['components', 'locales', 'themes'].includes(packageType)) { +if (['checklist', 'components', 'locales', 'themes'].includes(packageType)) { buildPackages(packageType); } diff --git a/scripts/build-scss.js b/scripts/build-scss.js index 0c1b4d51d5..d11135d380 100644 --- a/scripts/build-scss.js +++ b/scripts/build-scss.js @@ -4,7 +4,7 @@ import { basename, dirname } from 'path'; import { compileString } from 'sass'; import stylelint from 'stylelint'; -const files = await fg('./packages/components/*/src/**/*.scss'); +const files = await fg('./packages/{checklist,components}/**/*.scss'); const shared = process.argv.at(3) || '', sharedFile = basename(shared), @@ -27,11 +27,11 @@ await Promise.allSettled( let { output } = await stylelint.lint({ code: css, fix: true }); output = output.toString().split('\n').map(str => ` ${str}`.trimEnd()).join('\n'); - + // Step 3: write CSS to TS template await fs.writeFile(`${file}.ts`, `import { css } from 'lit';\n\nexport default css\`\n${output}\`;\n`); - } catch (err) { - console.log(err); + } catch (err) { + console.log(err); } }) ); diff --git a/yarn.lock b/yarn.lock index bc297eb716..1bcb29621e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4290,6 +4290,15 @@ __metadata: languageName: unknown linkType: soft +"@sl-design-system/checklist@workspace:packages/checklist": + version: 0.0.0-use.local + resolution: "@sl-design-system/checklist@workspace:packages/checklist" + dependencies: + "@open-wc/scoped-elements": "npm:^3.0.5" + "@sl-design-system/shared": "npm:0.2.6" + languageName: unknown + linkType: soft + "@sl-design-system/chromatic@workspace:chromatic": version: 0.0.0-use.local resolution: "@sl-design-system/chromatic@workspace:chromatic" From 6931539a989514cd8acf2941dd8069e29884b741 Mon Sep 17 00:00:00 2001 From: Jeroen Zwartepoorte Date: Tue, 19 Mar 2024 17:24:21 +0100 Subject: [PATCH 2/7] Checklist fixes (#1070) --- packages/checklist/index.ts | 4 +--- packages/checklist/package.json | 10 +++++----- packages/checklist/src/checklist.ts | 6 ++++-- yarn.lock | 6 ++++-- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/checklist/index.ts b/packages/checklist/index.ts index f6cd110cf7..7f4f620a16 100644 --- a/packages/checklist/index.ts +++ b/packages/checklist/index.ts @@ -1,3 +1 @@ -import { Checklist } from './src/checklist.js'; - -customElements.define('slds-checklist', Checklist); +export * from './src/checklist.js'; diff --git a/packages/checklist/package.json b/packages/checklist/package.json index 287c05390f..43a0c0592e 100644 --- a/packages/checklist/package.json +++ b/packages/checklist/package.json @@ -9,7 +9,7 @@ "repository": { "type": "git", "url": "https://github.com/sl-design-system/components.git", - "directory": "packages/checlist" + "directory": "packages/checklist" }, "homepage": "https://sanomalearning.design/getting-started/developers/", "bugs": { @@ -30,14 +30,14 @@ "**/*.js.map", "custom-elements.json" ], - "sideEffects": [ - "index.js" - ], + "sideEffects": true, "scripts": { "test": "echo \"Error: run tests from monorepo root.\" && exit 1" }, "dependencies": { + "@fortawesome/pro-solid-svg-icons": "^6.1.5", "@open-wc/scoped-elements": "^3.0.5", - "@sl-design-system/shared": "0.2.6" + "@sl-design-system/icon": "0.0.9", + "lit": "^3.1.2" } } diff --git a/packages/checklist/src/checklist.ts b/packages/checklist/src/checklist.ts index c7728dd4b4..7c2be890e9 100644 --- a/packages/checklist/src/checklist.ts +++ b/packages/checklist/src/checklist.ts @@ -2,7 +2,7 @@ import { faCircleCheck, faCircleExclamation } from '@fortawesome/pro-solid-svg-i import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js'; import { Icon } from '@sl-design-system/icon'; import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit'; -import { state } from 'lit/decorators.js'; +import { customElement, state } from 'lit/decorators.js'; import styles from './checklist.scss.js'; declare global { @@ -21,6 +21,7 @@ Icon.register(faCircleCheck, faCircleExclamation); /** * A component to check if the SL Design System has been installed correctly. */ +@customElement('slds-checklist') export class Checklist extends ScopedElementsMixin(LitElement) { /** @internal */ static get scopedElements(): ScopedElementsMap { @@ -48,7 +49,8 @@ export class Checklist extends ScopedElementsMixin(LitElement) { Welcome to the Sanoma Learning Design System. You will find a checklist below of the steps described in our getting started for developers guide🚀. + > + 🚀.

${this.items.map( diff --git a/yarn.lock b/yarn.lock index 1bcb29621e..34f6a1b134 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3012,7 +3012,7 @@ __metadata: languageName: node linkType: hard -"@fortawesome/pro-solid-svg-icons@npm:^6.5.1": +"@fortawesome/pro-solid-svg-icons@npm:^6.1.5, @fortawesome/pro-solid-svg-icons@npm:^6.5.1": version: 6.5.1 resolution: "@fortawesome/pro-solid-svg-icons@npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-solid-svg-icons%2F-%2F6.5.1%2Fpro-solid-svg-icons-6.5.1.tgz" dependencies: @@ -4294,8 +4294,10 @@ __metadata: version: 0.0.0-use.local resolution: "@sl-design-system/checklist@workspace:packages/checklist" dependencies: + "@fortawesome/pro-solid-svg-icons": "npm:^6.1.5" "@open-wc/scoped-elements": "npm:^3.0.5" - "@sl-design-system/shared": "npm:0.2.6" + "@sl-design-system/icon": "npm:0.0.9" + lit: "npm:^3.1.2" languageName: unknown linkType: soft From fe325cbf5bb75ce5b922dd3a45381cbaf65fc82d Mon Sep 17 00:00:00 2001 From: Jeroen Zwartepoorte Date: Wed, 20 Mar 2024 15:47:41 +0100 Subject: [PATCH 3/7] Improve developer documentation (#1066) --- .../categories/getting-started/developers.md | 145 +++++++++++++----- 1 file changed, 109 insertions(+), 36 deletions(-) diff --git a/website/src/categories/getting-started/developers.md b/website/src/categories/getting-started/developers.md index ebcc157fd9..0c34750d89 100644 --- a/website/src/categories/getting-started/developers.md +++ b/website/src/categories/getting-started/developers.md @@ -6,12 +6,12 @@ eleventyNavigation: order: 2 ---
-
-

{{title}}

-

- This guide will walk you through the process of gaining access to the private GitHub NPM repository, installing the SL Design System packages and using them in your application. -

-
+
+

{{title}}

+

+ This guide will walk you through the process of gaining access to the private GitHub NPM repository, installing the SL Design System packages and using them in your application. +

+
@@ -20,12 +20,25 @@ eleventyNavigation:
+## Steps + +Please follow the steps below when first getting started: +1. [Make sure you have access](#make-sure-you-have-access) +2. [Installing the SL Design System package(s)](#installing-the-sl-design-system-package(s)) +3. [Setup a theme](#setup-a-theme) +4. [Add polyfills](#add-polyfills) +5. [Start using components](#start-using-components) + +
+ +
+ ## Make sure you have access Even though the SL Design System is open source, the packages are not publicly available. That is why you need to get access to the GitHub npm packages in order to install them locally. First the SL Design System team needs to add you to the list of users who can access the packages. To be added, you need to provide your @sanoma.com (or other company) email address to us in [our Slack channel](https://sanoma.slack.com/archives/C03SA9HUUA3) or you can send us an email. You don't have to create a new, separate GitHub account with your Sanoma Learning email address if you have an existing GitHub account and want to use that. Just add your @sanoma.com email address to the list of email addresses in GitHub. -Once you are added you need to [create a *classic* personal access token on GitHub](https://docs.GitHub.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic). Make sure that this token has at least the `read_packages` privilege. This newly created token needs to be added to the .npmrc file in your home directory, along with a reference to where the `@sl-design-system` packages can be found: +Once you are added you need to [create a *classic* personal access token on GitHub](https://docs.GitHub.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic). Make sure that this token has at least the `read_packages` privilege. This newly created token needs to be added to the `.npmrc` file in your home directory, along with a reference to where the `@sl-design-system` packages can be found:
@@ -44,12 +57,26 @@ Make sure you add the token to `~/.npmrc`, the file in your home directory, not ## Installing the SL Design System package(s) -To get started using the SL Design System, you can install it via npm. Each component and theme has its own package. So if you want to use a `button` component with the Sanoma Learning theme, you do: +To get started using the SL Design System, you can install it via npm. Each component and theme has its own package. + +Some packages have 3rd party dependencies that need to be installed as well. Some of these dependencies may already be used in your own application. To make sure that those dependencies are not installed twice, they are marked as `peerDependencies` in the `package.json` of the SLDS packages. This means that you need to install them yourself. For example, the `@sl-design-system/badge` package has `lit` as a peer dependency. If you are using `lit` in your application, you don't need to install it again. If you are not using `lit` yet, you need to install it. Your package manager will warn you if you haven't installed these peer dependencies yet. + +So if you want to use a `button` component with the Sanoma Learning theme, you do:
```bash - npm install @sl-design-system/button + npm add @sl-design-system/button + ``` + +
+ +Or if you use `yarn`: + +
+ + ```bash + yarn add @sl-design-system/button ```
@@ -60,36 +87,44 @@ To get started using the SL Design System, you can install it via npm. Each comp ## Setup a theme -To start using the SL Design System, you need to setup a theme for your application. The theme determines how your application looks. There is a theme for every major product within Sanoma Learning. You can install a theme as by installing the NPM package, in this example we use the `sanoma-learning` theme. +To start using the SL Design System, you need to setup a theme for your application. The theme determines how your application looks. There is a theme for every major product within Sanoma Learning. + +Please note that the webfonts of your application are not a part of the theme. There are different ways of loading the fonts an application uses. If is up to you to load the webfonts in your application. + +You can install a theme as by installing the NPM package, in this example we use the `sanoma-learning` theme.
```bash - npm install @sl-design-system/sanoma-learning + npm add @sl-design-system/sanoma-learning ```
-After installing the theme, you need to import the theme in your application. If you are working in an Angular application you can do this by loading the theme in your application in your angular.json, in all the places where you include your other css files: +Or if you use `yarn`:
- ```json - './node_modules/@sl-design-system/sanoma-learning/all.css' + ```bash + yarn add @sl-design-system/sanoma-learning ```
-In other frameworks might be able to include the css file in another way, directly in the HTML for example: +After installing the theme, you need to import the theme in your application. How you do this depends on the framework you are using. + +The simplest way to include the theme is by including the theme stylesheet in your HTML:
- ```html - - ``` +```html + +```
+If you are working in an Angular application you can do this by adding the theme stylesheet in your `angular.json`, as explained [in the official Angular documentation](https://angular.io/guide/workspace-config#styles-and-scripts-configuration). + When your theme doesn't support dark mode yet (check with your teams designer or with the SLDS team) you should use `base.css` and `light.css` instead of `all.css` To initialize the theme you need to run theme's `setup` function in a global JS file: @@ -104,10 +139,41 @@ To initialize the theme you need to run theme's `setup` function in a global JS
-When you're using Angular this can be done in `main.ts` in the root folder of your application for example +When you're using Angular this can be done in `main.ts` in the root folder of your application for example. +
+
+ +## Add polyfills + +The SL Design System tries to use modern web standards as much as possible. This means that some of the components might not work in older browsers. To make sure the components work in older browsers you need to add polyfills. +Make sure you include the polyfills before you include the SLDS components. This is because the polyfills need to be loaded before the components are loaded. + +The following web standards require polyfills at this time: +- [Popover](https://caniuse.com/mdn-api_htmlelement_popover) +- [Scoped Custom Element Registry](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md) + +To use these polyfills, you need to install the following packages: +- `@oddbird/popover-polyfill` +- `@webcomponents/scoped-custom-element-registry` + +Once installed you need to import the polyfills in your application. You can do this by importing the polyfills in your main JS file: + +```js +import '@oddbird/popover-polyfill'; +import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js'; +``` + +Another option is to include them in your HTML: + +```html + + +``` + +
@@ -115,25 +181,17 @@ When you're using Angular this can be done in `main.ts` in the root folder of yo To start using the button in our example, you need to import the button component in your application. You can do this by importing the button component in your main JS file: -
- - ```js - import '@sl-design-system/button/register.js'; - ``` - -
+```js +import '@sl-design-system/button/register.js'; +``` This will load the button component and register it as ``. After that you can start using the button in your application: -
+```html +Hello world! +``` - ```html - Hello world! - ``` - -
- -If you encouter errors compiling because Angular doesn't recognize the SLDS components as valid tags you can add `CUSTOM_ELEMENTS_SCHEMA`. We are still thinking about a solution to wrap our components with an Angular shell so this step is no longer necessary. +If you encounter errors compiling because Angular doesn't recognize the SLDS components as valid tags you can add `CUSTOM_ELEMENTS_SCHEMA`. We are still thinking about a solution to wrap our components with an Angular shell so this step is no longer necessary.
@@ -160,18 +218,33 @@ Because the font name in the token needs to match the name of the font used in F If the names match but the font still doesn't load check if the font is actually loaded. The components use the font available in the app, so if you need to add fonts do this like you normally would. When you still encounter problems with the loading and using of your fonts you can reach out to us. +### The icons in my components are broken. + +Please make sure you have added the `setup()` method as described in the [Setup a theme](#setup-a-theme) section. This method also initializes the icon set. + ### How do I use the dark mode of the theme? -This only applies to themes that support dark mode. +This only applies to themes that support dark mode. When you include the `all.css` file both light and dark mode are included and triggered by the system or browser preference (using `@media (prefers-color-scheme: dark)`). If you want to control the use of the light and dark mode you can load the `light.css` and `dark.css` based on the condition you want. Don't forget to also include `base.css` in addition to the light and dark file. You won't need `all.css` when using the separate files. Another option is not to directly include the css files, but use the SCSS mixins we provide: `@mixin sl-theme-base`, `@mixin sl-theme-light` and `@mixin sl-theme-dark` in their respective `.scss` files in the theme. Those mixins print the list of tokens so you can wrap the tokens with whatever selector you want to achieve the theme switching. +### How do I setup my Bitbucket pipeline to work with the SLDS packages? + +For the Sanoma Learning Bitbucket pipelines, there is a common token that you can use to authenticate with the GitHub NPM registry. For your projects' `.npmrc` you can use the following line to authenticate with the GitHub NPM registry: + +``` +//npm.pkg.github.com/:_authToken=${SLDESIGNSYSTEMS_GITHUB_NPM_AUTH_TOKEN} +``` + +### Which browsers are supported? + +We support the 2 latest versions of the major browsers Chrome, Edge, Firefox and Safari. For example if the latest version is Chrome 100, we support Chrome 100 and 99. + ### Which versions of Angular are supported? We support the 2 latest versions of Angular. You can find these version in [the documentation on Angular.io](https://angular.io/guide/releases#actively-supported-versions). - ### Do you support SSR? Server-side rendered web components is a hard problem and the web standards related to this continue to evolve. At the moment we do not support this, but we may look at this again in the future. From 1192badb7bf12ac09658b12cea6bb93da005d8f2 Mon Sep 17 00:00:00 2001 From: Anna Sobczak <111562742+anna-lach@users.noreply.github.com> Date: Wed, 20 Mar 2024 18:14:05 +0100 Subject: [PATCH 4/7] Add missing switch path in tsconfig file (#1072) * Add missing switch path * added changeset * Update tall-carrots-perform.md --- .changeset/tall-carrots-perform.md | 5 +++++ tsconfig.all.json | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/tall-carrots-perform.md diff --git a/.changeset/tall-carrots-perform.md b/.changeset/tall-carrots-perform.md new file mode 100644 index 0000000000..26c5eb2380 --- /dev/null +++ b/.changeset/tall-carrots-perform.md @@ -0,0 +1,5 @@ +--- +"@sl-design-system/switch": patch +--- + +Fix missing types. diff --git a/tsconfig.all.json b/tsconfig.all.json index 3076de5e8b..c3ee90ecd5 100644 --- a/tsconfig.all.json +++ b/tsconfig.all.json @@ -30,6 +30,7 @@ { "path": "./packages/components/shared" }, { "path": "./packages/components/skeleton" }, { "path": "./packages/components/spinner" }, + { "path": "./packages/components/switch" }, { "path": "./packages/components/tabs" }, { "path": "./packages/components/text-field"}, { "path": "./packages/components/textarea" }, From 68a26df2626c1937e339cb56fe19591faf74a118 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 21 Mar 2024 08:31:38 +0100 Subject: [PATCH 5/7] Version Packages (#1043) Co-authored-by: github-actions[bot] --- .changeset/fair-ducks-behave.md | 5 ----- .changeset/fair-paws-draw.md | 5 ----- .changeset/mighty-dryers-exist.md | 8 -------- .changeset/silver-wasps-itch.md | 6 ------ .changeset/six-mails-learn.md | 5 ----- .changeset/sweet-pianos-report.md | 5 ----- .changeset/tall-carrots-perform.md | 5 ----- .changeset/weak-jokes-beam.md | 5 ----- packages/components/accordion/CHANGELOG.md | 9 +++++++++ packages/components/accordion/package.json | 2 +- packages/components/grid/CHANGELOG.md | 9 +++++++++ packages/components/grid/package.json | 2 +- packages/components/switch/CHANGELOG.md | 6 ++++++ packages/components/switch/package.json | 2 +- packages/themes/magister/CHANGELOG.md | 6 ++++++ packages/themes/magister/package.json | 2 +- packages/themes/myvanin/CHANGELOG.md | 6 ++++++ packages/themes/myvanin/package.json | 2 +- packages/themes/sanoma-utbildning/CHANGELOG.md | 6 ++++++ packages/themes/sanoma-utbildning/package.json | 2 +- packages/themes/teas/CHANGELOG.md | 6 ++++++ packages/themes/teas/package.json | 2 +- tools/eslint-config/CHANGELOG.md | 6 ++++++ tools/eslint-config/package.json | 2 +- 24 files changed, 62 insertions(+), 52 deletions(-) delete mode 100644 .changeset/fair-ducks-behave.md delete mode 100644 .changeset/fair-paws-draw.md delete mode 100644 .changeset/mighty-dryers-exist.md delete mode 100644 .changeset/silver-wasps-itch.md delete mode 100644 .changeset/six-mails-learn.md delete mode 100644 .changeset/sweet-pianos-report.md delete mode 100644 .changeset/tall-carrots-perform.md delete mode 100644 .changeset/weak-jokes-beam.md create mode 100644 packages/components/accordion/CHANGELOG.md diff --git a/.changeset/fair-ducks-behave.md b/.changeset/fair-ducks-behave.md deleted file mode 100644 index 6d1249fc76..0000000000 --- a/.changeset/fair-ducks-behave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/eslint-config": patch ---- - -Upgrade dependencies diff --git a/.changeset/fair-paws-draw.md b/.changeset/fair-paws-draw.md deleted file mode 100644 index 312351225e..0000000000 --- a/.changeset/fair-paws-draw.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/accordion": patch ---- - -Added missing `background-color` for details wrapper, removed unnecessary `aria-disabled` attribute diff --git a/.changeset/mighty-dryers-exist.md b/.changeset/mighty-dryers-exist.md deleted file mode 100644 index c9c5edf240..0000000000 --- a/.changeset/mighty-dryers-exist.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -"@sl-design-system/grid": patch ---- - -Fixed checkbox checked value; -When a grid includes both a selection column and a filter column, a potential issue may arise. If you select a filter and then proceed to check a checkbox in the selection column, subsequently deselecting it, the checked status of the filtered item might not be visible. However, the filtering functionality remains intact. - -Fixed it by changing ?checked to .checked since it should have the same effect, as both the property and attribute control whether the checkbox is checked or not. diff --git a/.changeset/silver-wasps-itch.md b/.changeset/silver-wasps-itch.md deleted file mode 100644 index b92f7d351a..0000000000 --- a/.changeset/silver-wasps-itch.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@sl-design-system/magister": patch -"@sl-design-system/teas": patch ---- - -Tokens fixes diff --git a/.changeset/six-mails-learn.md b/.changeset/six-mails-learn.md deleted file mode 100644 index 1a98079eb3..0000000000 --- a/.changeset/six-mails-learn.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/accordion": patch ---- - -New accordion component diff --git a/.changeset/sweet-pianos-report.md b/.changeset/sweet-pianos-report.md deleted file mode 100644 index c2dfce45c0..0000000000 --- a/.changeset/sweet-pianos-report.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/sanoma-utbildning": patch ---- - -Added theme diff --git a/.changeset/tall-carrots-perform.md b/.changeset/tall-carrots-perform.md deleted file mode 100644 index 26c5eb2380..0000000000 --- a/.changeset/tall-carrots-perform.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/switch": patch ---- - -Fix missing types. diff --git a/.changeset/weak-jokes-beam.md b/.changeset/weak-jokes-beam.md deleted file mode 100644 index 3783333f65..0000000000 --- a/.changeset/weak-jokes-beam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@sl-design-system/myvanin": patch ---- - -Changed font weight from bold to semi-bold diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md new file mode 100644 index 0000000000..8842071467 --- /dev/null +++ b/packages/components/accordion/CHANGELOG.md @@ -0,0 +1,9 @@ +# @sl-design-system/accordion + +## 0.0.1 + +### Patch Changes + +- [#1045](https://github.com/sl-design-system/components/pull/1045) [`f3e0a37`](https://github.com/sl-design-system/components/commit/f3e0a370ba5e9f4488c26efc8d79b44c18a1d5d4) - Added missing `background-color` for details wrapper, removed unnecessary `aria-disabled` attribute + +- [#1036](https://github.com/sl-design-system/components/pull/1036) [`b39b2a3`](https://github.com/sl-design-system/components/commit/b39b2a3dc6764e16e9c611ac6c96a4eef61e9421) - New accordion component diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json index 2c635d550b..666a5f9ed4 100644 --- a/packages/components/accordion/package.json +++ b/packages/components/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@sl-design-system/accordion", - "version": "0.0.0", + "version": "0.0.1", "description": "Accordion component for the SL Design System", "license": "Apache-2.0", "publishConfig": { diff --git a/packages/components/grid/CHANGELOG.md b/packages/components/grid/CHANGELOG.md index ba3fad47bc..e6e7f0ed12 100644 --- a/packages/components/grid/CHANGELOG.md +++ b/packages/components/grid/CHANGELOG.md @@ -1,5 +1,14 @@ # @sl-design-system/grid +## 0.1.4 + +### Patch Changes + +- [#1056](https://github.com/sl-design-system/components/pull/1056) [`51a32d1`](https://github.com/sl-design-system/components/commit/51a32d1331298cf1bc6c0a2311ec6204606d1126) - Fixed checkbox checked value; + When a grid includes both a selection column and a filter column, a potential issue may arise. If you select a filter and then proceed to check a checkbox in the selection column, subsequently deselecting it, the checked status of the filtered item might not be visible. However, the filtering functionality remains intact. + + Fixed it by changing ?checked to .checked since it should have the same effect, as both the property and attribute control whether the checkbox is checked or not. + ## 0.1.3 ### Patch Changes diff --git a/packages/components/grid/package.json b/packages/components/grid/package.json index caba511ab0..725d378c19 100644 --- a/packages/components/grid/package.json +++ b/packages/components/grid/package.json @@ -1,6 +1,6 @@ { "name": "@sl-design-system/grid", - "version": "0.1.3", + "version": "0.1.4", "description": "Grid components for the SL Design System", "license": "Apache-2.0", "publishConfig": { diff --git a/packages/components/switch/CHANGELOG.md b/packages/components/switch/CHANGELOG.md index 82b3766f87..bc16f452a8 100644 --- a/packages/components/switch/CHANGELOG.md +++ b/packages/components/switch/CHANGELOG.md @@ -1,5 +1,11 @@ # @sl-design-system/switch +## 0.0.18 + +### Patch Changes + +- [#1072](https://github.com/sl-design-system/components/pull/1072) [`1192bad`](https://github.com/sl-design-system/components/commit/1192badb7bf12ac09658b12cea6bb93da005d8f2) - Fix missing types. + ## 0.0.17 ### Patch Changes diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json index dd7cab2dc7..1597c6d418 100644 --- a/packages/components/switch/package.json +++ b/packages/components/switch/package.json @@ -1,6 +1,6 @@ { "name": "@sl-design-system/switch", - "version": "0.0.17", + "version": "0.0.18", "description": "Switch component for the SL Design System", "license": "Apache-2.0", "publishConfig": { diff --git a/packages/themes/magister/CHANGELOG.md b/packages/themes/magister/CHANGELOG.md index bed314d842..d6aca06fb6 100644 --- a/packages/themes/magister/CHANGELOG.md +++ b/packages/themes/magister/CHANGELOG.md @@ -1,5 +1,11 @@ # @sanomalearning/slds-magister +## 0.1.6 + +### Patch Changes + +- [#1050](https://github.com/sl-design-system/components/pull/1050) [`0332a65`](https://github.com/sl-design-system/components/commit/0332a653889671d9d026e52efc82a3633b94210e) - Tokens fixes + ## 0.1.5 ### Patch Changes diff --git a/packages/themes/magister/package.json b/packages/themes/magister/package.json index b8b68c45e9..10fdd7decc 100644 --- a/packages/themes/magister/package.json +++ b/packages/themes/magister/package.json @@ -1,7 +1,7 @@ { "name": "@sl-design-system/magister", "description": "Magister theme for the SL Design System", - "version": "0.1.5", + "version": "0.1.6", "license": "Apache 2.0", "publishConfig": { "registry": "https://npm.pkg.github.com" diff --git a/packages/themes/myvanin/CHANGELOG.md b/packages/themes/myvanin/CHANGELOG.md index 207733ea62..e1a095c720 100644 --- a/packages/themes/myvanin/CHANGELOG.md +++ b/packages/themes/myvanin/CHANGELOG.md @@ -1,5 +1,11 @@ # @sl-design-system/myvanin +## 0.1.7 + +### Patch Changes + +- [#1041](https://github.com/sl-design-system/components/pull/1041) [`d2aee27`](https://github.com/sl-design-system/components/commit/d2aee279e90ff6f76f9e0db046e9965493448248) - Changed font weight from bold to semi-bold + ## 0.1.6 ### Patch Changes diff --git a/packages/themes/myvanin/package.json b/packages/themes/myvanin/package.json index c36a6284a2..069f763797 100644 --- a/packages/themes/myvanin/package.json +++ b/packages/themes/myvanin/package.json @@ -1,7 +1,7 @@ { "name": "@sl-design-system/myvanin", "description": "My Van In theme for the SL Design System", - "version": "0.1.6", + "version": "0.1.7", "license": "Apache 2.0", "publishConfig": { "registry": "https://npm.pkg.github.com" diff --git a/packages/themes/sanoma-utbildning/CHANGELOG.md b/packages/themes/sanoma-utbildning/CHANGELOG.md index f0144c807d..cdf89d07c5 100644 --- a/packages/themes/sanoma-utbildning/CHANGELOG.md +++ b/packages/themes/sanoma-utbildning/CHANGELOG.md @@ -1 +1,7 @@ # @sanomalearning/sanoma-utbildning + +## 0.0.2 + +### Patch Changes + +- [#1041](https://github.com/sl-design-system/components/pull/1041) [`d2aee27`](https://github.com/sl-design-system/components/commit/d2aee279e90ff6f76f9e0db046e9965493448248) - Added theme diff --git a/packages/themes/sanoma-utbildning/package.json b/packages/themes/sanoma-utbildning/package.json index 76d038eb0c..b5b601b43d 100644 --- a/packages/themes/sanoma-utbildning/package.json +++ b/packages/themes/sanoma-utbildning/package.json @@ -1,7 +1,7 @@ { "name": "@sl-design-system/sanoma-utbildning", "description": "Sanoma Utbildning theme for the SL Design System", - "version": "0.0.1", + "version": "0.0.2", "license": "Apache 2.0", "publishConfig": { "registry": "https://npm.pkg.github.com" diff --git a/packages/themes/teas/CHANGELOG.md b/packages/themes/teas/CHANGELOG.md index 065f2402de..5a9a4bd6fa 100644 --- a/packages/themes/teas/CHANGELOG.md +++ b/packages/themes/teas/CHANGELOG.md @@ -1,5 +1,11 @@ # @sl-design-system/teas +## 0.1.7 + +### Patch Changes + +- [#1050](https://github.com/sl-design-system/components/pull/1050) [`0332a65`](https://github.com/sl-design-system/components/commit/0332a653889671d9d026e52efc82a3633b94210e) - Tokens fixes + ## 0.1.6 ### Patch Changes diff --git a/packages/themes/teas/package.json b/packages/themes/teas/package.json index a2bee21a84..3b616a626f 100644 --- a/packages/themes/teas/package.json +++ b/packages/themes/teas/package.json @@ -1,7 +1,7 @@ { "name": "@sl-design-system/teas", "description": "TEAS theme for the SL Design System", - "version": "0.1.6", + "version": "0.1.7", "license": "Apache 2.0", "publishConfig": { "registry": "https://npm.pkg.github.com" diff --git a/tools/eslint-config/CHANGELOG.md b/tools/eslint-config/CHANGELOG.md index 26d0ba7426..c578f8a1ec 100644 --- a/tools/eslint-config/CHANGELOG.md +++ b/tools/eslint-config/CHANGELOG.md @@ -1,5 +1,11 @@ # @sl-design-system/eslint-config +## 0.0.3 + +### Patch Changes + +- [#1059](https://github.com/sl-design-system/components/pull/1059) [`0e3a86d`](https://github.com/sl-design-system/components/commit/0e3a86dff0f29fd56b507c4f2a77e73559f7207c) - Upgrade dependencies + ## 0.0.2 ### Patch Changes diff --git a/tools/eslint-config/package.json b/tools/eslint-config/package.json index 1139e1b3ef..302e798e01 100644 --- a/tools/eslint-config/package.json +++ b/tools/eslint-config/package.json @@ -1,6 +1,6 @@ { "name": "@sl-design-system/eslint-config", - "version": "0.0.2", + "version": "0.0.3", "packageManager": "yarn@4.1.1", "description": "ESLint config for SL Design System projects", "license": "Apache-2.0", From 38b0ca4d72014605418639b69410863eb8e231ad Mon Sep 17 00:00:00 2001 From: Anna Sobczak <111562742+anna-lach@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:15:12 +0100 Subject: [PATCH 6/7] Fix/shared missing events exports (#1073) * Update index.ts * changeset added * fixed export --- .changeset/dry-starfishes-suffer.md | 5 +++++ packages/components/shared/index.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/dry-starfishes-suffer.md diff --git a/.changeset/dry-starfishes-suffer.md b/.changeset/dry-starfishes-suffer.md new file mode 100644 index 0000000000..cc54d09bba --- /dev/null +++ b/.changeset/dry-starfishes-suffer.md @@ -0,0 +1,5 @@ +--- +"@sl-design-system/shared": patch +--- + +Fix missing events types diff --git a/packages/components/shared/index.ts b/packages/components/shared/index.ts index d024f310b2..67200ea860 100644 --- a/packages/components/shared/index.ts +++ b/packages/components/shared/index.ts @@ -13,6 +13,7 @@ export * from './src/decorators/base.js'; export * from './src/decorators/event.js'; export * from './src/decorators/observe.js'; export * from './src/directives/anchor.js'; +export * from './src/events.js'; export * from './src/path.js'; export * from './src/popover.js'; export * from './src/string.js'; From 7e88dfdb8581afda1981598a6f4e354bd97c4b68 Mon Sep 17 00:00:00 2001 From: arecuenco-dsgn <77982487+arecuenco-dsgn@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:38:50 +0100 Subject: [PATCH 7/7] 427 - Radio Basic Documentation (#1000) * Radio Usage * Radio Usage - condense content * Radio Code Block * Radio Usage - Finetune list * Radio Usage - Code Block Finetune * Radio Usage - Code Block Fix syntax * attempt to fix code example * fixed example, added install info * add component * add component * got component working, but hid it because styling is missing. Code needs to be a component as well... * refactor (#1052) * refactor * correct message * review comments * review comments * change all code pages to new component * tokens * attempt to fix weird thing * put install info back * attempt to fix * attempt to create new doc source files * improve template file * cleanup * breat stuff to fix stuff * another break * removed even more * put table contents back * use {%- instead of {% * use {%- instead of {% * fix rendering of description with white lines * review comments * review comments * fix margin and intersection observer issues * fix font-size --------- Co-authored-by: Diana Broeders Co-authored-by: anna-lach --- packages/components/radio-group/src/radio.ts | 2 +- website/.eleventy.cjs | 4 + website/.stylelintrc | 8 +- website/esbuild.config.js | 3 +- .../custom-elements/custom-elements.json | 682 ++- .../_data/custom-elements/custom-elements.md | 4828 ----------------- website/src/_data/tokens/base.json | 68 + website/src/_includes/base.njk | 1 + .../categories/components/accordion/code.md | 29 +- .../src/categories/components/avatar/code.md | 27 +- .../src/categories/components/button/code.md | 27 +- .../categories/components/checkbox/code.md | 29 +- .../categories/components/component-table.njk | 107 +- .../src/categories/components/dialog/code.md | 27 +- .../categories/components/form-field/code.md | 26 +- .../src/categories/components/form/code.md | 26 +- .../components/inline-message/code.md | 27 +- .../components/message-dialog/code.md | 27 +- .../src/categories/components/popover/code.md | 29 +- .../categories/components/radio-group/code.md | 27 +- .../components/radio-group/radio-group.md | 2 +- .../components/radio-group/usage.md | 167 +- .../src/categories/components/select/code.md | 29 +- .../categories/components/skeleton/code.md | 29 +- .../src/categories/components/switch/code.md | 25 +- .../categories/components/text-field/code.md | 27 +- .../categories/components/textarea/code.md | 29 +- .../src/categories/components/tooltip/code.md | 27 +- website/src/styles/components/code.scss | 92 +- website/src/styles/components/tabs.scss | 6 +- website/src/styles/typography.scss | 27 +- .../code-snippet/code-snippet-style.ts | 170 + .../components/code-snippet/code-snippet.ts | 37 + website/src/ts/components/install-info.ts | 61 + website/src/ts/components/main.ts | 2 + website/src/ts/scripts/code-component.ts | 10 +- website/src/ts/scripts/main.ts | 2 +- website/src/ts/scripts/slds-components.ts | 12 +- website/src/ts/scripts/tabs.ts | 19 +- 39 files changed, 922 insertions(+), 5855 deletions(-) delete mode 100644 website/src/_data/custom-elements/custom-elements.md create mode 100644 website/src/ts/components/code-snippet/code-snippet-style.ts create mode 100644 website/src/ts/components/code-snippet/code-snippet.ts create mode 100644 website/src/ts/components/install-info.ts create mode 100644 website/src/ts/components/main.ts diff --git a/packages/components/radio-group/src/radio.ts b/packages/components/radio-group/src/radio.ts index c3669f7644..8321cee4cb 100644 --- a/packages/components/radio-group/src/radio.ts +++ b/packages/components/radio-group/src/radio.ts @@ -22,7 +22,7 @@ export class Radio extends LitElement { keydown: this.#onKeydown }); - /** Whether the radio is checked. */ + /** Whether the radio button is checked. */ @property({ type: Boolean, reflect: true }) checked?: boolean; /** Whether this radio button is disabled. */ diff --git a/website/.eleventy.cjs b/website/.eleventy.cjs index 450d744855..e06a34b148 100644 --- a/website/.eleventy.cjs +++ b/website/.eleventy.cjs @@ -25,6 +25,10 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPlugin(eleventyNavigationPlugin); eleventyConfig.addFilter('search', searchFilter); + + eleventyConfig.addFilter('nl2br', function(str) { + return str.replace(/\r|\n|\r\n/g, '
') + }); eleventyConfig.addLiquidFilter("tokenName", function(value) { const newValue = value?.replace(/([A-Z])/g, '.$1').trim(); diff --git a/website/.stylelintrc b/website/.stylelintrc index 0ba62a5998..bdc70d3d34 100644 --- a/website/.stylelintrc +++ b/website/.stylelintrc @@ -1,5 +1,5 @@ { - "extends": "../.stylelintrc.cjs", + "extends": "../.stylelintrc.mjs", "plugins": [ "stylelint-prettier" ], @@ -10,6 +10,12 @@ { "message": "Class names should match the SUIT CSS naming convention" } + ], + "custom-property-pattern": [ + "(-[a-z]+)*", + { + "message": "Expected kebab case for custom properties" + } ] } } diff --git a/website/esbuild.config.js b/website/esbuild.config.js index da26c17977..3b5234396b 100644 --- a/website/esbuild.config.js +++ b/website/esbuild.config.js @@ -8,8 +8,7 @@ const jsFolder = 'build'; const tsEntrypoints = [ './src/ts/utils/active-element.ts', - './src/ts/components/my-counter.ts', - './src/ts/components/test-component.ts', + './src/ts/components/*.ts', './src/ts/scripts/*.ts', './src/ts/ssr-utils/lit-hydrate-support.ts', './src/ts/ssr-utils/is-land.ts' diff --git a/website/src/_data/custom-elements/custom-elements.json b/website/src/_data/custom-elements/custom-elements.json index 2c31a59701..a8f43cc572 100644 --- a/website/src/_data/custom-elements/custom-elements.json +++ b/website/src/_data/custom-elements/custom-elements.json @@ -103,14 +103,6 @@ "attribute": "open", "reflects": true }, - { - "kind": "event", - "name": "sl-toggle", - "type": { - "text": "EventEmitter" - }, - "description": "Emits when the accordion item has been toggled." - }, { "kind": "field", "name": "summary", @@ -119,27 +111,27 @@ }, "description": "A text shown in the header - as a title of the accordion item.", "attribute": "summary" + }, + { + "kind": "event", + "name": "toggleEvent", + "type": { + "text": "EventEmitter>" + }, + "description": "Emits when the accordion item has been toggled." } ], "events": [ { "name": "toggleEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the accordion item has been toggled.", "fieldName": "toggleEvent" } ], "attributes": [ - { - "name": "summary", - "type": { - "text": "string | undefined" - }, - "description": "A text shown in the header - as a title of the accordion item.", - "fieldName": "summary" - }, { "name": "disabled", "type": { @@ -155,6 +147,14 @@ }, "description": "Whether the details element is opened.", "fieldName": "open" + }, + { + "name": "summary", + "type": { + "text": "string | undefined" + }, + "description": "A text shown in the header - as a title of the accordion item.", + "fieldName": "summary" } ], "superclass": { @@ -1701,7 +1701,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus." }, @@ -1709,7 +1709,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value of the group changes." }, @@ -1717,7 +1717,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus." }, @@ -1791,7 +1791,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus.", "fieldName": "blurEvent" @@ -1799,7 +1799,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value of the group changes.", "fieldName": "changeEvent" @@ -1807,7 +1807,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus.", "fieldName": "focusEvent" @@ -2330,7 +2330,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus." }, @@ -2338,7 +2338,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the checked state changes." }, @@ -2346,7 +2346,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus." }, @@ -2420,7 +2420,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus.", "fieldName": "blurEvent" @@ -2428,7 +2428,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the checked state changes.", "fieldName": "changeEvent" @@ -2436,7 +2436,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus.", "fieldName": "focusEvent" @@ -2888,7 +2888,7 @@ "kind": "event", "name": "sl-cancel", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the cancel has been cancelled. This happens when the user closes\nthe dialog using the escape key or clicks on the backdrop." }, @@ -2896,7 +2896,7 @@ "kind": "event", "name": "sl-close", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the dialog has been closed." } @@ -2905,7 +2905,7 @@ { "name": "cancelEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the cancel has been cancelled. This happens when the user closes\nthe dialog using the escape key or clicks on the backdrop.", "fieldName": "cancelEvent" @@ -2913,7 +2913,7 @@ { "name": "closeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the dialog has been closed.", "fieldName": "closeEvent" @@ -5203,7 +5203,7 @@ "kind": "event", "name": "sl-form-field", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the field is added to a form." } @@ -5212,7 +5212,7 @@ { "name": "formFieldEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the field is added to a form.", "fieldName": "formFieldEvent" @@ -5750,14 +5750,6 @@ "package": "./src/drag-handle-column.js" } }, - { - "kind": "js", - "name": "*", - "declaration": { - "name": "*", - "package": "./src/events.js" - } - }, { "kind": "js", "name": "*", @@ -5928,9 +5920,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -6272,12 +6264,12 @@ ], "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -6476,9 +6468,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed." }, @@ -6638,12 +6630,12 @@ ], "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate" + "fieldName": "columnUpdateEvent" } ], "attributes": [ @@ -6878,9 +6870,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -7213,12 +7205,12 @@ ], "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -7375,133 +7367,6 @@ } ] }, - { - "kind": "javascript-module", - "path": "../packages/components/grid/src/events.ts", - "declarations": [ - { - "kind": "class", - "description": "", - "name": "GridActiveItemChangeEvent", - "superclass": { - "name": "GridEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridColumnEvent", - "superclass": { - "name": "GridEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridEvent", - "superclass": { - "name": "Event", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridFilterValueChangeEvent", - "superclass": { - "name": "GridColumnEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridItemDropEvent", - "superclass": { - "name": "GridItemEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridItemEvent", - "superclass": { - "name": "GridEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "class", - "description": "", - "name": "GridSortDirectionChangeEvent", - "superclass": { - "name": "GridColumnEvent", - "module": "../packages/components/grid/src/events.ts" - } - } - ], - "exports": [ - { - "kind": "js", - "name": "GridEvent", - "declaration": { - "name": "GridEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridItemEvent", - "declaration": { - "name": "GridItemEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridItemDropEvent", - "declaration": { - "name": "GridItemDropEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridActiveItemChangeEvent", - "declaration": { - "name": "GridActiveItemChangeEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridColumnEvent", - "declaration": { - "name": "GridColumnEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridFilterValueChangeEvent", - "declaration": { - "name": "GridFilterValueChangeEvent", - "module": "../packages/components/grid/src/events.ts" - } - }, - { - "kind": "js", - "name": "GridSortDirectionChangeEvent", - "declaration": { - "name": "GridSortDirectionChangeEvent", - "module": "../packages/components/grid/src/events.ts" - } - } - ] - }, { "kind": "javascript-module", "path": "../packages/components/grid/src/filter-column.ts", @@ -7543,9 +7408,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -7936,12 +7801,12 @@ "customElement": true, "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -8163,17 +8028,17 @@ }, { "kind": "event", - "name": "filterChange", + "name": "filterChangeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the filter has been added or removed." }, { "kind": "event", - "name": "filterValueChange", + "name": "filterValueChangeEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the value of the this filter has changed." }, @@ -8217,20 +8082,20 @@ ], "events": [ { - "name": "filterChange", + "name": "filterChangeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the filter has been added or removed.", - "fieldName": "filterChange" + "fieldName": "filterChangeEvent" }, { - "name": "filterValueChange", + "name": "filterValueChangeEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the value of the this filter has changed.", - "fieldName": "filterValueChange" + "fieldName": "filterValueChangeEvent" } ], "attributes": [ @@ -8345,9 +8210,9 @@ }, { "kind": "event", - "name": "activeItemChange", + "name": "activeItemChangeEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the active item changes" }, @@ -8359,65 +8224,49 @@ }, "description": "Provide your own implementation for getting the data." }, - { - "kind": "field", - "name": "draggableRows", - "type": { - "text": "GridDraggableRows | undefined" - }, - "description": "Whether you can drag rows in the grid. If you use the drag-handle column,\nthen this property is automatically set by the column to 'between'.", - "attribute": "draggable-rows", - "expandedType": { - "text": "'between' | 'on-top' | 'between-or-on-top' | 'on-grid' | undefined" - } - }, - { - "kind": "field", - "name": "dropFilter", - "type": { - "text": "GridDropFilter | undefined" - }, - "description": "Determines if or what kind of drop target the given item is:\n- boolean: the item is valid drop target based on the draggableRows value\n- 'between': the item is a valid drop target between\n- 'on-top': the item is a valid drop target to drop on top of" - }, { "kind": "event", - "name": "gridDragend", + "name": "dragEndEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when a drag operation has finished." }, { "kind": "event", - "name": "gridDragstart", + "name": "dragStartEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when a drag operation is starting." }, { - "kind": "event", - "name": "gridDrop", + "kind": "field", + "name": "draggableRows", "type": { - "text": "EventEmitter>" + "text": "GridDraggableRows | undefined" }, - "description": "Emits when an item has been dropped." + "description": "Whether you can drag rows in the grid. If you use the drag-handle column,\nthen this property is automatically set by the column to 'between'.", + "attribute": "draggable-rows", + "expandedType": { + "text": "'between' | 'on-top' | 'between-or-on-top' | 'on-grid' | undefined" + } }, { "kind": "event", - "name": "gridItemsChange", + "name": "dropEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, - "description": "Emits when the items in the grid have changed." + "description": "Emits when an item has been dropped." }, { - "kind": "event", - "name": "gridStateChange", + "kind": "field", + "name": "dropFilter", "type": { - "text": "EventEmitter>" + "text": "GridDropFilter | undefined" }, - "description": "Emits when the state in the grid has changed." + "description": "Determines if or what kind of drop target the given item is:\n- boolean: the item is valid drop target based on the draggableRows value\n- 'between': the item is a valid drop target between\n- 'on-top': the item is a valid drop target to drop on top of" }, { "kind": "field", @@ -8570,6 +8419,14 @@ "default": "new SelectionController(this)", "description": "Selection manager." }, + { + "kind": "event", + "name": "stateChangeEvent", + "type": { + "text": "EventEmitter>" + }, + "description": "Emits when the state in the grid has changed." + }, { "kind": "field", "name": "striped", @@ -8599,52 +8456,44 @@ ], "events": [ { - "name": "activeItemChange", + "name": "activeItemChangeEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the active item changes", - "fieldName": "activeItemChange" + "fieldName": "activeItemChangeEvent" }, { - "name": "gridDragstart", + "name": "dragStartEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when a drag operation is starting.", - "fieldName": "gridDragstart" + "fieldName": "dragStartEvent" }, { - "name": "gridDragend", + "name": "dragEndEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when a drag operation has finished.", - "fieldName": "gridDragend" + "fieldName": "dragEndEvent" }, { - "name": "gridDrop", + "name": "dropEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when an item has been dropped.", - "fieldName": "gridDrop" + "fieldName": "dropEvent" }, { - "name": "gridItemsChange", + "name": "stateChangeEvent", "type": { - "text": "EventEmitter>" - }, - "description": "Emits when the items in the grid have changed.", - "fieldName": "gridItemsChange" - }, - { - "name": "gridStateChange", - "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the state in the grid has changed.", - "fieldName": "gridStateChange" + "fieldName": "stateChangeEvent" } ], "attributes": [ @@ -8946,7 +8795,7 @@ "kind": "event", "name": "sl-select", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the user changes the group selection." }, @@ -8954,7 +8803,7 @@ "kind": "event", "name": "sl-toggle", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the user collapses/expands the group." } @@ -8963,7 +8812,7 @@ { "name": "selectEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the user changes the group selection.", "fieldName": "selectEvent" @@ -8971,7 +8820,7 @@ { "name": "toggleEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the user collapses/expands the group.", "fieldName": "toggleEvent" @@ -9079,9 +8928,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -9431,12 +9280,12 @@ "customElement": true, "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -9643,9 +9492,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -10021,12 +9870,12 @@ "customElement": true, "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -10242,9 +10091,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -10608,12 +10457,12 @@ "customElement": true, "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -10842,45 +10691,45 @@ }, { "kind": "event", - "name": "sortDirectionChange", + "name": "sl-sort-direction-change", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the direction has changed." }, { - "kind": "field", - "name": "sorter", + "kind": "event", + "name": "sl-sorter-change", "type": { - "text": "DataSourceSortFunction | undefined" + "text": "EventEmitter" }, - "description": "An optional custom sort function." + "description": "Emits when the sorter has been added or removed." }, { - "kind": "event", - "name": "sorterChange", + "kind": "field", + "name": "sorter", "type": { - "text": "EventEmitter" + "text": "DataSourceSortFunction | undefined" }, - "description": "Emits when the sorter has been added or removed." + "description": "An optional custom sort function." } ], "events": [ { - "name": "sorterChange", + "name": "sorterChangeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the sorter has been added or removed.", - "fieldName": "sorterChange" + "fieldName": "sorterChangeEvent" }, { - "name": "sortDirectionChange", + "name": "sortDirectionChangeEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the direction has changed.", - "fieldName": "sortDirectionChange" + "fieldName": "sortDirectionChangeEvent" } ], "attributes": [ @@ -10998,9 +10847,9 @@ }, { "kind": "event", - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", "inheritedFrom": { @@ -11333,12 +11182,12 @@ ], "events": [ { - "name": "columnUpdate", + "name": "columnUpdateEvent", "type": { - "text": "EventEmitter>" + "text": "EventEmitter>" }, "description": "Emits when the column definition has changed.", - "fieldName": "columnUpdate", + "fieldName": "columnUpdateEvent", "inheritedFrom": { "name": "GridColumn", "module": "../packages/components/grid/src/column.ts" @@ -12799,7 +12648,7 @@ "kind": "event", "name": "sl-select", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the user toggles the selected state." }, @@ -12826,7 +12675,7 @@ { "name": "selectEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the user toggles the selected state.", "fieldName": "selectEvent" @@ -12997,7 +12846,7 @@ "kind": "event", "name": "sl-select", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the menu item selection changes." }, @@ -13016,7 +12865,7 @@ { "name": "selectEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the menu item selection changes.", "fieldName": "selectEvent" @@ -13814,7 +13663,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus." }, @@ -13822,7 +13671,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes." }, @@ -13830,7 +13679,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus." }, @@ -13904,7 +13753,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus.", "fieldName": "blurEvent" @@ -13912,7 +13761,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes.", "fieldName": "changeEvent" @@ -13920,7 +13769,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus.", "fieldName": "focusEvent" @@ -14235,7 +14084,7 @@ "type": { "text": "boolean | undefined" }, - "description": "Whether the radio is checked.", + "description": "Whether the radio button is checked.", "attribute": "checked", "reflects": true }, @@ -14292,7 +14141,7 @@ "type": { "text": "boolean | undefined" }, - "description": "Whether the radio is checked.", + "description": "Whether the radio button is checked.", "fieldName": "checked" }, { @@ -15018,7 +14867,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component." }, @@ -15026,7 +14875,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes." }, @@ -15034,7 +14883,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus." }, @@ -15118,7 +14967,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component.", "fieldName": "blurEvent" @@ -15126,7 +14975,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes.", "fieldName": "changeEvent" @@ -15134,7 +14983,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus.", "fieldName": "focusEvent" @@ -16120,7 +15969,43 @@ { "name": "element", "type": { - "text": "Window | Document | HTMLElement | ShadowRoot | MediaQueryList" + "text": "Element" + } + }, + { + "name": "type", + "type": { + "text": "K" + } + }, + { + "name": "listener", + "type": { + "text": "(this: Element, ev: GlobalEventHandlersEventMap[K]) => any" + } + }, + { + "name": "options", + "optional": true, + "type": { + "text": "boolean | AddEventListenerOptions" + } + } + ] + }, + { + "kind": "method", + "name": "listen", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "element", + "type": { + "text": "Window | Document | Element | HTMLElement | ShadowRoot | MediaQueryList" } }, { @@ -16356,7 +16241,43 @@ { "name": "element", "type": { - "text": "Window | Document | HTMLElement | ShadowRoot | MediaQueryList" + "text": "Element" + } + }, + { + "name": "type", + "type": { + "text": "K" + } + }, + { + "name": "listener", + "type": { + "text": "(this: Element, ev: GlobalEventHandlersEventMap[K]) => any" + } + }, + { + "name": "options", + "optional": true, + "type": { + "text": "boolean | AddEventListenerOptions" + } + } + ] + }, + { + "kind": "method", + "name": "listen", + "return": { + "type": { + "text": "void" + } + }, + "parameters": [ + { + "name": "element", + "type": { + "text": "Window | Document | Element | HTMLElement | ShadowRoot | MediaQueryList" } }, { @@ -19341,7 +19262,7 @@ { "name": "value", "type": { - "text": "T" + "text": "T | T['detail']" } }, { @@ -19367,7 +19288,7 @@ { "name": "value", "type": { - "text": "T" + "text": "T | T['detail']" } }, { @@ -19500,6 +19421,83 @@ } ] }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events.ts", + "declarations": [], + "exports": [ + { + "kind": "js", + "name": "SlBlurEvent", + "declaration": { + "name": "SlBlurEvent", + "module": "./events/blur.js" + } + }, + { + "kind": "js", + "name": "SlChangeEvent", + "declaration": { + "name": "SlChangeEvent", + "module": "./events/change.js" + } + }, + { + "kind": "js", + "name": "SlFocusEvent", + "declaration": { + "name": "SlFocusEvent", + "module": "./events/focus.js" + } + }, + { + "kind": "js", + "name": "SlSelectEvent", + "declaration": { + "name": "SlSelectEvent", + "module": "./events/select.js" + } + }, + { + "kind": "js", + "name": "SlToggleEvent", + "declaration": { + "name": "SlToggleEvent", + "module": "./events/toggle.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events/blur.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events/change.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events/focus.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events/select.ts", + "declarations": [], + "exports": [] + }, + { + "kind": "javascript-module", + "path": "../packages/components/shared/src/events/toggle.ts", + "declarations": [], + "exports": [] + }, { "kind": "javascript-module", "path": "../packages/components/shared/src/path.ts", @@ -20538,7 +20536,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus." }, @@ -20546,7 +20544,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the checked state changes." }, @@ -20554,7 +20552,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus." }, @@ -20628,7 +20626,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component loses focus.", "fieldName": "blurEvent" @@ -20636,7 +20634,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the checked state changes.", "fieldName": "changeEvent" @@ -20644,7 +20642,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component receives focus.", "fieldName": "focusEvent" @@ -21073,7 +21071,7 @@ "kind": "event", "name": "tabChange", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the tab has been selected/changed." }, @@ -21100,7 +21098,7 @@ { "name": "tabChange", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the tab has been selected/changed.", "fieldName": "tabChange" @@ -21678,7 +21676,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component." }, @@ -21686,7 +21684,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes." }, @@ -21694,7 +21692,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus." }, @@ -21779,7 +21777,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component.", "fieldName": "blurEvent" @@ -21787,7 +21785,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes.", "fieldName": "changeEvent" @@ -21795,7 +21793,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus.", "fieldName": "focusEvent" @@ -22470,7 +22468,7 @@ "kind": "event", "name": "sl-blur", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component." }, @@ -22478,7 +22476,7 @@ "kind": "event", "name": "sl-change", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes." }, @@ -22486,7 +22484,7 @@ "kind": "event", "name": "sl-focus", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus." }, @@ -22582,7 +22580,7 @@ { "name": "blurEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the focus leaves the component.", "fieldName": "blurEvent" @@ -22590,7 +22588,7 @@ { "name": "changeEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter>" }, "description": "Emits when the value changes.", "fieldName": "changeEvent" @@ -22598,7 +22596,7 @@ { "name": "focusEvent", "type": { - "text": "EventEmitter" + "text": "EventEmitter" }, "description": "Emits when the component gains focus.", "fieldName": "focusEvent" diff --git a/website/src/_data/custom-elements/custom-elements.md b/website/src/_data/custom-elements/custom-elements.md deleted file mode 100644 index 135abf0b5c..0000000000 --- a/website/src/_data/custom-elements/custom-elements.md +++ /dev/null @@ -1,4828 +0,0 @@ -# `../packages/components/accordion/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------------- | -| `js` | `*` | * | | ./src/accordion.js | -| `js` | `*` | * | | ./src/accordion-item.js | - -# `../packages/components/accordion/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------------- | ------------- | ---------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-accordion` | Accordion | /packages/components/accordion/src/accordion.js | | -| `custom-element-definition` | `sl-accordion-item` | AccordionItem | /packages/components/accordion/src/accordion-item.js | | - -# `../packages/components/accordion/src/accordion-item.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ----------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/accordion/src/accordion-item.scss.ts | | - -# `../packages/components/accordion/src/accordion-item.ts`: - -## class: `AccordionItem`, `sl-accordion-item` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------- | ------- | -------------------------------------------------------------- | -------------- | -| `disabled` | | `boolean \| undefined` | | Whether the element is disabled. | | -| `open` | | `boolean \| undefined` | | Whether the details element is opened. | | -| `summary` | | `string \| undefined` | | A text shown in the header - as a title of the accordion item. | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ---------------------- | ----------------------------------------------- | -------------- | -| `toggleEvent` | `EventEmitter` | Emits when the accordion item has been toggled. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `summary` | summary | | -| `disabled` | disabled | | -| `open` | open | | - -### CSS Parts - -| Name | Description | -| --------- | ------------------------------------ | -| `summary` | Header element of the accordion-item | - -### Slots - -| Name | Description | -| --------- | ------------------------------ | -| `default` | Body content for the accordion | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | ------------------------------------------------------ | ------- | -| `js` | `AccordionItem` | AccordionItem | ../packages/components/accordion/src/accordion-item.ts | | - -# `../packages/components/accordion/src/accordion.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/accordion/src/accordion.scss.ts | | - -# `../packages/components/accordion/src/accordion.ts`: - -## class: `Accordion`, `sl-accordion` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -------------- | -| `single` | | `boolean \| undefined` | | Whether only one accordion item can be opened at once. By default, multiple accordion items can be opened. | | - -### Attributes - -| Name | Field | Inherited From | -| -------- | ------ | -------------- | -| `single` | single | | - -### Slots - -| Name | Description | -| --------- | -------------------------------------------- | -| `default` | The place for multiple `` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------- | ----------- | ------------------------------------------------- | ------- | -| `js` | `Accordion` | Accordion | ../packages/components/accordion/src/accordion.ts | | - -# `../packages/components/avatar/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/avatar.js | -| `js` | `*` | * | | ./src/models.js | - -# `../packages/components/avatar/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-avatar` | Avatar | /packages/components/avatar/src/avatar.js | | - -# `../packages/components/avatar/src/avatar.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/avatar/src/avatar.scss.ts | | - -# `../packages/components/avatar/src/avatar.ts`: - -## class: `Avatar`, `sl-avatar` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------------- | ------- | -------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `badgeText` | | `string \| undefined` | | Text to show on the badge in the top right corner of the avatar. Be aware this text should not be more then a few characters. Typically this option is used to show a number, for example unread messages. | | -| `displayInitials` | | `string \| undefined` | | The initials that need to be displayed. If none are set they are determined based on the displayName . | | -| `displayName` | | `string \| undefined` | | The name that needs to be displayed. | | -| `fallback` | | `'initials' \| 'image'` | `'initials'` | The fallback to use when there is no user image present. | | -| `imageOnly` | | `boolean \| undefined` | | This hides the name when set to true. | | -| `label` | | `string` | `''` | Used for the aria-label on the image. You can use `{{badgeText}}` in the string to have it replaced by the value set in the badgeText. For example to show "6 unread messages", where 6 is also shown in the badge. | | -| `orientation` | | `'horizontal' \| 'vertical'` | `'horizontal'` | The orientation of the avatar. | | -| `pictureUrl` | | `string \| undefined` | | The url of the avatar image. | | -| `size` | | `'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'` | `'md'` | The size of the avatar. | | -| `status` | | `'danger' \| 'success' \| 'warning' \| 'accent' \| 'neutral' \| 'primary'` | | Optional user status to show. | | - -### Attributes - -| Name | Field | Inherited From | -| ------------------ | --------------- | -------------- | -| `badge-text` | badgeText | | -| `fallback` | fallback | | -| `image-only` | imageOnly | | -| `label` | label | | -| `orientation` | orientation | | -| `size` | size | | -| `status` | status | | -| `display-name` | displayName | | -| `display-initials` | displayInitials | | -| `picture-url` | pictureUrl | | - -### CSS Properties - -| Name | Default | Description | -| ----------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `--sl-avatar-max-inline-size` | | Max inline-size of the container in vertical mode. If not set it will behave like a regular `display: block` element. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Avatar` | Avatar | ../packages/components/avatar/src/avatar.ts | | - -# `../packages/components/badge/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | -------------- | -| `js` | `*` | * | | ./src/badge.js | - -# `../packages/components/badge/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ---------- | ----------- | --------------------------------------- | ------- | -| `custom-element-definition` | `sl-badge` | Badge | /packages/components/badge/src/badge.js | | - -# `../packages/components/badge/src/badge.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/badge/src/badge.scss.ts | | - -# `../packages/components/badge/src/badge.ts`: - -## class: `Badge`, `sl-badge` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | -------------- | ----------- | -------------------------------- | -------------- | -| `size` | | `BadgeSize` | `'md'` | The size of the badge component. | | -| `variant` | | `BadgeVariant` | `'neutral'` | The variant of the badge. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `size` | size | | -| `variant` | variant | | - -### Slots - -| Name | Description | -| --------- | --------------------- | -| `default` | Contents of the badge | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------- | ----------- | ----------------------------------------- | ------- | -| `js` | `Badge` | Badge | ../packages/components/badge/src/badge.ts | | - -# `../packages/components/breadcrumbs/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | -------------------- | -| `js` | `*` | * | | ./src/breadcrumbs.js | - -# `../packages/components/breadcrumbs/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ---------------- | ----------- | --------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-breadcrumbs` | Breadcrumbs | /packages/components/breadcrumbs/src/breadcrumbs.js | | - -# `../packages/components/breadcrumbs/src/breadcrumbs.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/breadcrumbs/src/breadcrumbs.scss.ts | | - -# `../packages/components/breadcrumbs/src/breadcrumbs.ts`: - -## class: `Breadcrumbs`, `sl-breadcrumbs` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | --------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `homeUrl` | | `string` | `'/'` | The url for the home link, defaults to the root url. By changing this static property you can change the default value for all future instances of the component. Changing the static property won't affect already created instances. | | -| `noHome` | | `boolean` | `false` | When true doesn't show a home link as the first breadcrumb. By changing this static property you can change the default value for all future instances of the component. Changing the static property won't affect already created instances. | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `breadcrumbs` | | `Breadcrumb[]` | `[]` | The slotted breadcrumbs. | | -| `collapseThreshold` | | `number` | `3` | The threshold for when breadcrumbs should be collapsed into a menu. | | -| `homeUrl` | | | | The url for the home link, defaults to the root url. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. | | -| `noHome` | | | | When true doesn't show a home link as the first breadcrumb. If you want to change the default value for all future instances of the component, you can change the static property. If you want to change the property of an already created instance, you need to change this property. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | ------- | -------------- | -| `home-url` | homeUrl | | -| `no-home` | noHome | | - -### Slots - -| Name | Description | -| --------- | --------------------------- | -| `default` | The breadcrumbs to display. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------- | ----------- | ----------------------------------------------------- | ------- | -| `js` | `Breadcrumbs` | Breadcrumbs | ../packages/components/breadcrumbs/src/breadcrumbs.ts | | - -# `../packages/components/button-bar/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------------- | -| `js` | `*` | * | | ./src/button-bar.js | - -# `../packages/components/button-bar/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | --------------- | ----------- | ------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-button-bar` | ButtonBar | /packages/components/button-bar/src/button-bar.js | | - -# `../packages/components/button-bar/src/button-bar.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/button-bar/src/button-bar.scss.ts | | - -# `../packages/components/button-bar/src/button-bar.ts`: - -## class: `ButtonBar`, `sl-button-bar` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ----------------------------- | ------- | -------------------------------------------------------------------- | -------------- | -| `align` | | `ButtonBarAlign \| undefined` | | The alignment of the buttons within the bar. | | -| `reverse` | | `boolean \| undefined` | | When set to true, the button order is reversed using flex-direction. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `align` | align | | -| `reverse` | reverse | | - -### CSS Properties - -| Name | Default | Description | -| --------------------------- | ------- | ------------------------------------------- | -| `--sl-button-bar-align` | | The alignment of the buttons within the bar | -| `--sl-button-bar-direction` | | The flex direction of the button container | - -### Slots - -| Name | Description | -| --------- | -------------------------------- | -| `default` | Buttons to be grouped in the bar | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------- | ----------- | --------------------------------------------------- | ------- | -| `js` | `ButtonBar` | ButtonBar | ../packages/components/button-bar/src/button-bar.ts | | - -# `../packages/components/button/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/button.js | - -# `../packages/components/button/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-button` | Button | /packages/components/button/src/button.js | | - -# `../packages/components/button/src/button.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/button/src/button.scss.ts | | - -# `../packages/components/button/src/button.ts`: - -## class: `Button`, `sl-button` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | -------------- | -| `disabled` | | `boolean \| undefined` | | Whether the button is disabled; when set no interaction is possible. | | -| `fill` | | `ButtonFill` | `'solid'` | The fill of the button. | | -| `size` | | `ButtonSize` | `'md'` | The size of the button. | | -| `type` | | `ButtonType` | `'button'` | The type of the button. Can be used to mimic the functionality of submit and reset buttons in native HTML buttons. | | -| `variant` | | `ButtonVariant` | `'default'` | The variant of the button. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `disabled` | disabled | | -| `fill` | fill | | -| `size` | size | | -| `type` | type | | -| `variant` | variant | | - -### Slots - -| Name | Description | -| --------- | ------------------------------------------------------------------------- | -| `default` | Text label of the button. Optionally an sl-icon can be added | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Button` | Button | ../packages/components/button/src/button.ts | | - -# `../packages/components/card/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------- | -| `js` | `*` | * | | ./src/card.js | - -# `../packages/components/card/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | --------- | ----------- | ------------------------------------- | ------- | -| `custom-element-definition` | `sl-card` | Card | /packages/components/card/src/card.js | | - -# `../packages/components/card/src/card.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/card/src/card.scss.ts | | - -# `../packages/components/card/src/card.ts`: - -## class: `Card`, `sl-card` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ---------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `explicitHeight` | | `boolean \| undefined` | | When the height of the card is set (or constrained) by its container (for example in a grid with fixed rows) this needs to be set to be added in order to assure the correct rendering | | -| `height` | | `CardHeightOptions` | `'fixed'` | When the height is `fixed` the image will determine the height of the card, when it is `flex` the height of the text will determine the height of the card. | | -| `mediaPosition` | | `CardMediaPosition` | `'start'` | Show the media at the start or at the end. | | -| `orientation` | | `CardOrientation` | `'horizontal'` | The position of the media in relation to the text | | -| `padding` | | `boolean` | `false` | Indicates whether there is a padding around the media. Recommended to set to true when the `--sl-card-stretch-image` isn't set to 100% | | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | -------------- | -| `padding` | padding | | -| `explicit-height` | explicitHeight | | -| `height` | height | | -| `orientation` | orientation | | -| `media-position` | mediaPosition | | - -### CSS Properties - -| Name | Default | Description | -| ---------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--sl-card-media-aspect-ratio` | | The aspectratio of the media container (default is 4/3). By default this ratio is always maintained, and will cause the media to become smaller when there isn't sufficient space for the full width. | -| `--sl-card-media-width` | | The width of the media in relation to the text. Can be set in pixels or `fr`. | -| `--sl-card-media-x` | | X-Focuspoint of the media; this is taken as the center when the media is cropped. | -| `--sl-card-media-y` | | Y-Focuspoint of the media; this is taken as the center when the media is cropped. | -| `--sl-card-orientation-breakpoint` | | When card is smaller than this size it will switch from horizontal (when set) to vertical layout. | -| `--sl-card-stretch-image` | | Set this to 100% when the aspectratio of the media doesn't matter and you want it to fill the full height of the card. | -| `--sl-card-text-width` | | The width of the text in relation to the media. Can be set in pixels (not recommended) or `fr`. | - -### Slots - -| Name | Description | -| --------- | ------------------------------------ | -| `default` | Title of the card | -| `media` | Media, this can be an image or video | -| `header` | Subtitle or badges | -| `body` | Body text of the card | -| `actions` | Icon button for actions on the card. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Card` | Card | ../packages/components/card/src/card.ts | | - -# `../packages/components/checkbox/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------------- | -| `js` | `*` | * | | ./src/checkbox.js | -| `js` | `*` | * | | ./src/checkbox-group.js | - -# `../packages/components/checkbox/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------------- | ------------- | --------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-checkbox` | Checkbox | /packages/components/checkbox/src/checkbox.js | | -| `custom-element-definition` | `sl-checkbox-group` | CheckboxGroup | /packages/components/checkbox/src/checkbox-group.js | | - -# `../packages/components/checkbox/src/checkbox-group.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/checkbox/src/checkbox-group.scss.ts | | - -# `../packages/components/checkbox/src/checkbox-group.ts`: - -## class: `CheckboxGroup`, `sl-checkbox-group` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| ------------------ | ------ | ---------------------- | -| `FormControlMixin` | | @sl-design-system/form | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the group is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `required` | | `boolean \| undefined` | | At least one checkbox in the group must be checked if true. | | -| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `'md' \| 'lg'` | | The size of the checkboxes in the group. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value of the group. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | -------------------- | ------------------------------------------ | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the component loses focus. | | -| `changeEvent` | `EventEmitter` | Emits when the value of the group changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component receives focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `disabled` | disabled | | -| `required` | required | | -| `size` | size | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### Slots - -| Name | Description | -| --------- | --------------------------------- | -| `default` | A list of `sl-checkbox` elements. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | ----------------------------------------------------- | ------- | -| `js` | `CheckboxGroup` | CheckboxGroup | ../packages/components/checkbox/src/checkbox-group.ts | | - -# `../packages/components/checkbox/src/checkbox.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/checkbox/src/checkbox.scss.ts | | - -# `../packages/components/checkbox/src/checkbox.ts`: - -## class: `Checkbox`, `sl-checkbox` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| ------------------ | ------ | ---------------------- | -| `FormControlMixin` | | @sl-design-system/form | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `checked` | | `boolean \| undefined` | | Whether the checkbox is checked. | | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the checkbox is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `indeterminate` | | `boolean \| undefined` | | Whether the checkbox has the indeterminate state. | | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `required` | | `boolean \| undefined` | | Whether the checkbox is required. | | -| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `CheckboxSize` | `'md'` | The size of the checkbox. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value of the checkbox when the checkbox is checked. See the formValue property for easy access. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ------------------------- | ---------------------------------------- | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the component loses focus. | | -| `changeEvent` | `EventEmitter` | Emits when the checked state changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component receives focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `checked` | checked | | -| `disabled` | disabled | | -| `indeterminate` | indeterminate | | -| `required` | required | | -| `show-valid` | showValid | | -| `size` | size | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### Slots - -| Name | Description | -| --------- | ---------------------------------------------------------------------------------------------------------- | -| `default` | Text label of the checkbox. Technically there are no limits what can be put here; text, images, icons etc. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | ----------------------------------------------- | ------- | -| `js` | `Checkbox` | Checkbox | ../packages/components/checkbox/src/checkbox.ts | | - -# `../packages/components/dialog/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/dialog.js | - -# `../packages/components/dialog/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-dialog` | Dialog | /packages/components/dialog/src/dialog.js | | - -# `../packages/components/dialog/src/dialog.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/dialog/src/dialog.scss.ts | | - -# `../packages/components/dialog/src/dialog.ts`: - -## class: `Dialog`, `sl-dialog` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | --------------------------- | ---------- | ----------------------------------------------------------------------------------------------------- | -------------- | -| `closeButton` | | `boolean \| undefined` | | Determines whether a close button should be shown in the top right corner. | | -| `dialogRole` | | `'dialog' \| 'alertdialog'` | `'dialog'` | The role for the dialog element. | | -| `disableCancel` | | `boolean \| undefined` | | Disables the ability to cancel the dialog by pressing the Escape key or clicking on the backdrop. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------- | ------- | ----------- | ---------- | ------ | -------------- | -| `close` | | | | `void` | | -| `showModal` | | | | `void` | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | -| `cancelEvent` | `EventEmitter` | Emits when the cancel has been cancelled. This happens when the user closes the dialog using the escape key or clicks on the backdrop. | | -| `closeEvent` | `EventEmitter` | Emits when the dialog has been closed. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------------- | ------------- | -------------- | -| `close-button` | closeButton | | -| `dialog-role` | dialogRole | | -| `disable-cancel` | disableCancel | | - -### CSS Properties - -| Name | Default | Description | -| ----------------------------- | ------- | ------------------------------- | -| `--sl-dialog-max-inline-size` | | The maximum width of the dialog | - -### CSS Parts - -| Name | Description | -| ------------ | --------------------------------------- | -| `dialog` | The dialog element | -| `titles` | The container of the title and subtitle | -| `header-bar` | The button bar in the header | -| `footer-bar` | The button bar in the footer | - -### Slots - -| Name | Description | -| ---------------- | ---------------------------------------------- | -| `actions` | Area where action buttons are placed | -| `default` | Body content for the dialog | -| `footer` | Footer content for the dialog | -| `header` | Header content for the dialog | -| `header-buttons` | More space for buttons for the dialog's header | -| `title` | The title of the dialog | -| `subtitle` | The subtitle of the dialog | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Dialog` | Dialog | ../packages/components/dialog/src/dialog.ts | | - -# `../packages/components/drawer/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/drawer.js | - -# `../packages/components/drawer/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-drawer` | Drawer | /packages/components/drawer/src/drawer.js | | - -# `../packages/components/drawer/src/drawer.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/drawer/src/drawer.scss.ts | | - -# `../packages/components/drawer/src/drawer.ts`: - -## class: `Drawer`, `sl-drawer` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------------- | ------- | -------------------------------- | --------- | -------------------------------------------------------------- | -------------- | -| `attachment` | | `DrawerAttachment` | `'right'` | The side of the screen where the drawer is attached | | -| `closeButtonSize` | | `ButtonSize` | `'sm'` | The size of the button | | -| `dialog` | | `HTMLDialogElement \| undefined` | | | | -| `disableClose` | | `boolean` | `false` | Disables the ability to close the dialog using the Escape key. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------- | ------- | ----------- | ---------- | ------ | -------------- | -| `close` | | | | `void` | | -| `showModal` | | | | `void` | | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | --------------- | -------------- | -| `disable-close` | disableClose | | -| `attachment` | attachment | | -| `closeButtonSize` | closeButtonSize | | - -### CSS Properties - -| Name | Default | Description | -| ----------------------------- | ------- | ------------------------------------- | -| `--sl-drawer-max-inline-size` | | The maximum inline size of the drawer | - -### Slots - -| Name | Description | -| --------- | ----------------------------- | -| `default` | Body content for the drawer | -| `header` | Header content for the drawer | -| `title` | The title of the drawer | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Drawer` | Drawer | ../packages/components/drawer/src/drawer.ts | | - -# `../packages/components/editor/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/editor.js | - -# `../packages/components/editor/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-editor` | Editor | /packages/components/editor/src/editor.js | | - -# `../packages/components/editor/src/commands.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| --------- | ----------- | ----------------- | --------- | -| `setHTML` | | `content: string` | `Command` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `setHTML` | setHTML | ../packages/components/editor/src/commands.ts | | - -# `../packages/components/editor/src/editor.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/editor/src/editor.scss.ts | | - -# `../packages/components/editor/src/editor.ts`: - -## class: `Editor`, `sl-editor` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| ------------------ | ------ | ---------------------- | -| `FormControlMixin` | | @sl-design-system/form | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `plugins` | | `Plugin[] \| undefined` | | Additional plugins. | | -| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value for this form control. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------- | ---------------- | -| `createEditor` | | | | `EditorView` | | -| `createSchema` | | | | `Schema` | | -| `createState` | | | | `EditorState` | | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ---- | --------------- | ----------- | ---------------- | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Editor` | Editor | ../packages/components/editor/src/editor.ts | | - -# `../packages/components/editor/src/keymap.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ----------------- | ----------- | ------------------------------------------ | ---------------------------- | -| `buildKeymap` | | `schema: Schema` | `{ [key: string]: Command }` | -| `buildListKeymap` | | `schema: Schema` | `{ [key: string]: Command }` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ------------------------------------------- | ------- | -| `js` | `buildKeymap` | buildKeymap | ../packages/components/editor/src/keymap.ts | | -| `js` | `buildListKeymap` | buildListKeymap | ../packages/components/editor/src/keymap.ts | | - -# `../packages/components/editor/src/list-utils.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ------------------------- | ----------- | ----------------------------------------------------------------------------------------- | --------------------- | -| `findAncestorPosition` | | `doc: Node, pos: ResolvedPos` | `ResolvedPos` | -| `getAncestorNodesBetween` | | `doc: Node, $from: ResolvedPos, $to: ResolvedPos` | `Node[]` | -| `getListLiftTarget` | | `schema: Schema, resPos: ResolvedPos` | `number` | -| `isRangeOfType` | | `doc: Node, $from: ResolvedPos, $to: ResolvedPos, nodeType: NodeType` | `boolean` | -| `liftFollowingList` | | `state: EditorState, from: number, to: number, rootListDepthNum: number, tr: Transaction` | `Transaction` | -| `liftListItems` | | | `Command` | -| `liftSelectionList` | | `state: EditorState, tr: Transaction` | `Transaction` | -| `rootListDepth` | | `pos: ResolvedPos, nodes: { [key: string]: NodeType }` | `number \| undefined` | -| `splitListItemKeepMarks` | | `itemType: NodeType` | | -| `toggleList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView, listType: string` | `boolean` | -| `toggleListCommand` | | `listType: string` | `Command` | -| `toggleOrderedList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView` | `boolean` | -| `toggleUnorderedList` | | `state: EditorState, dispatch: DispatchFn, view: EditorView` | `boolean` | -| `wrapInList` | | `nodeType: NodeType` | `Command` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------------- | ----------------------- | ----------------------------------------------- | ------- | -| `js` | `rootListDepth` | rootListDepth | ../packages/components/editor/src/list-utils.ts | | -| `js` | `getListLiftTarget` | getListLiftTarget | ../packages/components/editor/src/list-utils.ts | | -| `js` | `liftSelectionList` | liftSelectionList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `toggleList` | toggleList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `toggleListCommand` | toggleListCommand | ../packages/components/editor/src/list-utils.ts | | -| `js` | `liftFollowingList` | liftFollowingList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `isRangeOfType` | isRangeOfType | ../packages/components/editor/src/list-utils.ts | | -| `js` | `getAncestorNodesBetween` | getAncestorNodesBetween | ../packages/components/editor/src/list-utils.ts | | -| `js` | `findAncestorPosition` | findAncestorPosition | ../packages/components/editor/src/list-utils.ts | | -| `js` | `liftListItems` | liftListItems | ../packages/components/editor/src/list-utils.ts | | -| `js` | `wrapInList` | wrapInList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `toggleUnorderedList` | toggleUnorderedList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `toggleOrderedList` | toggleOrderedList | ../packages/components/editor/src/list-utils.ts | | -| `js` | `splitListItemKeepMarks` | splitListItemKeepMarks | ../packages/components/editor/src/list-utils.ts | | - -# `../packages/components/editor/src/schema.ts`: - -## Variables - -| Name | Description | Type | -| ------- | ----------- | ------------------------------- | -| `marks` | | `Record` | -| `nodes` | | `Record` | - -
- -## Functions - -| Name | Description | Parameters | Return | -| -------------------- | ----------- | ------------------------------------------------------------------- | ------------------------ | -| `commonAttributes` | | | `Attrs` | -| `isEmpty` | | `obj: Record` | `boolean` | -| `removeEmptyEntries` | | `obj: Record` | `Record` | -| `removeEntries` | | `obj: Record, predicate: (key: string) => boolean` | `Record` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------------- | ------------------ | ------------------------------------------- | ------- | -| `js` | `isEmpty` | isEmpty | ../packages/components/editor/src/schema.ts | | -| `js` | `removeEntries` | removeEntries | ../packages/components/editor/src/schema.ts | | -| `js` | `removeEmptyEntries` | removeEmptyEntries | ../packages/components/editor/src/schema.ts | | -| `js` | `commonAttributes` | commonAttributes | ../packages/components/editor/src/schema.ts | | -| `js` | `marks` | marks | ../packages/components/editor/src/schema.ts | | -| `js` | `nodes` | nodes | ../packages/components/editor/src/schema.ts | | - -# `../packages/components/editor/src/utils.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ------------------- | ----------- | ----------------------- | -------- | -| `createContentNode` | | `schema: Schema, value` | `Node` | -| `getHTML` | | `state: EditorState` | `string` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------- | ----------------- | ------------------------------------------ | ------- | -| `js` | `createContentNode` | createContentNode | ../packages/components/editor/src/utils.ts | | -| `js` | `getHTML` | getHTML | ../packages/components/editor/src/utils.ts | | - -# `../packages/components/form/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------------------------ | -| `js` | `*` | * | | ./src/error.js | -| `js` | `*` | * | | ./src/form-control-mixin.js | -| `js` | `*` | * | | ./src/form-field.js | -| `js` | `*` | * | | ./src/form.js | -| `js` | `*` | * | | ./src/hint.js | -| `js` | `*` | * | | ./src/label.js | -| `js` | `*` | * | | ./src/update-validity-event.js | -| `js` | `*` | * | | ./src/validate-event.js | - -# `../packages/components/form/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | --------------- | ----------- | ------------------------------------------- | ------- | -| `custom-element-definition` | `sl-error` | Error | /packages/components/form/src/error.js | | -| `custom-element-definition` | `sl-form` | Form | /packages/components/form/src/form.js | | -| `custom-element-definition` | `sl-form-field` | FormField | /packages/components/form/src/form-field.js | | -| `custom-element-definition` | `sl-hint` | Hint | /packages/components/form/src/hint.js | | -| `custom-element-definition` | `sl-label` | Label | /packages/components/form/src/label.js | | - -# `../packages/components/form/src/error.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/form/src/error.scss.ts | | - -# `../packages/components/form/src/error.ts`: - -## class: `Error`, `sl-error` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `noIcon` | | `boolean \| undefined` | | Whether the icon should be hidden. This can be useful when the form control already shows an icon inside the component itself. | | -| `size` | | `ErrorSize` | `'md'` | The size at which the error is displayed. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------ | -------------- | -| `no-icon` | noIcon | | -| `size` | size | | - -### Slots - -| Name | Description | -| ------------ | ----------------------------- | -| `error-text` | The error message to display. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------- | ----------- | ---------------------------------------- | ------- | -| `js` | `Error` | Error | ../packages/components/form/src/error.ts | | - -# `../packages/components/form/src/form-control-mixin.ts`: - -## mixin: `FormControlMixin` - -### Parameters - -| Name | Type | Default | Description | -| ------------- | ---- | ------- | ----------- | -| `constructor` | `T` | | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | | -| `formValue` | | `unknown` | | The value used when submitting the form. | | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | | -| `name` | | `string \| undefined` | | The name of the form control. | | -| `nativeFormValue` | | `FormValue` | | | | -| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | | -| `value` | | `unknown \| undefined` | | The value for this form control. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | -------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | | - -### Events - -| Name | Type | Description | Inherited From | -| ---- | --------------- | ----------- | -------------- | -| | `ValidateEvent` | | | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | -------------- | -| `custom-validity` | customValidity | | -| `name` | name | | -| `show-validity` | showValidity | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ----------------------------------------------------- | ------- | -| `js` | `FormControlMixin` | FormControlMixin | ../packages/components/form/src/form-control-mixin.ts | | - -# `../packages/components/form/src/form-field.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/form/src/form-field.scss.ts | | - -# `../packages/components/form/src/form-field.ts`: - -## class: `FormField`, `sl-form-field` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ---------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | -------------- | -| `control` | | `HTMLElement & FormControl \| undefined` | | The form control element. | | -| `hint` | | `string \| undefined` | | A hint that will be shown when there are no validation messages. You can also slot an `` element. | | -| `label` | | `string \| undefined` | | The text for the label. You can also slot an `` element. | | -| `mark` | | `LabelMark \| undefined` | | How to mark this field depending if it is required or not. | | - -### Events - -| Name | Type | Description | Inherited From | -| ---------------- | -------------------- | ---------------------------------------- | -------------- | -| `formFieldEvent` | `EventEmitter` | Emits when the field is added to a form. | | - -### Attributes - -| Name | Field | Inherited From | -| ------- | ----- | -------------- | -| `hint` | hint | | -| `label` | label | | -| `mark` | mark | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------- | ----------- | --------------------------------------------- | ------- | -| `js` | `FormField` | FormField | ../packages/components/form/src/form-field.ts | | - -# `../packages/components/form/src/form.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/form/src/form.scss.ts | | - -# `../packages/components/form/src/form.ts`: - -## class: `Form`, `sl-form` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | ------------- | ------- | ----------------------- | -------------- | -| `fields` | | `FormField[]` | `[]` | The fields in the form. | | -| `showValidity` | | `boolean` | | | | -| `valid` | | `boolean` | | | | -| `value` | | `T` | | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------- | ------- | ----------- | ---------- | --------- | -------------- | -| `reportValidity` | | | | `boolean` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Form` | Form | ../packages/components/form/src/form.ts | | - -# `../packages/components/form/src/hint.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/form/src/hint.scss.ts | | - -# `../packages/components/form/src/hint.ts`: - -## class: `Hint`, `sl-hint` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------ | ------- | ---------- | ------- | ---------------------------------------- | -------------- | -| `size` | | `HintSize` | `'md'` | The size at which the hint is displayed. | | - -### Attributes - -| Name | Field | Inherited From | -| ------ | ----- | -------------- | -| `size` | size | | - -### Slots - -| Name | Description | -| ----------- | -------------------- | -| `hint-text` | The hint to display. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Hint` | Hint | ../packages/components/form/src/hint.ts | | - -# `../packages/components/form/src/label.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/form/src/label.scss.ts | | - -# `../packages/components/form/src/label.ts`: - -## class: `Label`, `sl-label` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ------------------------ | ------- | --------------------------------------------------------------------------------- | -------------- | -| `disabled` | | `boolean` | `false` | Whether the form control is disabled; when set no interaction is possible. | | -| `for` | | `string \| undefined` | | The DOM id of the form control this is linked to. | | -| `mark` | | `LabelMark \| undefined` | | Indicates whether the label should indicate if the field is optional or required. | | -| `size` | | `LabelSize` | `'md'` | The size of the label. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `disabled` | disabled | | -| `for` | for | | -| `mark` | mark | | -| `size` | size | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------- | ----------- | ---------------------------------------- | ------- | -| `js` | `Label` | Label | ../packages/components/form/src/label.ts | | - -# `../packages/components/form/src/update-validity-event.ts`: - -## class: `UpdateValidityEvent` - -### Superclass - -| Name | Module | Package | -| ------- | -------------------------------------------------------- | ------- | -| `Event` | ../packages/components/form/src/update-validity-event.ts | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | ---- | ------- | ------------------------------------------------- | -------------- | -| `showValidity` | | | | What kind of validity should be shown to the user | | -| `valid` | | | | The validity state of the element | | -| `validationMessage` | | | | The validation message of the element | | - -### Events - -| Name | Type | Description | Inherited From | -| -------------------- | ---- | ----------- | -------------- | -| `sl-update-validity` | | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------------- | ------------------- | -------------------------------------------------------- | ------- | -| `js` | `UpdateValidityEvent` | UpdateValidityEvent | ../packages/components/form/src/update-validity-event.ts | | - -# `../packages/components/form/src/validate-event.ts`: - -## class: `ValidateEvent` - -### Superclass - -| Name | Module | Package | -| ------- | ------------------------------------------------- | ------- | -| `Event` | ../packages/components/form/src/validate-event.ts | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ---- | ----------- | -------------- | -| `sl-validate` | | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | ------------------------------------------------- | ------- | -| `js` | `ValidateEvent` | ValidateEvent | ../packages/components/form/src/validate-event.ts | | - -# `../packages/components/grid/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------------------- | -| `js` | `*` | * | | ./src/column.js | -| `js` | `*` | * | | ./src/column-group.js | -| `js` | `*` | * | | ./src/drag-handle-column.js | -| `js` | `*` | * | | ./src/events.js | -| `js` | `*` | * | | ./src/filter-column.js | -| `js` | `*` | * | | ./src/grid.js | -| `js` | `*` | * | | ./src/select-column.js | -| `js` | `*` | * | | ./src/selection-column.js | -| `js` | `*` | * | | ./src/sort-column.js | -| `js` | `*` | * | | ./src/text-field-column.js | - -# `../packages/components/grid/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ---------------------------- | -------------------- | --------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-grid` | Grid | /packages/components/grid/src/grid.js | | -| `custom-element-definition` | `sl-grid-column` | GridColumn | /packages/components/grid/src/column.js | | -| `custom-element-definition` | `sl-grid-column-group` | GridColumnGroup | /packages/components/grid/src/column-group.js | | -| `custom-element-definition` | `sl-grid-drag-handle-column` | GridDragHandleColumn | /packages/components/grid/src/drag-handle-column.js | | -| `custom-element-definition` | `sl-grid-filter-column` | GridFilterColumn | /packages/components/grid/src/filter-column.js | | -| `custom-element-definition` | `sl-grid-select-column` | GridSelectColumn | /packages/components/grid/src/select-column.js | | -| `custom-element-definition` | `sl-grid-selection-column` | GridSelectionColumn | /packages/components/grid/src/selection-column.js | | -| `custom-element-definition` | `sl-grid-sort-column` | GridSortColumn | /packages/components/grid/src/sort-column.js | | -| `custom-element-definition` | `sl-grid-text-field-column` | GridTextFieldColumn | /packages/components/grid/src/text-field-column.js | | - -# `../packages/components/grid/src/column-group.ts`: - -## class: `GridColumnGroup`, `sl-grid-column-group` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `columns` | | `Array>` | `[]` | The nested columns in the group. | | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | The width of the group column is either manually specified, or the sum of the nested columns. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ----------------------------------------------- | ------- | -| `js` | `GridColumnGroup` | GridColumnGroup | ../packages/components/grid/src/column-group.ts | | - -# `../packages/components/grid/src/column.ts`: - -## class: `GridColumn`, `sl-grid-column` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | | -| `path` | | `string \| undefined` | | The path to the value for this column. | | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | | -| `renderData` | | | `item: T` | `TemplateResult` | | -| `renderHeader` | | | | `TemplateResult` | | -| `renderStyles` | | | | `CSSResult \| void` | | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `align` | align | | -| `auto-width` | autoWidth | | -| `grow` | grow | | -| `header` | header | | -| `path` | path | | -| `parts` | parts | | -| `sticky` | sticky | | -| `width` | width | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ----------------------------------------- | ------- | -| `js` | `GridColumn` | GridColumn | ../packages/components/grid/src/column.ts | | - -# `../packages/components/grid/src/drag-handle-column.ts`: - -## class: `GridDragHandleColumn`, `sl-grid-drag-handle-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------------------- | -------------------- | ----------------------------------------------------- | ------- | -| `js` | `GridDragHandleColumn` | GridDragHandleColumn | ../packages/components/grid/src/drag-handle-column.ts | | - -# `../packages/components/grid/src/events.ts`: - -## class: `GridActiveItemChangeEvent` - -### Superclass - -| Name | Module | Package | -| ----------- | ----------------------------------------- | ------- | -| `GridEvent` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridColumnEvent` - -### Superclass - -| Name | Module | Package | -| ----------- | ----------------------------------------- | ------- | -| `GridEvent` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridEvent` - -### Superclass - -| Name | Module | Package | -| ------- | ----------------------------------------- | ------- | -| `Event` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridFilterValueChangeEvent` - -### Superclass - -| Name | Module | Package | -| ----------------- | ----------------------------------------- | ------- | -| `GridColumnEvent` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridItemDropEvent` - -### Superclass - -| Name | Module | Package | -| --------------- | ----------------------------------------- | ------- | -| `GridItemEvent` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridItemEvent` - -### Superclass - -| Name | Module | Package | -| ----------- | ----------------------------------------- | ------- | -| `GridEvent` | ../packages/components/grid/src/events.ts | | - -
- -## class: `GridSortDirectionChangeEvent` - -### Superclass - -| Name | Module | Package | -| ----------------- | ----------------------------------------- | ------- | -| `GridColumnEvent` | ../packages/components/grid/src/events.ts | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------------------ | ---------------------------- | ----------------------------------------- | ------- | -| `js` | `GridEvent` | GridEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridItemEvent` | GridItemEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridItemDropEvent` | GridItemDropEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridActiveItemChangeEvent` | GridActiveItemChangeEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridColumnEvent` | GridColumnEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridFilterValueChangeEvent` | GridFilterValueChangeEvent | ../packages/components/grid/src/events.ts | | -| `js` | `GridSortDirectionChangeEvent` | GridSortDirectionChangeEvent | ../packages/components/grid/src/events.ts | | - -# `../packages/components/grid/src/filter-column.ts`: - -## class: `GridFilterColumn`, `sl-grid-filter-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `filter` | | `DataSourceFilterFunction \| undefined` | | The filter function if you want to do custom filtering. | | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `internalOptions` | | `GridFilterOption[] \| undefined` | | The internal options if none are provided. | | -| `mode` | | `select \| text` | | The mode for the filter: \- `select`: The filter will allow you to select from a list of options. If none are provided, the filter will create a list of options based on the column's values \- `text`: The filter will be a text field. | | -| `options` | | `GridFilterOption[] \| undefined` | | The options you can choose from to filter. If not provided, the filter will be a text field. | | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `value` | | `string \| string[] \| undefined` | | The value for this filter column. | | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `mode` | mode | | -| `value` | value | | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ------------------------------------------------ | ------- | -| `js` | `GridFilterColumn` | GridFilterColumn | ../packages/components/grid/src/filter-column.ts | | - -# `../packages/components/grid/src/filter.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/grid/src/filter.scss.ts | | - -# `../packages/components/grid/src/filter.ts`: - -## class: `GridFilter` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ------------------------------------------ | ------- | ----------------------------------- | -------------- | -| `column` | | `GridColumn` | | The grid column. | | -| `filter` | | `DataSourceFilterFunction \| undefined` | | The custom filter | | -| `mode` | | `GridFilterMode \| undefined` | | The mode of the filter. | | -| `options` | | `GridFilterOption[] \| undefined` | | The filter options. | | -| `path` | | `string \| undefined` | | The path to the field to filter on. | | -| `value` | | `string \| string[] \| undefined` | | | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------------- | --------------------------------------------- | ---------------------------------------------------- | -------------- | -| `filterChange` | `EventEmitter` | Emits when the filter has been added or removed. | | -| `filterValueChange` | `EventEmitter>` | Emits when the value of the this filter has changed. | | - -### Attributes - -| Name | Field | Inherited From | -| ------- | ----- | -------------- | -| `mode` | mode | | -| `path` | path | | -| `value` | value | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ----------------------------------------- | ------- | -| `js` | `GridFilter` | GridFilter | ../packages/components/grid/src/filter.ts | | - -# `../packages/components/grid/src/grid.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/grid/src/grid.scss.ts | | - -# `../packages/components/grid/src/grid.ts`: - -## class: `Grid`, `sl-grid` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | -------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | -| `activeItem` | | `T \| undefined` | | The active item in the grid. | | -| `dataSource` | | `DataSource \| undefined` | | Provide your own implementation for getting the data. | | -| `draggableRows` | | `GridDraggableRows \| undefined` | | Whether you can drag rows in the grid. If you use the drag-handle column, then this property is automatically set by the column to 'between'. | | -| `dropFilter` | | `GridDropFilter \| undefined` | | Determines if or what kind of drop target the given item is: \- boolean: the item is valid drop target based on the draggableRows value \- 'between': the item is a valid drop target between \- 'on-top': the item is a valid drop target to drop on top of | | -| `itemParts` | | `GridItemParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | | -| `items` | | `T[] \| undefined` | | An array of items to be displayed in the grid. | | -| `itemsGroupBy` | | `string \| undefined` | | The path to the attribute to group the items on. | | -| `model` | | | `new GridViewModel(this)` | The model used for rendering the grid. | | -| `noBorder` | | `boolean \| undefined` | | Hide the border around the grid when true. | | -| `noRowBorder` | | `boolean \| undefined` | | Hides the border between rows when true. | | -| `selection` | | | `new SelectionController(this)` | Selection manager. | | -| `striped` | | `boolean \| undefined` | | Uses alternating background colors for the rows when set. | | -| `tbody` | | `HTMLTableSectionElement` | | The `` element. | | -| `thead` | | `HTMLTableSectionElement` | | The `` element. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------- | ------- | ------------------------------------------------------------------------ | --------------------------- | ---------------- | -------------- | -| `recalculateColumnWidths` | | Updates the `width` of all columns which have `autoWidth` set to `true`. | | `Promise` | | -| `renderGroupRow` | | | `group: GridViewModelGroup` | `TemplateResult` | | -| `renderHeader` | | | | `TemplateResult` | | -| `renderItem` | | | `item: T, index: number` | `TemplateResult` | | -| `renderItemRow` | | | `item: T, index: number` | `TemplateResult` | | -| `renderStyles` | | | | `TemplateResult` | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------------ | -------------------------------------------- | ---------------------------------------------- | -------------- | -| `activeItemChange` | `EventEmitter>` | Emits when the active item changes | | -| `gridDragstart` | `EventEmitter>` | Emits when a drag operation is starting. | | -| `gridDragend` | `EventEmitter>` | Emits when a drag operation has finished. | | -| `gridDrop` | `EventEmitter>` | Emits when an item has been dropped. | | -| `gridItemsChange` | `EventEmitter>` | Emits when the items in the grid have changed. | | -| `gridStateChange` | `EventEmitter>` | Emits when the state in the grid has changed. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------------- | ------------- | -------------- | -| `draggable-rows` | draggableRows | | -| `items` | items | | -| `items-group-by` | itemsGroupBy | | -| `no-border` | noBorder | | -| `no-row-border` | noRowBorder | | -| `striped` | striped | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Grid` | Grid | ../packages/components/grid/src/grid.ts | | - -# `../packages/components/grid/src/group-header.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/grid/src/group-header.scss.ts | | - -# `../packages/components/grid/src/group-header.ts`: - -## class: `GridGroupHeader` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------ | ------- | --------------------------- | -------- | ------------------------------------------- | -------------- | -| `expanded` | | `boolean \| undefined` | | Whether the group is expanded or collapsed. | | -| `heading` | | `string \| undefined` | | The group heading. | | -| `selectable` | | `boolean \| undefined` | | Wether you can select the entire group. | | -| `selected` | | `'all' \| 'some' \| 'none'` | `'none'` | Whether the group is selected. | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ----------------------- | ------------------------------------------------ | -------------- | -| `selectEvent` | `EventEmitter` | Emits when the user changes the group selection. | | -| `toggleEvent` | `EventEmitter` | Emits when the user collapses/expands the group. | | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | ---------- | -------------- | -| `expanded` | expanded | | -| `heading` | heading | | -| `selectable` | selectable | | -| `selected` | selected | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ----------------------------------------------- | ------- | -| `js` | `GridGroupHeader` | GridGroupHeader | ../packages/components/grid/src/group-header.ts | | - -# `../packages/components/grid/src/select-column.ts`: - -## class: `GridSelectColumn`, `sl-grid-select-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `options` | | `Array<{ label: string; value: unknown }> \| string[] \| undefined` | | The options for the select. | | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `options` | options | | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ------------------------------------------------ | ------- | -| `js` | `GridSelectColumn` | GridSelectColumn | ../packages/components/grid/src/select-column.ts | | - -# `../packages/components/grid/src/selection-column.ts`: - -## class: `GridSelectionColumn`, `sl-grid-selection-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoSelect` | | `boolean \| undefined` | | When true, the active rows get selected automatically. | | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `selectAll` | | `boolean \| undefined` | | When true, all items are selected. | | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `getSelectedCount` | | | | `number` | | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderSelectionHeader` | | | | `TemplateResult` | | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------- | ---------- | -------------- | -| `auto-select` | autoSelect | | -| `select-all` | selectAll | | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------------- | ------------------- | --------------------------------------------------- | ------- | -| `js` | `GridSelectionColumn` | GridSelectionColumn | ../packages/components/grid/src/selection-column.ts | | - -# `../packages/components/grid/src/sort-column.ts`: - -## class: `GridSortColumn`, `sl-grid-sort-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `direction` | | `DataSourceSortDirection \| undefined` | | The direction this columns should be sorted in. | | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sorter` | | `DataSourceSortFunction \| undefined` | | If you want to provide a custom sort function, you can via this property. | | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `direction` | direction | | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------------- | -------------- | ---------------------------------------------- | ------- | -| `js` | `GridSortColumn` | GridSortColumn | ../packages/components/grid/src/sort-column.ts | | - -# `../packages/components/grid/src/sorter.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/grid/src/sorter.scss.ts | | - -# `../packages/components/grid/src/sorter.ts`: - -## class: `GridSorter` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------- | ------- | ---------------------------------------- | ------- | ----------------------------------------- | -------------- | -| `column` | | `GridColumn` | | The grid column. | | -| `direction` | | `DataSourceSortDirection \| undefined` | | The direction in which to sort the items. | | -| `path` | | `string \| undefined` | | The path to the field to sort on. | | -| `sorter` | | `DataSourceSortFunction \| undefined` | | An optional custom sort function. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------- | ------- | ----------- | ---------- | ------ | -------------- | -| `reset` | | | | `void` | | - -### Events - -| Name | Type | Description | Inherited From | -| --------------------- | ----------------------------------------------- | ------------------------------------------------ | -------------- | -| `sorterChange` | `EventEmitter` | Emits when the sorter has been added or removed. | | -| `sortDirectionChange` | `EventEmitter>` | Emits when the direction has changed. | | - -### Attributes - -| Name | Field | Inherited From | -| ----------- | --------- | -------------- | -| `direction` | direction | | -| `path` | path | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ----------------------------------------- | ------- | -| `js` | `GridSorter` | GridSorter | ../packages/components/grid/src/sorter.ts | | - -# `../packages/components/grid/src/text-field-column.ts`: - -## class: `GridTextFieldColumn`, `sl-grid-text-field-column` - -### Superclass - -| Name | Module | Package | -| ------------ | --------------------------------------- | ------- | -| `GridColumn` | /packages/components/grid/src/column.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `align` | | `GridColumnAlignment` | `'start'` | The alignment of the content within the column. | GridColumn | -| `autoWidth` | | `boolean \| undefined` | | Automatically sets the width of the column based on the column contents when this is set to `true`. For performance reasons the column width is calculated automatically only once when the grid items are rendered for the first time and the calculation only considers the rows which are currently rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell content changes, the column width might not match the contents anymore. Hidden columns are ignored in the calculation and their widths are not automatically updated when you show a column that was initially hidden. You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`. The column width may still grow larger when `grow` is not 0. | GridColumn | -| `grid` | | `Grid \| undefined` | | The parent grid instance. | GridColumn | -| `grow` | | `number` | `1` | The ratio with which the column will grow relative to the other columns. A ratio of 0 means the column width is fixed. | GridColumn | -| `header` | | `string \| GridColumnHeaderRenderer \| undefined` | | The label for the column header. | GridColumn | -| `parts` | | `string \| GridColumnParts \| undefined` | | Custom parts to be set on the `` so it can be styled externally. | GridColumn | -| `path` | | `string \| undefined` | | The path to the value for this column. | GridColumn | -| `renderer` | | `GridColumnDataRenderer \| undefined` | | Renderer function for the column value of each cell. | GridColumn | -| `scopedElements` | | `Record \| undefined` | | The custom elements used for rendering this column. Since the rendering the column cells is done in the parent grid component, the custom elements need to be registered in the parent grid. | GridColumn | -| `sticky` | | `boolean \| undefined` | | Whether this column is sticky when the user scrolls horizontally. | GridColumn | -| `width` | | `number \| undefined` | | Width of the cells for this column in pixels. | GridColumn | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------------------- | -------------- | -| `getParts` | | | `item: T` | `string[]` | GridColumn | -| `itemsChanged` | | This method is called when the contents of the grid has changed. This happens when the items property is directly set or when the data source has changed. | | `void` | GridColumn | -| `renderData` | | | `item: T` | `TemplateResult` | GridColumn | -| `renderHeader` | | | | `TemplateResult` | GridColumn | -| `renderStyles` | | | | `CSSResult \| void` | GridColumn | -| `stateChanged` | | This method is called when the state of the grid has changed. This happens for examples when a filter or sorting changes. | | `void` | GridColumn | - -### Events - -| Name | Type | Description | Inherited From | -| -------------- | ---------------------------------- | --------------------------------------------- | -------------- | -| `columnUpdate` | `EventEmitter>` | Emits when the column definition has changed. | GridColumn | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | --------- | -------------- | -| `align` | align | GridColumn | -| `auto-width` | autoWidth | GridColumn | -| `grow` | grow | GridColumn | -| `header` | header | GridColumn | -| `path` | path | GridColumn | -| `parts` | parts | GridColumn | -| `sticky` | sticky | GridColumn | -| `width` | width | GridColumn | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------------- | ------------------- | ---------------------------------------------------- | ------- | -| `js` | `GridTextFieldColumn` | GridTextFieldColumn | ../packages/components/grid/src/text-field-column.ts | | - -# `../packages/components/grid/src/view-model.ts`: - -## class: `GridViewModel` - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------- | -------------- | -| `columnDefinitions` | | `Array>` | | Sets the available columns. Not all columns may be rendered, depending on the view state. | | -| `columns` | | `Array>` | | Returns an array of visible columns. | | -| `dataSource` | | `DataSource \| undefined` | | | | -| `groups` | | `string[]` | | | | -| `headerRows` | | `Array>>` | | | | -| `rows` | | `T[]` | | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------------- | ------- | ---------------------------------------------------------------- | ---------------------------------- | --------------------------- | -------------- | -| `getGroupSelection` | | Returns the selected state of the group. | `value: string` | `'all' \| 'some' \| 'none'` | | -| `getGroupState` | | Returns true if the group is expanded, false if collapsed. | `value: string` | `boolean` | | -| `getStickyColumnOffset` | | Returns the left offset, taking any sticky columns into account. | `index: number` | `number` | | -| `toggleColumn` | | Toggle the visibility of the column. | `id: string, visible: boolean` | `void` | | -| `toggleGroup` | | Toggle the visibility of the group. | `value: string, collapse: boolean` | `void` | | - -
- -## class: `GridViewModelGroup` - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------------- | ------------------ | --------------------------------------------- | ------- | -| `js` | `GridViewModelGroup` | GridViewModelGroup | ../packages/components/grid/src/view-model.ts | | -| `js` | `GridViewModel` | GridViewModel | ../packages/components/grid/src/view-model.ts | | - -# `../packages/components/icon/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/icon.js | -| `js` | `*` | * | | ./src/models.js | - -# `../packages/components/icon/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | --------- | ----------- | ------------------------------------- | ------- | -| `custom-element-definition` | `sl-icon` | Icon | /packages/components/icon/src/icon.js | | - -# `../packages/components/icon/src/icon.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/icon/src/icon.scss.ts | | - -# `../packages/components/icon/src/icon.ts`: - -## class: `Icon`, `sl-icon` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Static Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------ | -------------- | -| `register` | | Add icon(s) to the icon registry | `icons: IconDefinition \| IconDefinition[]` | `void` | | -| `register` | | Store all icons from the IconLibrary of the theme (icons.json) in the icon registry for easy access. Is run in the setup method of each theme. | `icons: IconLibrary` | `void` | | -| `register` | | | `icon: IconDefinition \| IconLibrary, icons: IconDefinition[]` | `void` | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------- | ------- | ----------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `label` | | `string \| undefined` | | The label of the icon; Describes the icon for assistive devices. If not present, the icon is considered to be purely presentational. | | -| `name` | | `string \| undefined` | | The name of the icon; either the name from Font Awesome or the name of the custom icon in Figma. | | -| `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` | | The size of the icon. | | - -### Attributes - -| Name | Field | Inherited From | -| ------- | ----- | -------------- | -| `label` | label | | -| `name` | name | | -| `size` | size | | - -### CSS Properties - -| Name | Default | Description | -| -------------------------- | ------- | ---------------------------------------------- | -| `--sl-icon-container-size` | | The size of the icon container, defaults to md | -| `--sl-icon-fill-accent` | | Accent color, only used for multicolor icons | -| `--sl-icon-fill-default` | | Default fill color | -| `--sl-icon-size` | | The size of the svg element, defaults to md | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Icon` | Icon | ../packages/components/icon/src/icon.ts | | - -# `../packages/components/inline-message/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------------- | -| `js` | `*` | * | | ./src/inline-message.js | - -# `../packages/components/inline-message/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------------- | ------------- | --------------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-inline-message` | InlineMessage | /packages/components/inline-message/src/inline-message.js | | - -# `../packages/components/inline-message/src/inline-message.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/inline-message/src/inline-message.scss.ts | | - -# `../packages/components/inline-message/src/inline-message.ts`: - -## class: `InlineMessage`, `sl-inline-message` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------- | ------- | ---------------------------------------------- | -------- | -------------------------------------------------------------------------------------- | -------------- | -| `dismissible` | | `boolean` | `true` | Determines whether a (default) closing button should be shown in the top right corner. | | -| `noIcon` | | `boolean \| undefined` | | Determines whether the icon should be shown on the left side of the component. | | -| `variant` | | `'info' \| 'success' \| 'warning' \| 'danger'` | `'info'` | The variant of the inline message. | | - -### Attributes - -| Name | Field | Inherited From | -| ------------- | ----------- | -------------- | -| `dismissible` | dismissible | | -| `no-icon` | noIcon | | -| `variant` | variant | | - -### Slots - -| Name | Description | -| -------------- | --------------------------------------------------------------- | -| `default` | slot for the main information of the inline-message | -| `title` | title content for the inline message | -| `details` | slot for more details of the inline-message like list of errors | -| `icon` | icon shown on the left side of the component | -| `close-button` | Closing button for the inline message | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | ----------------------------------------------------------- | ------- | -| `js` | `InlineMessage` | InlineMessage | ../packages/components/inline-message/src/inline-message.ts | | - -# `../packages/components/menu/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------------------ | -| `js` | `*` | * | | ./src/menu.js | -| `js` | `*` | * | | ./src/menu-button.js | -| `js` | `*` | * | | ./src/menu-item.js | -| `js` | `*` | * | | ./src/menu-item-group.js | - -# `../packages/components/menu/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | -------------------- | ------------- | ------------------------------------------------ | ------- | -| `custom-element-definition` | `sl-menu` | Menu | /packages/components/menu/src/menu.js | | -| `custom-element-definition` | `sl-menu-button` | MenuButton | /packages/components/menu/src/menu-button.js | | -| `custom-element-definition` | `sl-menu-item` | MenuItem | /packages/components/menu/src/menu-item.js | | -| `custom-element-definition` | `sl-menu-item-group` | MenuItemGroup | /packages/components/menu/src/menu-item-group.js | | - -# `../packages/components/menu/src/menu-button.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/menu/src/menu-button.scss.ts | | - -# `../packages/components/menu/src/menu-button.ts`: - -## class: `MenuButton`, `sl-menu-button` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------- | ------- | ---------------------------------------- | ----------- | ---------------------------------------------------------------------- | -------------- | -| `button` | | `Button` | | The button. | | -| `disabled` | | `boolean \| undefined` | | Whether the button is disabled; when set no interaction is possible. | | -| `fill` | | `ButtonFill` | `'outline'` | The fill of the button. | | -| `menu` | | `Menu` | | The menu. | | -| `pluralize` | | `(count: number) => string \| undefined` | | Returns the string to be used when there is more than 1 item selected. | | -| `position` | | `PopoverPosition \| undefined` | | The position of the menu relative to the button. | | -| `selected` | | `string \| undefined` | | The text representing the selected menuitem(s). | | -| `selects` | | `'single' \| 'multiple' \| undefined` | | Determines whether if and how many menu items can be selected. | | -| `size` | | `ButtonSize` | `'md'` | The size of the button. | | -| `variant` | | `ButtonVariant` | `'default'` | The variant of the button. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `disabled` | disabled | | -| `fill` | fill | | -| `position` | position | | -| `selects` | selects | | -| `size` | size | | -| `variant` | variant | | - -### Slots - -| Name | Description | -| --------- | ----------------------------------------------------- | -| `default` | The menu items should be slotted in the default slot. | -| `button` | Any content for the button should be slotted here. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ---------------------------------------------- | ------- | -| `js` | `MenuButton` | MenuButton | ../packages/components/menu/src/menu-button.ts | | - -# `../packages/components/menu/src/menu-item-group.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/menu/src/menu-item-group.scss.ts | | - -# `../packages/components/menu/src/menu-item-group.ts`: - -## class: `MenuItemGroup`, `sl-menu-item-group` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ------------------------------------- | ------- | -------------------------------------------------------------- | -------------- | -| `heading` | | `string \| undefined` | | The optional heading for the group. | | -| `selects` | | `'single' \| 'multiple' \| undefined` | | Determines whether if and how many menu items can be selected. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `heading` | heading | | -| `selects` | selects | | - -### Slots - -| Name | Description | -| --------- | ------------------------ | -| `default` | The menu items. | -| `header` | The header of the group. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | -------------------------------------------------- | ------- | -| `js` | `MenuItemGroup` | MenuItemGroup | ../packages/components/menu/src/menu-item-group.ts | | - -# `../packages/components/menu/src/menu-item.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/menu/src/menu-item.scss.ts | | - -# `../packages/components/menu/src/menu-item.ts`: - -## class: `MenuItem`, `sl-menu-item` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | -------- | ------- | --------------------------------------------------- | -------------- | -| `submenuOffset` | | `number` | `0` | The default offset of the submenu to the menu item. | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------ | ------- | ---------------------- | ------- | ------------------------------------------------ | -------------- | -| `disabled` | | `boolean \| undefined` | | Whether this menu item is disabled. | | -| `selectable` | | `boolean \| undefined` | | Whether this menu item can be selected. | | -| `selected` | | `boolean \| undefined` | | Whether this menu item has been selected. | | -| `shortcut` | | `string \| undefined` | | Keyboard shortcut for activating this menu item. | | -| `submenu` | | `Menu \| undefined` | | The sub menu, if present. | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ----------------------- | ----------------------------------------------- | -------------- | -| `selectEvent` | `EventEmitter` | Emits when the user toggles the selected state. | | - -### Attributes - -| Name | Field | Inherited From | -| ------------ | ---------- | -------------- | -| `disabled` | disabled | | -| `selected` | selected | | -| `selectable` | selectable | | -| `shortcut` | shortcut | | - -### Slots - -| Name | Description | -| --------- | ------------------------------------------------------------------ | -| `default` | Content to display inside the menu item. | -| `submenu` | The menu items that will be displayed when the menu item is shown. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | -------------------------------------------- | ------- | -| `js` | `MenuItem` | MenuItem | ../packages/components/menu/src/menu-item.ts | | - -# `../packages/components/menu/src/menu.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/menu/src/menu.scss.ts | | - -# `../packages/components/menu/src/menu.ts`: - -## class: `Menu`, `sl-menu` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------- | ------- | ----------------------------------------------------- | -------------- | -| `offset` | | `number` | `4` | The default offset of the menu to its anchor. | | -| `viewportMargin` | | `number` | `8` | The default margin between the menu and the viewport. | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------------- | ------- | ------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | -| `offset` | | `number \| undefined` | | The offset of the menu to its anchor. This is a property on this instance so that it can be overridden by the menu item in case of a nested menu. You should not need to set this property yourself. | | -| `position` | | `PopoverPosition \| undefined` | `'right-start'` | The position of the menu relative to its anchor. | | -| `selectableChildren` | | `boolean \| undefined` | | Whether this menu has any children that can be selected. | | -| `selects` | | `'single' \| 'multiple' \| undefined` | | Determines whether if and how many menu items can be selected. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------------- | ------- | ----------- | ---------- | ------ | -------------- | -| `focusLastItem` | | | | `void` | | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | -------------------- | ------------------------------------------- | -------------- | -| `selectEvent` | `EventEmitter` | Emits when the menu item selection changes. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `offset` | offset | | -| `position` | position | | -| `selects` | selects | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------ | ----------- | --------------------------------------- | ------- | -| `js` | `Menu` | Menu | ../packages/components/menu/src/menu.ts | | - -# `../packages/components/message-dialog/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------------- | -| `js` | `*` | * | | ./src/message-dialog.js | - -# `../packages/components/message-dialog/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------------- | ------------- | --------------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-message-dialog` | MessageDialog | /packages/components/message-dialog/src/message-dialog.js | | - -# `../packages/components/message-dialog/src/message-dialog.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/message-dialog/src/message-dialog.scss.ts | | - -# `../packages/components/message-dialog/src/message-dialog.ts`: - -## class: `MessageDialog`, `sl-message-dialog` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Static Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------- | ------- | ----------- | -------------------------------- | ------------------------------- | -------------- | -| `alert` | | | `message: string, title` | `Promise` | | -| `confirm` | | | `message: string, title` | `Promise` | | -| `show` | | | `config: MessageDialogConfig` | `Promise` | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------- | ------- | ------------------------------------- | ------- | ----------- | -------------- | -| `config` | | `MessageDialogConfig \| undefined` | | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------- | ------- | ----------- | ---------- | ------ | -------------- | -| `close` | | | | `void` | | -| `showModal` | | | | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------- | ------------- | ----------------------------------------------------------- | ------- | -| `js` | `MessageDialog` | MessageDialog | ../packages/components/message-dialog/src/message-dialog.ts | | - -# `../packages/components/popover/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ---------------- | -| `js` | `*` | * | | ./src/popover.js | - -# `../packages/components/popover/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | -| `custom-element-definition` | `sl-popover` | Popover | /packages/components/popover/src/popover.js | | - -# `../packages/components/popover/src/popover.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/popover/src/popover.scss.ts | | - -# `../packages/components/popover/src/popover.ts`: - -## class: `Popover`, `sl-popover` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------- | ------- | -------------------------------------------------------- | -------------- | -| `arrowPadding` | | `number` | `16` | The default padding of the arrow. | | -| `offset` | | `number` | `12` | The default offset of the popover to its anchor. | | -| `viewportMargin` | | `number` | `8` | The default margin between the tooltip and the viewport. | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ----------------------------------------------- | -------------- | -| `position` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end'` | `'bottom'` | The position of popover relative to its anchor. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `position` | position | | - -### CSS Parts - -| Name | Description | -| ----------- | ----------------------------- | -| `container` | The container for the popover | - -### Slots - -| Name | Description | -| --------- | ---------------------------- | -| `default` | Body content for the popover | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `Popover` | Popover | ../packages/components/popover/src/popover.ts | | - -# `../packages/components/radio-group/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | -------------------- | -| `js` | `*` | * | | ./src/radio.js | -| `js` | `*` | * | | ./src/radio-group.js | - -# `../packages/components/radio-group/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ---------------- | ----------- | --------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-radio` | Radio | /packages/components/radio-group/src/radio.js | | -| `custom-element-definition` | `sl-radio-group` | RadioGroup | /packages/components/radio-group/src/radio-group.js | | - -# `../packages/components/radio-group/src/radio-group.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/radio-group/src/radio-group.scss.ts | | - -# `../packages/components/radio-group/src/radio-group.ts`: - -## class: `RadioGroup`, `sl-radio-group` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| ------------------ | ------ | ---------------------- | -| `FormControlMixin` | | @sl-design-system/form | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the group is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `horizontal` | | `boolean \| undefined` | | The orientation of the radio options; when true, the radio buttons are displayed next to each other instead of below each other. | | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `required` | | `boolean \| undefined` | | Whether the user is required to select an option in the group. | | -| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `RadioButtonSize \| undefined` | | The size of the radio buttons in the group. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value for the radio group, to be used in forms. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ------------------------------ | ---------------------------------------- | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the component loses focus. | | -| `changeEvent` | `EventEmitter` | Emits when the value changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component receives focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `disabled` | disabled | | -| `horizontal` | horizontal | | -| `required` | required | | -| `show-valid` | showValid | | -| `size` | size | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### Slots - -| Name | Description | -| --------- | ------------------------------ | -| `default` | A list of `sl-radio` elements. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ----------------------------------------------------- | ------- | -| `js` | `RadioGroup` | RadioGroup | ../packages/components/radio-group/src/radio-group.ts | | - -# `../packages/components/radio-group/src/radio.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/radio-group/src/radio.scss.ts | | - -# `../packages/components/radio-group/src/radio.ts`: - -## class: `Radio`, `sl-radio` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | ------------------------- | ------- | ---------------------------------------------------- | -------------- | -| `checked` | | `boolean \| undefined` | | Whether the radio is checked. | | -| `disabled` | | `boolean \| undefined` | | Whether this radio button is disabled. | | -| `showValidity` | | `FormControlShowValidity` | | Indicates if the radio button shows it is (in)valid. | | -| `size` | | `RadioButtonSize` | `'md'` | The size of the radio button. | | -| `value` | | `T \| undefined` | | The value for this radio button. | | - -### Attributes - -| Name | Field | Inherited From | -| --------------- | ------------ | -------------- | -| `checked` | checked | | -| `disabled` | disabled | | -| `show-validity` | showValidity | | -| `size` | size | | -| `value` | value | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------- | ----------- | ----------------------------------------------- | ------- | -| `js` | `Radio` | Radio | ../packages/components/radio-group/src/radio.ts | | - -# `../packages/components/select/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ---------------------------- | -| `js` | `*` | * | | ./src/select.js | -| `js` | `*` | * | | ./src/select-option.js | -| `js` | `*` | * | | ./src/select-option-group.js | - -# `../packages/components/select/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------------------ | ----------------- | ------------------------------------------------------ | ------- | -| `custom-element-definition` | `sl-select` | Select | /packages/components/select/src/select.js | | -| `custom-element-definition` | `sl-select-option` | SelectOption | /packages/components/select/src/select-option.js | | -| `custom-element-definition` | `sl-select-option-group` | SelectOptionGroup | /packages/components/select/src/select-option-group.js | | - -# `../packages/components/select/src/select-button.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/select/src/select-button.scss.ts | | - -# `../packages/components/select/src/select-button.ts`: - -## class: `SelectButton` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | ----------------------------------- | ------- | ---------------------------------------------------------- | -------------- | -| `disabled` | | `boolean \| undefined` | | Whether the button is disabled. | | -| `placeholder` | | `string \| undefined` | | The placeholder for when there is no selected option.s | | -| `selected` | | `SelectOption \| null \| undefined` | | The selected option. | | -| `showValid` | | `boolean \| undefined` | | Indicates whether the control should indicate it is valid. | | -| `showValidity` | | `FormControlShowValidity` | | Mirrors the same property on the sl-select parent. | | -| `size` | | `SelectSize \| undefined` | `'md'` | The size of the parent select. | | - -### Attributes - -| Name | Field | Inherited From | -| --------------- | ------------ | -------------- | -| `disabled` | disabled | | -| `placeholder` | placeholder | | -| `size` | size | | -| `show-valid` | showValid | | -| `show-validity` | showValidity | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------- | ------------ | -------------------------------------------------- | ------- | -| `js` | `SelectButton` | SelectButton | ../packages/components/select/src/select-button.ts | | - -# `../packages/components/select/src/select-option-group.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/select/src/select-option-group.scss.ts | | - -# `../packages/components/select/src/select-option-group.ts`: - -## class: `SelectOptionGroup`, `sl-select-option-group` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | --------------------- | ------- | -------------------------- | -------------- | -| `heading` | | `string \| undefined` | | The heading for the group. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `heading` | heading | | - -### Slots - -| Name | Description | -| --------- | ----------------------------------- | -| `default` | List of `sl-select-option` elements | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------- | ----------------- | -------------------------------------------------------- | ------- | -| `js` | `SelectOptionGroup` | SelectOptionGroup | ../packages/components/select/src/select-option-group.ts | | - -# `../packages/components/select/src/select-option.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/select/src/select-option.scss.ts | | - -# `../packages/components/select/src/select-option.ts`: - -## class: `SelectOption`, `sl-select-option` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------- | ------- | --------------------------------------------------- | -------------- | -| `disabled` | | `boolean \| undefined` | | Whether the option item is disabled. | | -| `selected` | | `boolean \| undefined` | | Whether the option item is selected. | | -| `value` | | `T \| undefined` | | The value for the option item, to be used in forms. | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `disabled` | disabled | | -| `selected` | selected | | -| `value` | value | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------- | ------------ | -------------------------------------------------- | ------- | -| `js` | `SelectOption` | SelectOption | ../packages/components/select/src/select-option.ts | | - -# `../packages/components/select/src/select.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/select/src/select.scss.ts | | - -# `../packages/components/select/src/select.ts`: - -## class: `Select`, `sl-select` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `FormControlMixin` | | @sl-design-system/form | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------- | ------- | -------------------------------------------------------- | -------------- | -| `offset` | | `number` | `6` | The default offset of the listbox to the button. | | -| `viewportMargin` | | `number` | `8` | The default margin between the tooltip and the viewport. | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `button` | | `SelectButton` | | The button in the light DOM. | | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the select is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `listbox` | | `HTMLElement` | | The listbox element. | | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `placeholder` | | `string \| undefined` | | The placeholder text to show when no option is chosen. | | -| `required` | | `boolean \| undefined` | | Whether the select is a required field. | | -| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `SelectSize` | `'md'` | The size of the select. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value for the select, to be used in forms. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ------------------------------ | ------------------------------------------ | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the focus leaves the component. | | -| `changeEvent` | `EventEmitter` | Emits when the value changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component gains focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `disabled` | disabled | | -| `placeholder` | placeholder | | -| `required` | required | | -| `show-valid` | showValid | | -| `size` | size | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### Slots - -| Name | Description | -| --------- | ------------------------------------- | -| `default` | Place for `sl-select-option` elements | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Select` | Select | ../packages/components/select/src/select.ts | | - -# `../packages/components/shared/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | -------------------------------------- | -| `js` | `*` | * | | ./src/browser.js | -| `js` | `*` | * | | ./src/config.js | -| `js` | `*` | * | | ./src/controllers/anchor.js | -| `js` | `*` | * | | ./src/controllers/events.js | -| `js` | `*` | * | | ./src/controllers/focus-group.js | -| `js` | `*` | * | | ./src/controllers/roving-tabindex.js | -| `js` | `*` | * | | ./src/controllers/selection.js | -| `js` | `*` | * | | ./src/controllers/shortcut.js | -| `js` | `*` | * | | ./src/css.js | -| `js` | `*` | * | | ./src/data-source/array-data-source.js | -| `js` | `*` | * | | ./src/data-source/data-source.js | -| `js` | `*` | * | | ./src/decorators/base.js | -| `js` | `*` | * | | ./src/decorators/event.js | -| `js` | `*` | * | | ./src/decorators/observe.js | -| `js` | `*` | * | | ./src/directives/anchor.js | -| `js` | `*` | * | | ./src/path.js | -| `js` | `*` | * | | ./src/popover.js | -| `js` | `*` | * | | ./src/string.js | -| `js` | `*` | * | | ./src/types.js | - -# `../packages/components/shared/src/breakpoints.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ----------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/shared/src/breakpoints.scss.ts | | - -# `../packages/components/shared/src/browser.ts`: - -## Variables - -| Name | Description | Type | -| ---------- | ----------- | ---- | -| `isSafari` | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | -------------------------------------------- | ------- | -| `js` | `isSafari` | isSafari | ../packages/components/shared/src/browser.ts | | - -# `../packages/components/shared/src/config.ts`: - -## class: `Config` - -### Static Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | ------- | ----------- | --------------------------- | ------------ | -------------- | -| `getConfigSetting` | | | `key: keyof ConfigSettings` | `Promise` | | -| `setConfig` | | | `settings: ConfigSettings` | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Config` | Config | ../packages/components/shared/src/config.ts | | - -# `../packages/components/shared/src/controllers/anchor.ts`: - -## class: `AnchorController` - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | ------------------------------------ | ------- | ---------------------------------------------------------- | -------------- | -| `arrowElement` | | `string \| HTMLElement \| undefined` | | The arrow pointing from the popover to the anchor element. | | -| `arrowPadding` | | `number \| undefined` | | The padding of the arrow. | | -| `maxWidth` | | `number \| undefined` | | The max width of the popover. | | -| `offset` | | `number \| undefined` | | The offset of the popover to its anchor. | | -| `position` | | `PopoverPosition \| undefined` | | The main position of the popover relative to the anchor. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | ------- | ----------- | ---------- | ------ | -------------- | -| `hostConnected` | | | | `void` | | -| `hostDisconnected` | | | | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ------------------------------------------------------- | ------- | -| `js` | `AnchorController` | AnchorController | ../packages/components/shared/src/controllers/anchor.ts | | - -# `../packages/components/shared/src/controllers/events.ts`: - -## class: `EventsController` - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------------- | -| `hostConnected` | | | | `void` | | -| `hostDisconnected` | | | | `void` | | -| `listen` | | | `window: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | -| `listen` | | | `document: Document, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | -| `listen` | | | `element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | -| `listen` | | | `element: ShadowRoot, type: K, listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | -| `listen` | | | `element: MediaQueryList, type: K, listener: (this: ShadowRoot, ev: MediaQueryListEventMap[K]) => any, options: boolean \| AddEventListenerOptions` | `void` | | -| `listen` | | | `element: Window \| Document \| HTMLElement \| ShadowRoot \| MediaQueryList, type: string, listener: EventListenerOrEventListenerObject, options: boolean \| AddEventListenerOptions` | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ------------------------------------------------------- | ------- | -| `js` | `EventsController` | EventsController | ../packages/components/shared/src/controllers/events.ts | | - -# `../packages/components/shared/src/controllers/focus-group.ts`: - -## class: `FocusGroupController` - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------------- | --------- | ------------------ | ------- | ----------- | -------------- | -| `cachedElements` | protected | `T[] \| undefined` | | | | -| `currentIndex` | | `number` | | | | -| `direction` | | `DirectionTypes` | | | | -| `directionLength` | | `number` | `5` | | | -| `elementEnterAction` | | | | | | -| `elements` | | `T[]` | | | | -| `focusInElement` | | `T` | | | | -| `focusInIndex` | | `number` | | | | -| `focused` | protected | `boolean` | | | | -| `handleFocusin` | | | | | | -| `handleFocusout` | | | | | | -| `handleKeydown` | | | | | | -| `host` | | `ReactiveElement` | `host` | | | -| `isFocusableElement` | | | | | | -| `offset` | | `number` | `0` | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------------------- | ------- | ----------- | ----------------------- | --------- | -------------- | -| `acceptsEventCode` | | | `code: string` | `boolean` | | -| `addEventListeners` | | | | `void` | | -| `clearElementCache` | | | `offset` | `void` | | -| `focus` | | | `options: FocusOptions` | `void` | | -| `focusToElement` | | | `elementIndex: number` | `void` | | -| `hostConnected` | | | | `void` | | -| `hostContainsFocus` | | | | `void` | | -| `hostDisconnected` | | | | `void` | | -| `hostNoLongerContainsFocus` | | | | `void` | | -| `isEventWithinListenerScope` | | | `event: Event` | `boolean` | | -| `isRelatedTargetAnElement` | | | `event: FocusEvent` | `boolean` | | -| `manage` | | | | `void` | | -| `removeEventListeners` | | | | `void` | | -| `setCurrentIndexCircularly` | | | `diff: number` | `void` | | -| `unmanage` | | | | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------------------- | -------------------- | ------------------------------------------------------------ | ------- | -| `js` | `FocusGroupController` | FocusGroupController | ../packages/components/shared/src/controllers/focus-group.ts | | - -# `../packages/components/shared/src/controllers/roving-tabindex.ts`: - -## class: `RovingTabindexController` - -### Superclass - -| Name | Module | Package | -| ---------------------- | ---------------------------------------------------------- | ------- | -| `FocusGroupController` | /packages/components/shared/src/controllers/focus-group.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------------- | --------- | ------------------ | ------- | ----------- | -------------------- | -| `cachedElements` | protected | `T[] \| undefined` | | | FocusGroupController | -| `currentIndex` | | `number` | | | FocusGroupController | -| `direction` | | `DirectionTypes` | | | FocusGroupController | -| `directionLength` | | `number` | `5` | | FocusGroupController | -| `elementEnterAction` | | | | | FocusGroupController | -| `elements` | | `T[]` | | | FocusGroupController | -| `focusInElement` | | `T` | | | FocusGroupController | -| `focusInIndex` | | `number` | | | FocusGroupController | -| `focused` | protected | `boolean` | | | FocusGroupController | -| `handleFocusin` | | | | | FocusGroupController | -| `handleFocusout` | | | | | FocusGroupController | -| `handleKeydown` | | | | | FocusGroupController | -| `host` | | `ReactiveElement` | `host` | | FocusGroupController | -| `isFocusableElement` | | | | | FocusGroupController | -| `offset` | | `number` | `0` | | FocusGroupController | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ---------------------------- | ------- | ----------- | ---------------------------------------------------- | --------- | -------------------- | -| `acceptsEventCode` | | | `code: string` | `boolean` | FocusGroupController | -| `addEventListeners` | | | | `void` | FocusGroupController | -| `clearElementCache` | | | `offset` | `void` | FocusGroupController | -| `focus` | | | `options: FocusOptions` | `void` | FocusGroupController | -| `focusToElement` | | | `elementIndex: number` | `void` | FocusGroupController | -| `hostConnected` | | | | `void` | FocusGroupController | -| `hostContainsFocus` | | | | `void` | FocusGroupController | -| `hostDisconnected` | | | | `void` | FocusGroupController | -| `hostNoLongerContainsFocus` | | | | `void` | FocusGroupController | -| `hostUpdated` | | | | `void` | | -| `isEventWithinListenerScope` | | | `event: Event` | `boolean` | FocusGroupController | -| `isRelatedTargetAnElement` | | | `event: FocusEvent` | `boolean` | FocusGroupController | -| `manage` | | | | `void` | FocusGroupController | -| `manageTabindexes` | | | | `void` | | -| `removeEventListeners` | | | | `void` | FocusGroupController | -| `setCurrentIndexCircularly` | | | `diff: number` | `void` | FocusGroupController | -| `unmanage` | | | | `void` | FocusGroupController | -| `updateTabindexes` | | | `getTabIndex: (el: HTMLElement) => UpdateTabIndexes` | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------------------- | ------------------------ | ---------------------------------------------------------------- | ------- | -| `js` | `RovingTabindexController` | RovingTabindexController | ../packages/components/shared/src/controllers/roving-tabindex.ts | | - -# `../packages/components/shared/src/controllers/selection.ts`: - -## class: `SelectionController` - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------- | ------- | --------- | --------------------- | --------------------------------------------------- | -------------- | -| `multiple` | | `boolean` | `!!options?.multiple` | Whether more than 1 item can be selected at a time. | | -| `selection` | | `Set` | | | | -| `size` | | `number` | `0` | The total number of items in the selection. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| -------------------- | ------- | ----------- | ---------- | --------- | -------------- | -| `areAllSelected` | | | | `boolean` | | -| `areSomeSelected` | | | | `boolean` | | -| `deselect` | | | `item: T` | `void` | | -| `deselectAll` | | | | `void` | | -| `isSelectAllToggled` | | | | `boolean` | | -| `isSelected` | | | `item: T` | `boolean` | | -| `select` | | | `item: T` | `void` | | -| `selectAll` | | | | `void` | | -| `toggle` | | | `item: T` | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------------------- | ------------------- | ---------------------------------------------------------- | ------- | -| `js` | `SelectionController` | SelectionController | ../packages/components/shared/src/controllers/selection.ts | | - -# `../packages/components/shared/src/controllers/shortcut.ts`: - -## class: `ShortcutController` - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------ | ------- | ----------- | -------------------------- | ------ | -------------- | -| `bind` | | | `shortcuts: KeyBindingMap` | `void` | | -| `hostConnected` | | | | `void` | | -| `hostDisconnected` | | | | `void` | | -| `unbind` | | | | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------------- | ------------------ | --------------------------------------------------------- | ------- | -| `js` | `ShortcutController` | ShortcutController | ../packages/components/shared/src/controllers/shortcut.ts | | - -# `../packages/components/shared/src/css.ts`: - -## Variables - -| Name | Description | Type | -| ------------------------ | ----------- | -------- | -| `firstFocusableSelector` | | `string` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------------ | ---------------------- | ---------------------------------------- | ------- | -| `js` | `breakpoints` | breakpoints | ../packages/components/shared/src/css.ts | | -| `js` | `firstFocusableSelector` | firstFocusableSelector | ../packages/components/shared/src/css.ts | | - -# `../packages/components/shared/src/data-source/array-data-source.ts`: - -## class: `ArrayDataSource` - -### Superclass - -| Name | Module | Package | -| ------------ | ---------------------------------------------------------- | ------- | -| `DataSource` | /packages/components/shared/src/data-source/data-source.js | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ----------------------------------- | ------- | ------------------------------------------ | -------------- | -| `filteredItems` | | `T[]` | | The filtered & sorted array of items. | DataSource | -| `filters` | | `Map>` | | | DataSource | -| `groupBy` | | `DataSourceGroupBy \| undefined` | | | DataSource | -| `items` | | `T[]` | | The array of all items. | DataSource | -| `size` | | `number` | | Total number of items in this data source. | DataSource | -| `sort` | | `DataSourceSort \| undefined` | | | DataSource | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------ | -------------- | -| `addFilter` | | | `id: string, pathOrFilter: U, value: string \| string[]` | `void` | DataSource | -| `removeFilter` | | | `id: string` | `void` | DataSource | -| `removeGroupBy` | | Remove the groupBy attribute. This will cause the data to be sorted as if it was not grouped. | | `void` | DataSource | -| `removeSort` | | | | `void` | DataSource | -| `setGroupBy` | | Group the items by the given path. Optionally, you can provide a sorter and direction. This is part of the DataSource interface, because it changes how the data is sorted. You may want to pass the groupBy attribute to the server, so it can sort the data for you. | `path: string, sorter: DataSourceSortFunction, direction: DataSourceSortDirection` | `void` | DataSource | -| `setSort` | | | `id: string, pathOrSorter: U, direction: DataSourceSortDirection` | `void` | DataSource | - -### Events - -| Name | Type | Description | Inherited From | -| ----------- | ------------- | ----------- | -------------- | -| `sl-update` | `CustomEvent` | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ------------------------------------------------------------------ | ------- | -| `js` | `ArrayDataSource` | ArrayDataSource | ../packages/components/shared/src/data-source/array-data-source.ts | | - -# `../packages/components/shared/src/data-source/data-source.ts`: - -## class: `DataSource` - -### Superclass - -| Name | Module | Package | -| ------------- | ------------------------------------------------------------ | ------- | -| `EventTarget` | ../packages/components/shared/src/data-source/data-source.ts | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ----------------------------------- | ------- | ------------------------------------------ | -------------- | -| `filteredItems` | | `T[]` | | The filtered & sorted array of items. | | -| `filters` | | `Map>` | | | | -| `groupBy` | | `DataSourceGroupBy \| undefined` | | | | -| `items` | | `T[]` | | The array of all items. | | -| `size` | | `number` | | Total number of items in this data source. | | -| `sort` | | `DataSourceSort \| undefined` | | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------ | -------------- | -| `addFilter` | | | `id: string, pathOrFilter: U, value: string \| string[]` | `void` | | -| `removeFilter` | | | `id: string` | `void` | | -| `removeGroupBy` | | Remove the groupBy attribute. This will cause the data to be sorted as if it was not grouped. | | `void` | | -| `removeSort` | | | | `void` | | -| `setGroupBy` | | Group the items by the given path. Optionally, you can provide a sorter and direction. This is part of the DataSource interface, because it changes how the data is sorted. You may want to pass the groupBy attribute to the server, so it can sort the data for you. | `path: string, sorter: DataSourceSortFunction, direction: DataSourceSortDirection` | `void` | | -| `setSort` | | | `id: string, pathOrSorter: U, direction: DataSourceSortDirection` | `void` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ------------------------------------------------------------ | ------- | -| `js` | `DataSource` | DataSource | ../packages/components/shared/src/data-source/data-source.ts | | - -# `../packages/components/shared/src/decorators/base.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -| `decorateProperty` | Helper for decorating a property that is compatible with both TypeScript and Babel decorators. The optional `finisher` can be used to perform work on the class. The optional `descriptor` should return a PropertyDescriptor to install for the given property. | `{ - finisher, - descriptor - }: { - finisher?: ((ctor: typeof ReactiveElement, property: PropertyKey) => void) \| null; - descriptor?(property: PropertyKey): PropertyDescriptor; - }, finisher: function, descriptor: function` | `ClassElement\|void` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ---------------------------------------------------- | ------- | -| `js` | `decorateProperty` | decorateProperty | ../packages/components/shared/src/decorators/base.ts | | - -# `../packages/components/shared/src/decorators/event.ts`: - -## class: `EventEmitter` - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------ | ------- | ----------- | --------------------------------- | --------- | -------------- | -| `emit` | | | `value: T, options: EventOptions` | `boolean` | | - -
- -## Variables - -| Name | Description | Type | -| ------- | ----------- | ------- | -| `event` | | `Event` | - -
- -## Functions - -| Name | Description | Parameters | Return | -| ------- | ----------- | ----------------------- | ------ | -| `event` | | `options: EventOptions` | `any` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------- | ------------ | ----------------------------------------------------- | ------- | -| `js` | `EventEmitter` | EventEmitter | ../packages/components/shared/src/decorators/event.ts | | -| `js` | `event` | event | ../packages/components/shared/src/decorators/event.ts | | - -# `../packages/components/shared/src/decorators/observe.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| --------- | ----------- | --------------------------------------------------- | ------ | -| `observe` | | `propertyName: string, lifecycle: ObserveLifecycle` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------------- | ------- | -| `js` | `observe` | observe | ../packages/components/shared/src/decorators/observe.ts | | - -# `../packages/components/shared/src/directives/anchor.ts`: - -## class: `AnchorDirective` - -### Superclass - -| Name | Module | Package | -| ----------- | ------ | ---------------- | -| `Directive` | | lit/directive.js | - -
- -## Variables - -| Name | Description | Type | -| -------- | ----------- | ---- | -| `anchor` | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ------------------------------------------------------ | ------- | -| `js` | `AnchorDirective` | AnchorDirective | ../packages/components/shared/src/directives/anchor.ts | | -| `js` | `anchor` | anchor | ../packages/components/shared/src/directives/anchor.ts | | - -# `../packages/components/shared/src/path.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ----------------- | ----------- | --------------------------------------- | --------- | -| `getNameByPath` | | `path: string` | `string` | -| `getStringByPath` | | `object: unknown, path` | `string` | -| `getValueByPath` | | `object: unknown, path` | `unknown` | -| `setValueByPath` | | `object: unknown, path, value: unknown` | `void` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | ----------------------------------------- | ------- | -| `js` | `getNameByPath` | getNameByPath | ../packages/components/shared/src/path.ts | | -| `js` | `getStringByPath` | getStringByPath | ../packages/components/shared/src/path.ts | | -| `js` | `getValueByPath` | getValueByPath | ../packages/components/shared/src/path.ts | | -| `js` | `setValueByPath` | setValueByPath | ../packages/components/shared/src/path.ts | | - -# `../packages/components/shared/src/popover.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ----------------- | ----------- | ------------------------------------------------------------------------ | -------------- | -| `isPopoverOpen` | | `element: HTMLElement` | `boolean` | -| `positionPopover` | | `element: HTMLElement, anchor: Element, options: PositionPopoverOptions` | `(() => void)` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------------- | --------------- | -------------------------------------------- | ------- | -| `js` | `isPopoverOpen` | isPopoverOpen | ../packages/components/shared/src/popover.ts | | -| `js` | `positionPopover` | positionPopover | ../packages/components/shared/src/popover.ts | | - -# `../packages/components/shared/src/string.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------ | -| `camelize` | Returns the lowerCamelCase form of a string. \```javascript camelize('innerHTML') // 'innerHTML' camelize('action_name') // 'actionName' camelize('css-class-name') // 'cssClassName' camelize('object.path.name') // 'objectPathName' camelize('my favorite items') // 'myFavoriteItems' camelize('My Favorite Items') // 'myFavoriteItems' \``` | `str: string` | | -| `capitalize` | Returns the Capitalized form of a string \```javascript capitalize('innerHTML') // 'InnerHTML' capitalize('action_name') // 'Action_name' capitalize('css-class-name') // 'Css-class-name' capitalize('my favorite items') // 'My favorite items' \``` | `str: string` | | -| `classify` | Returns the UpperCamelCase form of a string. \```javascript classify('innerHTML') // 'InnerHTML' classify('action_name') // 'ActionName' classify('css-class-name') // 'CssClassName' classify('my favorite items') // 'MyFavoriteItems' \``` | `str: string` | | -| `dasherize` | Replaces underscores, spaces, or camelCase with dashes. \```javascript dasherize('innerHTML') // 'inner-html' dasherize('action_name') // 'action-name' dasherize('css-class-name') // 'css-class-name' dasherize('my favorite items') // 'my-favorite-items' \``` | `str: string` | | -| `decamelize` | Converts a camelized string into all lower case separated by underscores. \```javascript decamelize('innerHTML') // 'inner_html' decamelize('action_name') // 'action_name' decamelize('css-class-name') // 'css-class-name' decamelize('my favorite items') // 'my favorite items' \``` | `str: string` | | -| `humanize` | Returns the Humanized form of a string \```javascript humanize('innerHTML') // 'Inner html' humanize('action_name') // 'Action name' humanize('css-class-name') // 'Css class name' humanize('my favorite items') // 'My favorite items' \``` | `str: string` | | -| `underscore` | More general than decamelize. Returns the lower\\_case\\_and\\_underscored form of a string. \```javascript underscore('innerHTML') // 'inner_html' underscore('action_name') // 'action_name' underscore('css-class-name') // 'css_class_name' underscore('my favorite items') // 'my_favorite_items' \``` | `str: string` | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------ | ----------- | ------------------------------------------- | ------- | -| `js` | `camelize` | camelize | ../packages/components/shared/src/string.ts | | -| `js` | `capitalize` | capitalize | ../packages/components/shared/src/string.ts | | -| `js` | `classify` | classify | ../packages/components/shared/src/string.ts | | -| `js` | `dasherize` | dasherize | ../packages/components/shared/src/string.ts | | -| `js` | `decamelize` | decamelize | ../packages/components/shared/src/string.ts | | -| `js` | `humanize` | humanize | ../packages/components/shared/src/string.ts | | -| `js` | `underscore` | underscore | ../packages/components/shared/src/string.ts | | - -# `../packages/components/shared/src/vendor/tinykeys.ts`: - -## Functions - -| Name | Description | Parameters | Return | -| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------- | -| `createKeybindingsHandler` | Creates an event listener for handling keybindings. | `keyBindingMap: KeyBindingMap, options: KeyBindingHandlerOptions` | `EventListener` | -| `parseKeybinding` | Parses a "Key Binding String" into its parts grammar = `` \ = ` ...` \ = `` or `+` \ = `++...` | `str: string` | `KeyBindingPress[]` | -| `tinykeys` | Subscribes to keybindings. Returns an unsubscribe method. | `target: Window \| HTMLElement, keyBindingMap: KeyBindingMap, options: KeyBindingOptions` | `() => void` | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------------------------- | ------------------------ | ---------------------------------------------------- | ------- | -| `js` | `parseKeybinding` | parseKeybinding | ../packages/components/shared/src/vendor/tinykeys.ts | | -| `js` | `createKeybindingsHandler` | createKeybindingsHandler | ../packages/components/shared/src/vendor/tinykeys.ts | | -| `js` | `tinykeys` | tinykeys | ../packages/components/shared/src/vendor/tinykeys.ts | | - -# `../packages/components/skeleton/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------- | -| `js` | `*` | * | | ./src/skeleton.js | - -# `../packages/components/skeleton/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------- | ----------- | --------------------------------------------- | ------- | -| `custom-element-definition` | `sl-skeleton` | Skeleton | /packages/components/skeleton/src/skeleton.js | | - -# `../packages/components/skeleton/src/skeleton.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/skeleton/src/skeleton.scss.ts | | - -# `../packages/components/skeleton/src/skeleton.ts`: - -## class: `Skeleton`, `sl-skeleton` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ------------------------------------------- | ----------- | ------------------- | -------------- | -| `effect` | | `'none' \| 'shimmer' \| 'pulse' \| 'sheen'` | `'shimmer'` | Skeleton's effect. | | -| `variant` | | `'circle' \| 'default'` | `'default'` | Skeleton's variant. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `effect` | effect | | -| `variant` | variant | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | ----------------------------------------------- | ------- | -| `js` | `Skeleton` | Skeleton | ../packages/components/skeleton/src/skeleton.ts | | - -# `../packages/components/spinner/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ---------------- | -| `js` | `*` | * | | ./src/spinner.js | - -# `../packages/components/spinner/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | -| `custom-element-definition` | `sl-spinner` | Spinner | /packages/components/spinner/src/spinner.js | | - -# `../packages/components/spinner/src/spinner.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/spinner/src/spinner.scss.ts | | - -# `../packages/components/spinner/src/spinner.ts`: - -## class: `Spinner`, `sl-spinner` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------- | ------- | ----------------------------- | ------- | ---------------------------------------------------------- | -------------- | -| `size` | | `SpinnerSize \| undefined` | | The size of the spinner. Defaults to md in CSS if not set. | | -| `variant` | | `SpinnerVariant \| undefined` | | The spinner variant. | | - -### Attributes - -| Name | Field | Inherited From | -| --------- | ------- | -------------- | -| `size` | size | | -| `variant` | variant | | - -### CSS Properties - -| Name | Default | Description | -| ------------------- | ------- | -------------------------------------------------- | -| `--sl-spinner-size` | | The size of the spinner, defaults to md if not set | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `Spinner` | Spinner | ../packages/components/spinner/src/spinner.ts | | - -# `../packages/components/switch/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | --------------- | -| `js` | `*` | * | | ./src/switch.js | - -# `../packages/components/switch/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ----------- | ----------- | ----------------------------------------- | ------- | -| `custom-element-definition` | `sl-switch` | Switch | /packages/components/switch/src/switch.js | | - -# `../packages/components/switch/src/switch.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------ | ------- | -| `js` | `default` | | ../packages/components/switch/src/switch.scss.ts | | - -# `../packages/components/switch/src/switch.ts`: - -## class: `Switch`, `sl-switch` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `FormControlMixin` | | @sl-design-system/form | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `checked` | | `boolean \| undefined` | | Whether the switch is on or off. | | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the switch is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `iconOff` | | `string \| undefined` | | Custom icon in "off" state. | | -| `iconOn` | | `string \| undefined` | | Custom icon in "on" state. | | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `reverse` | | `boolean \| undefined` | | Whether the toggle should be shown *after* the text. | | -| `showValid` | | `boolean` | `false` | Optional property to indicate the valid state should be shown. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `SwitchSize` | `'md'` | The size of the switch. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | | The value of the switch when the switch is checked. See the formValue property for easy access. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ------------------------- | ---------------------------------------- | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the component loses focus. | | -| `changeEvent` | `EventEmitter` | Emits when the checked state changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component receives focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `checked` | checked | | -| `disabled` | disabled | | -| `icon-off` | iconOff | | -| `icon-on` | iconOn | | -| `reverse` | reverse | | -| `size` | size | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### Slots - -| Name | Description | -| --------- | ---------------------------------------------------------------------------------------------------------- | -| `default` | Text label of the checkbox. Technically there are no limits what can be put here; text, images, icons etc. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | -------- | ----------- | ------------------------------------------- | ------- | -| `js` | `Switch` | Switch | ../packages/components/switch/src/switch.ts | | - -# `../packages/components/tabs/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------------ | -| `js` | `*` | * | | ./src/tab-group.js | -| `js` | `*` | * | | ./src/tab-panel.js | -| `js` | `*` | * | | ./src/tab.js | - -# `../packages/components/tabs/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | -------------- | ----------- | ------------------------------------------ | ------- | -| `custom-element-definition` | `sl-tab` | Tab | /packages/components/tabs/src/tab.js | | -| `custom-element-definition` | `sl-tab-group` | TabGroup | /packages/components/tabs/src/tab-group.js | | -| `custom-element-definition` | `sl-tab-panel` | TabPanel | /packages/components/tabs/src/tab-panel.js | | - -# `../packages/components/tabs/src/tab-group.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/tabs/src/tab-group.scss.ts | | - -# `../packages/components/tabs/src/tab-group.ts`: - -## class: `TabGroup`, `sl-tab-group` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ----------- | ------- | ---------------------- | --------- | ------------------------------------------------------------- | -------------- | -| `alignment` | | `TabsAlignment` | `'start'` | The alignment of tabs inside sl-tab-group | | -| `listbox` | | `HTMLElement` | | The listbox element with all tabs list. | | -| `tabs` | | `Tab[] \| undefined` | | The slotted tabs. | | -| `vertical` | | `boolean \| undefined` | | Renders the tabs vertically instead of the default horizontal | | - -### Events - -| Name | Type | Description | Inherited From | -| ----------- | ---------------------- | --------------------------------------------- | -------------- | -| `tabChange` | `EventEmitter` | Emits when the tab has been selected/changed. | | - -### Attributes - -| Name | Field | Inherited From | -| ----------- | --------- | -------------- | -| `vertical` | vertical | | -| `alignment` | alignment | | - -### Slots - -| Name | Description | -| --------- | ---------------------------------- | -| `default` | a place for the tab group content. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | -------------------------------------------- | ------- | -| `js` | `TabGroup` | TabGroup | ../packages/components/tabs/src/tab-group.ts | | - -# `../packages/components/tabs/src/tab-panel.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/tabs/src/tab-panel.scss.ts | | - -# `../packages/components/tabs/src/tab-panel.ts`: - -## class: `TabPanel`, `sl-tab-panel` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Slots - -| Name | Description | -| --------- | ---------------------------------- | -| `default` | a place for the tab panel content. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | -------------------------------------------- | ------- | -| `js` | `TabPanel` | TabPanel | ../packages/components/tabs/src/tab-panel.ts | | - -# `../packages/components/tabs/src/tab.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/tabs/src/tab.scss.ts | | - -# `../packages/components/tabs/src/tab.ts`: - -## class: `Tab`, `sl-tab` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | --------- | ------- | -------------------------------- | -------------- | -| `disabled` | | `boolean` | `false` | Whether the tab item is disabled | | -| `selected` | | `boolean` | `false` | Whether the tab item is selected | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ----------------------- | --------- | --------------------------------------------------------------------------------------------------------- | ---------- | ------ | -------------- | -| `handleSelectionChange` | protected | Apply accessible attributes and values to the tab button. Observe the selected property if it changes | | `void` | | - -### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `selected` | selected | | -| `disabled` | disabled | | - -### Slots - -| Name | Description | -| ---------- | ------------------------------------------------------ | -| `default` | a place for the tab group content. | -| `icon` | icon shown on the left side of the component. | -| `badge` | a place for badge component. | -| `subtitle` | subtitle of the tab, containing additional information | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----- | ----------- | -------------------------------------- | ------- | -| `js` | `Tab` | Tab | ../packages/components/tabs/src/tab.ts | | - -# `../packages/components/text-field/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ------------------- | -| `js` | `*` | * | | ./src/text-field.js | - -# `../packages/components/text-field/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | --------------- | ----------- | ------------------------------------------------- | ------- | -| `custom-element-definition` | `sl-text-field` | TextField | /packages/components/text-field/src/text-field.js | | - -# `../packages/components/text-field/src/text-field.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/text-field/src/text-field.scss.ts | | - -# `../packages/components/text-field/src/text-field.ts`: - -## class: `TextField`, `sl-text-field` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `FormControlMixin` | | @sl-design-system/form | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `autocomplete` | | `typeof HTMLInputElement.prototype.autocomplete \| undefined` | | Specifies which type of data the browser can use to pre-fill the input. NOTE: Declare the type this way so it is backwards compatible with 4.9.5, which we still use in `@sl-design-system/angular`. | | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the text field is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `input` | | `HTMLInputElement` | | The input element in the light DOM. | | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | | -| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `pattern` | | `string \| undefined` | | This will validate the value of the input using the given pattern. | | -| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | | -| `readonly` | | `boolean \| undefined` | | Whether you can interact with the input or if it is just a static, readonly display. | | -| `required` | | `boolean \| undefined` | | Whether the text field is a required field. | | -| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `TextFieldSize` | `'md'` | The size of the input. | | -| `type` | | `'email' \| 'number' \| 'tel' \| 'text' \| 'url' \| 'password'` | `'text'` | The input type. Only text types are valid here. For other types, see their respective components. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | `''` | The value for the input, to be used in forms. | FormControlMixin | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ---------------------- | ------------------------------------------ | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the focus leaves the component. | | -| `changeEvent` | `EventEmitter` | Emits when the value changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component gains focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `autocomplete` | autocomplete | | -| `disabled` | disabled | | -| `maxlength` | maxLength | | -| `minlength` | minLength | | -| `pattern` | pattern | | -| `placeholder` | placeholder | | -| `readonly` | readonly | | -| `required` | required | | -| `show-valid` | showValid | | -| `size` | size | | -| `type` | type | | -| `value` | value | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### CSS Parts - -| Name | Description | -| --------- | ------------------- | -| `wrapper` | The input's wrapper | - -### Slots - -| Name | Description | -| -------- | ------------------------------ | -| `prefix` | Content shown before the input | -| `input` | The slot for the input element | -| `suffix` | Content shown after the input | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ----------- | ----------- | --------------------------------------------------- | ------- | -| `js` | `TextField` | TextField | ../packages/components/text-field/src/text-field.ts | | - -# `../packages/components/textarea/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | ----------------- | -| `js` | `*` | * | | ./src/textarea.js | - -# `../packages/components/textarea/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------- | ----------- | --------------------------------------------- | ------- | -| `custom-element-definition` | `sl-textarea` | Textarea | /packages/components/textarea/src/textarea.js | | - -# `../packages/components/textarea/src/textarea.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | ---------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/textarea/src/textarea.scss.ts | | - -# `../packages/components/textarea/src/textarea.ts`: - -## class: `Textarea`, `sl-textarea` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Mixins - -| Name | Module | Package | -| --------------------- | ------ | --------------------------------------- | -| `FormControlMixin` | | @sl-design-system/form | -| `ScopedElementsMixin` | | @open-wc/scoped-elements/lit-element.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | ---------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -| `autocomplete` | | `typeof HTMLTextAreaElement.prototype.autocomplete \| undefined` | | Specifies which type of data the browser can use to pre-fill the textarea. NOTE: Declare the type this way so it is backwards compatible with 4.9.5, which we still use in `@sl-design-system/angular`. | | -| `customValidity` | | `string \| undefined` | | The error message to display when the control is invalid. | FormControlMixin | -| `disabled` | | `boolean \| undefined` | | Whether the textarea is disabled; when set no interaction is possible. | | -| `form` | | `HTMLFormElement \| null` | | The form associated with the control. | FormControlMixin | -| `formValue` | | `unknown` | | The value used when submitting the form. | FormControlMixin | -| `labels` | | `` `NodeListOf` \| null `` | | The labels associated with the control. | FormControlMixin | -| `maxLength` | | `number \| undefined` | | Maximum length (number of characters). | | -| `minLength` | | `number \| undefined` | | Minimum length (number of characters). | | -| `name` | | `string \| undefined` | | The name of the form control. | FormControlMixin | -| `nativeFormValue` | | `FormValue` | | | FormControlMixin | -| `placeholder` | | `string \| undefined` | | Placeholder text in the input. | | -| `readonly` | | `boolean \| undefined` | | Whether you can interact with the textarea or if it is just a static, readonly display. | | -| `required` | | `boolean \| undefined` | | Whether the textarea is a required field. | | -| `resize` | | `ResizeType` | `'vertical'` | The way the textarea can be resized. | | -| `rows` | | `number \| undefined` | | The number of rows the textarea should initially have. If not set, the browser defaults to 2 rows. | | -| `showValid` | | `boolean` | `false` | When set will cause the control to show it is valid after reportValidity is called. | FormControlMixin | -| `showValidity` | | `'valid' \| 'invalid' \| undefined` | | Whether to show the validity state. | FormControlMixin | -| `size` | | `TextareaSize` | `'md'` | The size of the textarea. | | -| `textarea` | | `HTMLTextAreaElement` | | The textarea in the light DOM. | | -| `valid` | | `boolean` | | Returns whether the form control is valid or not. | FormControlMixin | -| `validationMessage` | | `string` | | String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead. | FormControlMixin | -| `validity` | | `ValidityState` | | Returns the validity state the control is in. | FormControlMixin | -| `validityState` | | `'valid' \| 'invalid' \| 'pending'` | | Returns the current validity state. | FormControlMixin | -| `value` | | `unknown \| undefined` | `''` | The value for the textarea. | FormControlMixin | -| `wrap` | | `WrapType` | `'soft'` | The way text should be wrapped during form submission. | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------- | ---------------- | -| `getLocalizedValidationMessage` | | This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control. | | `string` | FormControlMixin | -| `reportValidity` | | Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user. | | `boolean` | FormControlMixin | -| `setCustomValidity` | | Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again. | `message: string \| Promise` | `void` | FormControlMixin | - -### Events - -| Name | Type | Description | Inherited From | -| ------------- | ---------------------- | ------------------------------------------ | ---------------- | -| `blurEvent` | `EventEmitter` | Emits when the focus leaves the component. | | -| `changeEvent` | `EventEmitter` | Emits when the value changes. | | -| `focusEvent` | `EventEmitter` | Emits when the component gains focus. | | -| | `ValidateEvent` | | FormControlMixin | - -### Attributes - -| Name | Field | Inherited From | -| ----------------- | -------------- | ---------------- | -| `autocomplete` | autocomplete | | -| `disabled` | disabled | | -| `maxlength` | maxLength | | -| `minlength` | minLength | | -| `placeholder` | placeholder | | -| `readonly` | readonly | | -| `required` | required | | -| `resize` | resize | | -| `rows` | rows | | -| `show-valid` | showValid | | -| `size` | size | | -| `value` | value | | -| `wrap` | wrap | | -| `custom-validity` | customValidity | FormControlMixin | -| `name` | name | FormControlMixin | -| `show-validity` | showValidity | FormControlMixin | - -### CSS Properties - -| Name | Default | Description | -| -------------------- | ------- | ---------------------------------------------------- | -| `--sl-textarea-rows` | | The number of rows initially visible in the textarea | - -### Slots - -| Name | Description | -| ---------- | --------------------------------- | -| `textarea` | The slot for the textarea element | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---------- | ----------- | ----------------------------------------------- | ------- | -| `js` | `Textarea` | Textarea | ../packages/components/textarea/src/textarea.ts | | - -# `../packages/components/tooltip/index.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ---- | ----------- | ------ | -------------------------- | -| `js` | `*` | * | | ./src/tooltip.js | -| `js` | `*` | * | | ./src/tooltip-directive.js | - -# `../packages/components/tooltip/register.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| --------------------------- | ------------ | ----------- | ------------------------------------------- | ------- | -| `custom-element-definition` | `sl-tooltip` | Tooltip | /packages/components/tooltip/src/tooltip.js | | - -# `../packages/components/tooltip/src/tooltip-directive.ts`: - -## class: `TooltipDirective` - -### Superclass - -| Name | Module | Package | -| ----------- | ------ | ---------------- | -| `Directive` | | lit/directive.js | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | -------------------------- | ------- | ----------- | -------------- | -| `content` | | `unknown \| undefined` | | | | -| `didSetupLazy` | | `boolean` | `false` | | | -| `part` | | `ElementPart \| undefined` | | | | -| `tooltip` | | `Tooltip \| undefined` | | | | - -### Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| --------------- | ------- | ----------- | ---------- | ------ | -------------- | -| `renderContent` | | | | `void` | | - -
- -## Variables - -| Name | Description | Type | -| --------- | ----------- | ---- | -| `tooltip` | | | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | ------------------ | ---------------- | ------------------------------------------------------- | ------- | -| `js` | `TooltipDirective` | TooltipDirective | ../packages/components/tooltip/src/tooltip-directive.ts | | -| `js` | `tooltip` | tooltip | ../packages/components/tooltip/src/tooltip-directive.ts | | - -# `../packages/components/tooltip/src/tooltip.scss.ts`: - -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | -------------------------------------------------- | ------- | -| `js` | `default` | | ../packages/components/tooltip/src/tooltip.scss.ts | | - -# `../packages/components/tooltip/src/tooltip.ts`: - -## class: `Tooltip`, `sl-tooltip` - -### Superclass - -| Name | Module | Package | -| ------------ | ------ | ------- | -| `LitElement` | | lit | - -### Static Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------- | ------- | -------------------------------------------------------- | -------------- | -| `arrowPadding` | | `number` | `16` | The default padding of the arrow. | | -| `offset` | | `number` | `12` | The default offset of the tooltip to its anchor. | | -| `viewportMargin` | | `number` | `8` | The default margin between the tooltip and the viewport. | | - -### Static Methods - -| Name | Privacy | Description | Parameters | Return | Inherited From | -| ------ | ------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------ | -------------- | -| `lazy` | | To attach the `sl-tooltip` to the DOM tree and anchor element | `target: Element, callback: (target: Tooltip) => void, options: TooltipOptions` | `void` | | - -### Fields - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------- | -------------- | -| `maxWidth` | | `number \| undefined` | | The maximum width of the tooltip. | | -| `position` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end'` | `'top'` | Position of the tooltip relative to its anchor. | | - -### Attributes - -| Name | Field | Inherited From | -| ----------- | -------- | -------------- | -| `max-width` | maxWidth | | -| `position` | position | | - -### Slots - -| Name | Description | -| --------- | --------------------------------- | -| `default` | The slot for the tooltip content. | - -
- -## Exports - -| Kind | Name | Declaration | Module | Package | -| ---- | --------- | ----------- | --------------------------------------------- | ------- | -| `js` | `Tooltip` | Tooltip | ../packages/components/tooltip/src/tooltip.ts | | diff --git a/website/src/_data/tokens/base.json b/website/src/_data/tokens/base.json index 5a4a4a8783..a86190b83f 100644 --- a/website/src/_data/tokens/base.json +++ b/website/src/_data/tokens/base.json @@ -1530,6 +1530,37 @@ "type": "typography" } }, + "slds": { + "checklist": { + "heading": { + "value": { + "fontFamily": "{text.typeset.fontFamily.heading}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "lineHeight": "{text.typeset.lineHeight.xl}", + "fontSize": "{text.typeset.fontSize.xl}" + }, + "type": "typography" + }, + "body": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.regular}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + }, + "listitem": { + "value": { + "fontFamily": "{text.typeset.fontFamily.body}", + "fontWeight": "{text.typeset.fontWeight.demibold}", + "fontSize": "{text.typeset.fontSize.lg}", + "lineHeight": "{text.typeset.lineHeight.lg}" + }, + "type": "typography" + } + } + }, "input": { "textField": { "fontIcon": { @@ -2128,6 +2159,12 @@ "value": "{borderRadius.default}", "type": "borderRadius" } + }, + "slds": { + "checklist": { + "value": "{border.radius.2xl}", + "type": "borderRadius" + } } }, "border": { @@ -2252,6 +2289,12 @@ "type": "borderWidth" } }, + "slds": { + "checklist": { + "value": "{border.width.xs}", + "type": "borderWidth" + } + }, "none": { "value": 0, "type": "borderWidth", @@ -4402,6 +4445,31 @@ } } }, + "boxShadow": { + "slds": { + "checklist": { + "value": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.50})", + "type": "dropShadow" + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "rgba({color.palette.neutral.base} , {opacity.150})", + "type": "dropShadow" + } + ], + "type": "boxShadow" + } + } + }, "flexDirection": { "column": { "value": "column", diff --git a/website/src/_includes/base.njk b/website/src/_includes/base.njk index 250a512f0b..c80db3a976 100644 --- a/website/src/_includes/base.njk +++ b/website/src/_includes/base.njk @@ -7,6 +7,7 @@ + diff --git a/website/src/categories/components/accordion/code.md b/website/src/categories/components/accordion/code.md index 3f3200c967..34a63591f7 100644 --- a/website/src/categories/components/accordion/code.md +++ b/website/src/categories/components/accordion/code.md @@ -100,30 +100,5 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/accordion - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/accordion - ``` -
- -
- -{% include "../component-table.njk" %} \ No newline at end of file + +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/avatar/code.md b/website/src/categories/components/avatar/code.md index fb09b28086..df3ea3bf16 100644 --- a/website/src/categories/components/avatar/code.md +++ b/website/src/categories/components/avatar/code.md @@ -35,32 +35,7 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/avatar - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/avatar - ``` -
- -
- +
## Avatar shape diff --git a/website/src/categories/components/button/code.md b/website/src/categories/components/button/code.md index 58447529d8..9e17d4c1ff 100644 --- a/website/src/categories/components/button/code.md +++ b/website/src/categories/components/button/code.md @@ -31,31 +31,6 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```html - npm install @sl-design-system/button - ``` - -
- -With yarn - -
- - ```html - yarn add @sl-design-system/button - ``` -
- -
- + {% include "../component-table.njk" %} diff --git a/website/src/categories/components/checkbox/code.md b/website/src/categories/components/checkbox/code.md index deb306f3c1..033907aba8 100644 --- a/website/src/categories/components/checkbox/code.md +++ b/website/src/categories/components/checkbox/code.md @@ -49,34 +49,9 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/checkbox - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/checkbox - ``` -
- -
- + {% include "../component-table.njk" %} \ No newline at end of file + diff --git a/website/src/categories/components/component-table.njk b/website/src/categories/components/component-table.njk index 976a1fa700..84d2aa73c5 100644 --- a/website/src/categories/components/component-table.njk +++ b/website/src/categories/components/component-table.njk @@ -7,7 +7,7 @@

- {%- if component.data.componentTagName.length > 1 -%}{{ tagName.name }}{% endif %} API + {% if component.data.componentTagName.length > 1 -%}{{ tagName.name }}{%- endif %} API

@@ -31,33 +31,26 @@ {%- for member in declaration.members -%} - {% if member.kind == 'field' %} - - {{member.name}} - - {%- if member.attribute -%} - {{ member.attribute }} - {%- else -%} - - - {%- endif -%} - - - {% if member.expandedType %} - {{member.expandedType.text}} - {% endif %} + {%- if member.kind == 'field' -%} + + {{member.name | escape}} + + {%- if member.attribute -%}{{ member.attribute | escape}}{%- else -%} - {%- endif -%} + + + {%- if member.expandedType -%}{{member.expandedType.text | escape}}{%- endif -%} - {% if member.type and not member.expandedType %} - {{member.type.text}} - {% endif %} - - {% if member.default %} - {{member.default}} - {% endif %} - - {{member.description}} - - {% endif %} - {% endfor -%} + {%- if member.type and not member.expandedType -%}{{member.type.text | escape}}{%- endif -%} + + + {%- if member.default -%} + {{member.default | escape}} + {%- endif -%} + + {{member.description | escape | nl2br}} + + {%- endif -%} + {%- endfor -%} @@ -79,25 +72,25 @@ {{member.name}} - {% for parameter in member.parameters -%} - {% if parameter %} - {{parameter.name}}{% if parameter.optional%}?{% endif %}: {{ parameter.type.text | escape }} - {% endif %} - {% endfor -%} + {%- for parameter in member.parameters -%} + {%- if parameter -%} + {{parameter.name}}{%- if parameter.optional%}?{%- endif -%}: {{ parameter.type.text | escape }} + {%- endif -%} + {%- endfor -%} - {% if member.return.type.text %} - {{member.return.type.text}} - {% endif %} + {%- if member.return.type.text -%} + {{member.return.type.text | escape}} + {%- endif -%} - {{member.description}} + {{member.description | escape | nl2br}} - {% endfor -%} + {%- endfor -%} {%- endif -%} - {% if declaration.events.length %} + {%- if declaration.events.length -%}

Events

@@ -109,24 +102,24 @@ - {% for event in declaration.events -%} - {% if event.name %} + {%- for event in declaration.events -%} + {%- if event.name -%} - + - {% endif %} - {% endfor -%} + {%- endif -%} + {%- endfor -%}
{{event.name}} - {% if event.type %} - {{ event.type.text }} - {% endif %} + {%- if event.type -%} + {{ event.type.text | escape}} + {%- endif -%} {{event.description}}{{event.description | escape | nl2br}}
- {% endif %} - {% if declaration.slots.length %} + {%- endif -%} + {%- if declaration.slots.length -%}

Slots

@@ -137,17 +130,17 @@ - {% for slot in declaration.slots -%} + {%- for slot in declaration.slots -%} - + - {% endfor -%} + {%- endfor -%}
{{slot.name}}{{slot.description}}{{slot.description | escape | nl2br}}
- {% endif %} - {% if declaration.cssProperties.length %} + {%- endif -%} + {%- if declaration.cssProperties.length -%}

CSS Properties

@@ -158,16 +151,16 @@ - {% for property in declaration.cssProperties %} + {%- for property in declaration.cssProperties -%} - + - {% endfor %} + {%- endfor -%}
{{property.name}}{{property.description}}{{property.description | escape | nl2br}}
- {% endif %} + {%- endif -%}
{%- endif -%} {%- endfor -%} diff --git a/website/src/categories/components/dialog/code.md b/website/src/categories/components/dialog/code.md index 7ebd465669..63279d63c0 100644 --- a/website/src/categories/components/dialog/code.md +++ b/website/src/categories/components/dialog/code.md @@ -50,32 +50,7 @@ magna duis. Voluptate tempor amet cupidatat officia labore ipsum ad do. - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/dialog - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/dialog - ``` -
- -
- +
## Migrating to SLDS Dialog diff --git a/website/src/categories/components/form-field/code.md b/website/src/categories/components/form-field/code.md index 83ae4ce30b..a4f02e8526 100644 --- a/website/src/categories/components/form-field/code.md +++ b/website/src/categories/components/form-field/code.md @@ -9,31 +9,7 @@ eleventyNavigation: key: FormFieldCode --- -
- -## Installation - -With npm - -
- - ```html - npm install @sl-design-system/form - ``` - -
- -With yarn - -
- - ```html - yarn add @sl-design-system/form - ``` -
- -
- +
The `` component fulfills four functions: diff --git a/website/src/categories/components/form/code.md b/website/src/categories/components/form/code.md index 458b5330f8..b84743a598 100644 --- a/website/src/categories/components/form/code.md +++ b/website/src/categories/components/form/code.md @@ -9,31 +9,7 @@ eleventyNavigation: key: FormCode --- -
- -## Installation - -With npm - -
- - ```html - npm install @sl-design-system/form - ``` - -
- -With yarn - -
- - ```html - yarn add @sl-design-system/form - ``` -
- -
- +
The `` component fulfills four functions: diff --git a/website/src/categories/components/inline-message/code.md b/website/src/categories/components/inline-message/code.md index fe5471f4d3..d5de384506 100644 --- a/website/src/categories/components/inline-message/code.md +++ b/website/src/categories/components/inline-message/code.md @@ -39,30 +39,5 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/inline-message - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/inline-message - ``` -
- -
- + {% include "../component-table.njk" %} diff --git a/website/src/categories/components/message-dialog/code.md b/website/src/categories/components/message-dialog/code.md index aacb5257ae..8da3c57cf9 100644 --- a/website/src/categories/components/message-dialog/code.md +++ b/website/src/categories/components/message-dialog/code.md @@ -49,32 +49,7 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/message-dialog - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/message-dialog - ``` -
- -
- +
## Alert diff --git a/website/src/categories/components/popover/code.md b/website/src/categories/components/popover/code.md index c5eec5dd80..625a64e525 100644 --- a/website/src/categories/components/popover/code.md +++ b/website/src/categories/components/popover/code.md @@ -62,32 +62,7 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/popover - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/popover - ``` -
- -
- +
## Opening / closing @@ -130,4 +105,4 @@ closePopoverBtn.addEventListener("click", () => { } }); }) - \ No newline at end of file + diff --git a/website/src/categories/components/radio-group/code.md b/website/src/categories/components/radio-group/code.md index 0e34ba670e..db62e57d57 100644 --- a/website/src/categories/components/radio-group/code.md +++ b/website/src/categories/components/radio-group/code.md @@ -14,27 +14,30 @@ eleventyNavigation:
- What animal do you like best? - - Dog - Cat - Hamster - + + + Dog + Cat + Hamster + +
```html - - Dog - Cat - Hamster - + + + Dog + Cat + Hamster + + ```
- + {%- include "../component-table.njk" -%} diff --git a/website/src/categories/components/radio-group/radio-group.md b/website/src/categories/components/radio-group/radio-group.md index b33b870eb1..3d87f5ae9c 100644 --- a/website/src/categories/components/radio-group/radio-group.md +++ b/website/src/categories/components/radio-group/radio-group.md @@ -12,5 +12,5 @@ eleventyNavigation: parent: Components key: Radio group order: 20 - status: coming + status: ready --- diff --git a/website/src/categories/components/radio-group/usage.md b/website/src/categories/components/radio-group/usage.md index d8487aa9bc..abb4ffda52 100644 --- a/website/src/categories/components/radio-group/usage.md +++ b/website/src/categories/components/radio-group/usage.md @@ -8,106 +8,126 @@ eleventyNavigation:
- - What animal do you like best? - - Dog - Cat - Hamster - - + + + Dog + Cat + Hamster + +
- - ```html - - Dog - Cat - Hamster - + + ```html + + + Dog + Cat + Hamster + + ```
+
## When to use - Radio buttons are best used in situations where users need to make a single selection from multiple options within a defined group. Here are two common scenarios: -
-
-{{'components/radio-group/sl-radio-group-when-use-forms.svg' | svgImage}} -
- ### In forms Radio buttons are commonly used in forms where users need to choose one option from a list, such as selecting a gender, indicating a preference, or specifying a category. -
-
-
- {{'components/radio-group/sl-radio-group-when-use-settings.svg' | svgImage}} -
### Settings and Filters They are also valuable for transitioning between settings within menus, pages, or components. Radio buttons help users make exclusive choices when configuring preferences or filtering content, ensuring a clear and structured user experience. - Additionally, radio buttons can be applied to various interfaces, including tiles, data tables, modals, and side panels, making them versatile tools for improving user interactions and decision-making. -
-
-
+
+
## When not to use While radio buttons are a valuable UI element in many situations, there are instances when it's best to avoid using them: -
-
- {{'components/radio-group/sl-radio-group-when-not-use-multiple.svg' | svgImage}} -
- - ### When Multiple Selections Are Allowed - Radio buttons are intended for exclusive single-choice selection. If your design requires users to select multiple options from a list simultaneously, checkboxes are more appropriate. -
-
+### When Multiple Selections Are Allowed +Radio buttons are intended for exclusive single-choice selection. If your design requires users to select multiple options from a list simultaneously, checkboxes are more appropriate. -
- {{'components/radio-group/sl-radio-group-when-not-use-large-lists.svg' | svgImage}} -
+### For Large Lists +Radio buttons become less practical as the number of options in a list grows. If you have an extensive list of choices, consider alternative UI components like dropdown menus or autocomplete fields to prevent clutter and maintain a cleaner user experience. - ### For Large Lists - Radio buttons become less practical as the number of options in a list grows. If you have an extensive list of choices, consider alternative UI components like dropdown menus or autocomplete fields to prevent clutter and maintain a cleaner user experience. -
-
-
+ +
## Anatomy -{{ 'components/radio-group/sl-radio-group-anatomy.svg' | svgImage }} |Item|Name| Description | Optional| |-|-|-|-| -|1|Radio input (unchecked) |This unmarked state signifies that no option within the associated group has been selected by the user yet.|no| -|2|Radio input (checked) |This marked state indicates that the user has selected a specific option from a group of choices presented in the associated radio button set. |no| -|3|Label |The label explains the purpose or meaning of the radio button and helps users understand the available choices. +|1|Field Label |The group label, positioned at the top of a radio group, explains the purpose or meaning of the radio buttons and helps users understand the available choices |no| +|2|Radio input (unchecked) |This unmarked state signifies that no option within the associated group has been selected by the user yet.|no| +|3|Radio input (checked) |This marked state indicates that the user has selected a specific option from a group of choices presented in the associated radio button set. |no| +|4|Label |The label explains the purpose or meaning of the radio button and helps users understand the available choices.|yes| +|5|Radio groups |The radio groups can be displayed with one option, allowing a maximum of five selections. When the list of choices exceeds the limit, it's advisable to consider alternative design solutions like a dropdown menu or combobox. These options provide a more user-friendly way to navigate and select from more extensive choices.|yes| {.ds-table} +
+ +
+ +## Sizing + +Radio Group come in two sizes, to match diferents scenarios: + + - **Medium:** The medium-sized radio buttons function as the default option across our user interfaces. It achieves a balanced blend of size and clarity, establishing itself as the standard and user-friendly choice for single-choice. + + - **Large:** Opting for the large radio buttons for touch-based devices can offer advantages since it presents a larger tap target. This size facilitates more accessible user interactions. + +
+ + +
+ +## Status + +Radio Group come in two sizes, to match diferents scenarios: + + - **Checked:** The checked status signifies that a user has actively selected that option from a group of choices. It visually indicates the chosen state, this visual cue helps users easily identify which option they have selected among the available choices. + + - **Unchecked:** An unchecked radio button represents a state where the user has not selected that option. Users can choose only one option at a time in a group of radio buttons. Users can click on an unchecked radio button to select it, deselecting any chosen previously option within the same group. + +
+ + +
+ +## Variants + +Radio Group come in various versions, each suited for specific situations: + + - **Default:** The default radio button variant allows users to check or uncheck an option. When a radio button is checked, it indicates that the option is chosen, while when it's unchecked, it means the option is not chosen. + + - **Valid:** The valid variant of a radio button functions as a feedback mechanism, confirming that the chosen option aligns with the correct choice according to established criteria. + + - **Invalid:** This variant is featured in validation processes. When checked, it communicates issues or discrepancies in the entered data, encouraging users to review and change their input, ensuring data accuracy and a smooth user experience. + +
+ +
## Options With these options, you can tweak the appearance of the radio in Figma. They are available in the Design Panel so you can compose the radio (group) to exactly fit the user experience need for the use case you are working on. -{{ 'components/radio-group/sl-radio-group-figma-options.svg' | svgImage }} - |Item|Options|Description| |-|-|-| |Size|`'medium', 'large'`|The button is available in three sizes. If not specified the default value is `medium` .| @@ -121,63 +141,28 @@ With these options, you can tweak the appearance of the radio in Figma. They are
-
+
## Behavior Let's explore the behavior of the radio button: -
-{{'components/radio-group/sl-radio-group-behavior-overflow.svg' | svgImage}} -
- ### Label overflow wrap When a label is too long for the available horizontal space, it wraps to form another line, with the text aligned to the top. -
-
- -
-{{'components/radio-group/sl-radio-group-behavior-clickable-area.svg' | svgImage}} -
### Clickable area The radio has a clickable area around both the checkbox and label for more space to press. We've left a bit of space on the left side to ensure smooth alignment and avoid any unexpected layout issues. -
-
- -
-{{'components/radio-group/sl-radio-group-behavior-focusable-area.svg' | svgImage}} -
### Focusable area Both the radio input and label are interactive elements, allowing users to interact with them. However, when it comes to focusing, whether through keyboard navigation or voice commands, the visible focus state is only visible on the checkbox itself. -
-
- -
-{{'components/radio-group/sl-radio-group-behavior-validation.svg' | svgImage}} -
### Validation -If an issue arises after submitting a form, the help text will switch to an 'invalid' state. This serves as a valuable guide for users, clearly explaining the necessary actions to resolve any problems. -
-
- -
-{{'components/radio-group/sl-radio-group-behavior-exclusive-selection.svg' | svgImage}} -
+If an issue arises after submitting a form, the radio button and the help text will switch to an 'invalid' state. This serves as a valuable guide for users, clearly explaining the necessary actions to resolve any problems. ### Exclusive selection When a user selects one radio button within a group, it becomes the dominant choice, and all other options within the group immediately fade into the background, visually and functionally. This creates a clean and intuitive way for users to make a single, exclusive selection from a list of options. -
-
- -
-{{'components/radio-group/sl-radio-group-behavior-default.svg' | svgImage}} -
### Default checked You have the power to decide the radio button's fate from the start! You can set it to be initially checked or unchecked by default, giving you control (or not) over its state. -
-
+
diff --git a/website/src/categories/components/select/code.md b/website/src/categories/components/select/code.md index c72ce38386..3e957cf20b 100644 --- a/website/src/categories/components/select/code.md +++ b/website/src/categories/components/select/code.md @@ -54,30 +54,5 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/select - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/select - ``` -
- -
- -{% include "../component-table.njk" %} \ No newline at end of file + +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/skeleton/code.md b/website/src/categories/components/skeleton/code.md index 7bd3ea3f6f..06f1d92f4e 100644 --- a/website/src/categories/components/skeleton/code.md +++ b/website/src/categories/components/skeleton/code.md @@ -69,32 +69,7 @@ eleventyNavigation:
- -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/skeleton - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/skeleton - ``` -
- -
- +
## Sizing @@ -105,4 +80,4 @@ When you need to indicate that an avatar or any other element with a round shape
-{% include "../component-table.njk" %} \ No newline at end of file +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/switch/code.md b/website/src/categories/components/switch/code.md index 847ab2292b..271b473e0f 100644 --- a/website/src/categories/components/switch/code.md +++ b/website/src/categories/components/switch/code.md @@ -25,30 +25,7 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/switch - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/switch - ``` -
- +
{% include "../component-table.njk" %} diff --git a/website/src/categories/components/text-field/code.md b/website/src/categories/components/text-field/code.md index 5bdbd7e186..81fa5c119f 100644 --- a/website/src/categories/components/text-field/code.md +++ b/website/src/categories/components/text-field/code.md @@ -25,30 +25,5 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/text-field - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/text-field - ``` -
- -
- + {% include "../component-table.njk" %} diff --git a/website/src/categories/components/textarea/code.md b/website/src/categories/components/textarea/code.md index 02ecacf441..fe4f4b52e1 100644 --- a/website/src/categories/components/textarea/code.md +++ b/website/src/categories/components/textarea/code.md @@ -25,30 +25,5 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/textarea - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/textarea - ``` -
- -
- -{% include "../component-table.njk" %} \ No newline at end of file + +{% include "../component-table.njk" %} diff --git a/website/src/categories/components/tooltip/code.md b/website/src/categories/components/tooltip/code.md index 00f4b430cc..03b0b4dac8 100644 --- a/website/src/categories/components/tooltip/code.md +++ b/website/src/categories/components/tooltip/code.md @@ -36,32 +36,7 @@ eleventyNavigation: - -
- -## Installation - -With npm - -
- - ```bash - npm install @sl-design-system/tooltip - ``` - -
- -With yarn - -
- - ```bash - yarn add @sl-design-system/tooltip - ``` -
- -
- +
## TooltipDirective API diff --git a/website/src/styles/components/code.scss b/website/src/styles/components/code.scss index caa7dd7f5c..62a4e21a5c 100644 --- a/website/src/styles/components/code.scss +++ b/website/src/styles/components/code.scss @@ -8,82 +8,16 @@ $transition-timing: 300ms; pre { border: 1px solid var(--code-border); + border-block-start: 0; border-radius: 0.6rem; - border-top: 0; margin: 0; } } .ds-code__copy-button { - background-color: var(--copy-button-background); - background-image: var(--copy-icon); - background-position: center; - background-repeat: no-repeat; - background-size: 1.4rem; - border: 1px solid var(--copy-button-border); - border-radius: 6px; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - height: 3.2rem; + inset-block-start: 1.6rem; + inset-inline-end: 1.6rem; position: absolute; - right: 1.6rem; - top: 1.6rem; - width: 3.2rem; - - &::before { - background-color: var(--copy-button-background--hover); - background-image: var(--copy-icon--hover); - background-position: center; - background-repeat: no-repeat; - background-size: 1.4rem; - border: 1px solid var(--ds-color-blue); - border-radius: 6px; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - content: ''; - height: 3.2rem; - left: -1px; - opacity: 0; - position: absolute; - top: -1px; - transform: none; - transition: opacity 300ms; - width: 3.2rem; - } - - &:hover::before { - animation: 300ms fade-in; - opacity: 1; - } - - &:active::before { - background-color: var(--copy-button-background--active); - background-image: var(--copy-icon--hover); - background-position: center; - background-repeat: no-repeat; - background-size: 1.4rem; - border: 1px solid var(--ds-color-blue); - box-shadow: none; - content: ''; - height: 3.2rem; - left: -1px; - opacity: 1; - position: absolute; - top: -1px; - width: 3.2rem; - } - - &:active { - box-shadow: none; - } -} - -@keyframes fade-in { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } } .ds-example { @@ -94,7 +28,7 @@ $transition-timing: 300ms; display: flex; gap: 1rem; justify-content: center; - min-height: 16rem; + min-block-size: 16rem; padding: 1.6rem; position: relative; } @@ -116,7 +50,7 @@ $transition-timing: 300ms; } .ds-example + .ds-code { - margin-top: 0; + margin-block-start: 0; pre { border-radius: 0 0 0.6rem 0.6rem; @@ -124,13 +58,14 @@ $transition-timing: 300ms; } .ds-example sl-icon[name='fas-hand-back-point-up'] { - --_icon-container-size: 20px; + --_icon-container-size: 2rem; + background-color: var(--control-color-surface-400-surface); - border-radius: 2px; + border-radius: 0.2rem; color: var(--control-color-surface-100-surface); + inset-block-start: 0.8rem; + inset-inline-end: 0.8rem; position: absolute; - right: 8px; - top: 8px; } .ds-example__code-wrapper { @@ -147,10 +82,11 @@ $transition-timing: 300ms; code { background-color: var(--table-code-background); border-radius: 0.6rem; + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-box-decoration-break: clone; box-decoration-break: clone; - font-family: 'source-code-pro', monospace; + font-family: source-code-pro, monospace; font-size: 1.2rem; line-height: 1rem; padding: 0.2rem 0.8rem; @@ -163,13 +99,13 @@ code[class*='language-'] { box-decoration-break: clone; color: var(--text-color); display: block; - font-family: 'source-code-pro', monospace; + font-family: source-code-pro, monospace; font-size: 1.2rem; hyphens: none; line-height: 1.5; padding: 2.4rem 2rem; tab-size: 4; - text-align: left; + text-align: start; text-shadow: none; word-break: normal; word-spacing: normal; diff --git a/website/src/styles/components/tabs.scss b/website/src/styles/components/tabs.scss index add4cb7cae..1d00b01808 100644 --- a/website/src/styles/components/tabs.scss +++ b/website/src/styles/components/tabs.scss @@ -123,11 +123,11 @@ $transition-timing: 300ms; direction: normal; duration: $transition-timing; iteration-count: 1; - name: tabContent; + name: tab-content; timing-function: ease-in-out; } - .ds-tabs__tab-container > section { + .ds-tabs__tab-container > * { scroll-margin-top: 1rem; &:not(:first-child):not(.no-heading) { @@ -262,7 +262,7 @@ $transition-timing: 300ms; } } -@keyframes tabContent { +@keyframes tab-content { from { opacity: 0; transform: translateY(5%); diff --git a/website/src/styles/typography.scss b/website/src/styles/typography.scss index eadd0b5ab2..f56431c1ae 100644 --- a/website/src/styles/typography.scss +++ b/website/src/styles/typography.scss @@ -1,19 +1,19 @@ @font-face { - font-family: 'the-message'; + font-family: the-message; font-style: normal; font-weight: 400; src: url('./../../assets/fonts/the-message-regular.woff2') format('woff2'); } @font-face { - font-family: 'the-message'; + font-family: the-message; font-style: normal; font-weight: 600; src: url('./../../assets/fonts/the-message-demibold.woff2') format('woff2'); } @font-face { - font-family: 'the-message'; + font-family: the-message; font-style: normal; font-weight: 700; src: url('./../../assets/fonts/the-message-bold.woff2') format('woff2'); @@ -21,7 +21,11 @@ body, button { - font-family: 'source-sans-pro', sans-serif; + font-family: source-sans-pro, sans-serif; + + --typography-body: 1.6rem/2.4rem 'source-sans-pro', sans-serif; + --typography-h2: 600 1.8rem/1 'the-message', sans-serif; + --typography-h2-margin-block: var(--scale-400-scale) var(--scale-100-scale); } h1, @@ -32,7 +36,7 @@ h5, .ds-heading-1, .ds-heading-2, .ds-heading-3 { - font-family: 'the-message', sans-serif; + font-family: the-message, sans-serif; font-weight: 600; } @@ -44,30 +48,29 @@ h1, h2, .ds-heading-2 { - font-size: 1.8rem; - margin-block: var(--scale-400-scale) var(--scale-100-scale); + font: var(--typography-h2); + margin-block: var(--typography-h2-margin-block); } h3, .ds-heading-3 { font-size: 1.6rem; - margin-bottom: var(--scale-100-scale); + margin-block-end: var(--scale-100-scale); } p + h3 { - margin-top: var(--scale-400-scale); + margin-block-start: var(--scale-400-scale); } h4, .ds-heading-4 { font-size: 1.6rem; - margin-bottom: var(--scale-100-scale); + margin-block-end: var(--scale-100-scale); } p, li { - font-size: 1.6rem; - line-height: 2.4rem; + font: var(--typography-body); } p { diff --git a/website/src/ts/components/code-snippet/code-snippet-style.ts b/website/src/ts/components/code-snippet/code-snippet-style.ts new file mode 100644 index 0000000000..2a5e06c5c9 --- /dev/null +++ b/website/src/ts/components/code-snippet/code-snippet-style.ts @@ -0,0 +1,170 @@ +import { css } from 'lit'; + +export const codeSnippetStyles = css` + :host { + margin: 1.6rem 0 2.4rem; + position: relative; + display: block; + background: var(--control-color-surface-100-surface); + overflow: hidden; + border: 1px solid var(--control-color-surface-200-surface); + border-radius: 0.6rem; + border-top: 0; + margin: 0; + } + + sl-button { + position: absolute; + right: 1.6rem; + top: 1.6rem; + } + + pre { + margin: 0; + } + + code { + /* background-color: var(--table-code-background); */ + border-radius: 0.6rem; + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + font-family: 'source-code-pro', monospace; + font-size: 1.2rem; + line-height: 1rem; + padding: 0.2rem 0.8rem; + } + + code[class*='language-'] { + background: none; + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-box-decoration-break: clone; + box-decoration-break: clone; + color: var(--text-color); + display: block; + font-family: 'source-code-pro', monospace; + font-size: 1.2rem; + hyphens: none; + line-height: 1.5; + padding: 2.4rem 2rem; + tab-size: 4; + text-align: left; + text-shadow: none; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + } + + pre[class*='language-'] { + overflow: auto; + padding: 0; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: var(--control-color-code-text-neutral); + } + + .token.punctuation { + color: var(--text-color); + } + + .token.property, + .token.tag, + .token.constant, + .token.symbol, + .token.deleted { + color: var(--control-color-code-text-danger); + } + + .token.keyword, + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable, + .token.boolean, + .token.number { + color: var(--control-color-code-text-success); + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: var(--control-color-code-text-accent); + } + + .token.atrule, + .token.attr-value, + .token.function { + color: var(--text-color); + } + + .token.regex, + .token.important { + color: var(--control-color-code-text-warning); + } + + .token.important, + .token.bold { + font-weight: 700; + } + + .token.italic { + font-style: italic; + } + + .token.entity { + cursor: help; + } + + @media screen and (-ms-high-contrast: active) { + code[class*='language-'], + pre[class*='language-'] { + background: window; + color: windowText; + } + + :not(pre) > code[class*='language-'], + pre[class*='language-'] { + background: window; + } + + .token.important { + background: highlight; + color: window; + font-weight: normal; + } + + .token.atrule, + .token.attr-value, + .token.function, + .token.keyword, + .token.operator, + .token.selector { + font-weight: bold; + } + + .token.attr-value, + .token.comment, + .token.doctype, + .token.function, + .token.keyword, + .token.operator, + .token.property, + .token.string { + color: highlight; + } + + .token.attr-value, + .token.url { + font-weight: normal; + } + } +`; diff --git a/website/src/ts/components/code-snippet/code-snippet.ts b/website/src/ts/components/code-snippet/code-snippet.ts new file mode 100644 index 0000000000..aba77f3026 --- /dev/null +++ b/website/src/ts/components/code-snippet/code-snippet.ts @@ -0,0 +1,37 @@ +import { CSSResultGroup, LitElement, type TemplateResult, html } from 'lit'; +import { customElement, property, queryAssignedNodes } from 'lit/decorators.js'; +import { codeSnippetStyles } from './code-snippet-style'; + +@customElement('ds-code-snippet') +export class CodeSnippet extends LitElement { + /** @private */ + static override styles: CSSResultGroup = codeSnippetStyles; + + @property() language?: string; + + /** @private The slotted code. */ + @queryAssignedNodes({ flatten: true }) code?: Node[]; + + override render(): TemplateResult { + return html` +
+ + + + `; + } + + async #copyCode(): Promise { + if (!this.code) { + return; + } + + await navigator.clipboard.writeText(this.code?.map(node => node.nodeValue).join('')); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'ds-code-snippet': CodeSnippet; + } +} diff --git a/website/src/ts/components/install-info.ts b/website/src/ts/components/install-info.ts new file mode 100644 index 0000000000..c333aa82a1 --- /dev/null +++ b/website/src/ts/components/install-info.ts @@ -0,0 +1,61 @@ +import { LitElement, PropertyValues, type TemplateResult, css, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('ds-install-info') +export class InstallInfo extends LitElement { + @property() package?: string; + @property({ attribute: 'link-in-navigation', type: Boolean }) linkInNavigation = false; + + override render(): TemplateResult { + return html` +
+

+ ${this.linkInNavigation + ? html`Installation` + : html`Installation`} +

+ +

With npm

+ npm install @sl-design-system/${this.package} + +

With yarn

+ yarn add @sl-design-system/${this.package} +
+ `; + } + + override updated(changes: PropertyValues): void { + super.updated(changes); + + if (changes.has('linkInNavigation')) { + if (this.linkInNavigation) { + this.setAttribute('link-in-navigation-text', 'Installation'); + this.setAttribute('id', 'installation'); + } + } + } + + static override styles = css` + :host { + display: block; + font: var(--typography-body); + } + + h2 { + font: var(--typography-h2); + margin-block: var(--typography-h2-margin-block); + } + + a.header-anchor { + color: inherit; + font-size: inherit; + text-decoration: none; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + 'ds-install-info': InstallInfo; + } +} diff --git a/website/src/ts/components/main.ts b/website/src/ts/components/main.ts new file mode 100644 index 0000000000..34ebc25451 --- /dev/null +++ b/website/src/ts/components/main.ts @@ -0,0 +1,2 @@ +import './code-snippet/code-snippet'; +import './install-info'; diff --git a/website/src/ts/scripts/code-component.ts b/website/src/ts/scripts/code-component.ts index d6ec1c9f36..a785338ac1 100644 --- a/website/src/ts/scripts/code-component.ts +++ b/website/src/ts/scripts/code-component.ts @@ -2,10 +2,18 @@ const codeContainers = document.querySelectorAll('.ds-code'); codeContainers.forEach(codeContainer => { if (navigator.clipboard) { - const copyButton = document.createElement('button'); + const copyButton = document.createElement('sl-button'); + const copyButtonIcon = document.createElement('sl-icon'); copyButton.classList.add('ds-code__copy-button'); + copyButton.setAttribute('fill', 'outline'); + copyButton.setAttribute('size', 'md'); + copyButton.setAttribute('icon-only', 'icon-only'); copyButton.setAttribute('aria-label', 'Copy the code'); + + copyButtonIcon.setAttribute('name', 'far-copy'); + + copyButton.appendChild(copyButtonIcon); codeContainer.appendChild(copyButton); copyButton.onclick = async () => { diff --git a/website/src/ts/scripts/main.ts b/website/src/ts/scripts/main.ts index c901783d64..1f995be6c8 100644 --- a/website/src/ts/scripts/main.ts +++ b/website/src/ts/scripts/main.ts @@ -1,4 +1,4 @@ import './code-component'; import './navigation'; -import './tabs'; import './slds-components'; +import './tabs'; diff --git a/website/src/ts/scripts/slds-components.ts b/website/src/ts/scripts/slds-components.ts index 4d34ca2908..062c31801a 100644 --- a/website/src/ts/scripts/slds-components.ts +++ b/website/src/ts/scripts/slds-components.ts @@ -27,7 +27,14 @@ import '@sl-design-system/tooltip/register.js'; import { MessageDialog } from '@sl-design-system/message-dialog'; import { setup } from '@sl-design-system/sanoma-learning'; import { Icon } from '@sl-design-system/icon'; -import { faBug, faCode, faMessagesQuestion, faPenToSquare, faPencilRuler } from '@fortawesome/pro-regular-svg-icons'; +import { + faBug, + faCode, + faCopy, + faMessagesQuestion, + faPenToSquare, + faPencilRuler +} from '@fortawesome/pro-regular-svg-icons'; import { faEnvelope, faHandBackPointUp, faSchool, faScreenUsers } from '@fortawesome/pro-solid-svg-icons'; import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons'; @@ -44,7 +51,8 @@ Icon.register( faPencilRuler, faSchool, faScreenUsers, - faSlack + faSlack, + faCopy ); declare global { diff --git a/website/src/ts/scripts/tabs.ts b/website/src/ts/scripts/tabs.ts index 71ec65872b..9d33ebc0e8 100644 --- a/website/src/ts/scripts/tabs.ts +++ b/website/src/ts/scripts/tabs.ts @@ -149,7 +149,8 @@ function generateVerticalTabs(verticalTabContent: Element): void { verticalIndicator.classList.add('ds-tabs__vertical-indicator'); verticalSlider.appendChild(verticalIndicator); - headerAnchors = verticalTabContent.querySelectorAll('.header-anchor'); + headerAnchors = verticalTabContent.querySelectorAll('.header-anchor, [link-in-navigation]'); + const headerAnchorsParents = Array.from(headerAnchors) .map(element => { if (element.parentElement?.tagName === 'H2') { @@ -157,6 +158,8 @@ function generateVerticalTabs(verticalTabContent: Element): void { (element.parentElement.parentNode as Element).id = element.parentElement.id; } return element.parentElement; + } else if (element.hasAttribute('link-in-navigation')) { + return element as HTMLElement; } return; }) @@ -168,9 +171,16 @@ function generateVerticalTabs(verticalTabContent: Element): void { headerAnchorsParents.forEach(headerAnchorParent => { if (headerAnchorParent) { const verticalTab = document.createElement('a'); - verticalTab.setAttribute('href', `#${headerAnchorParent.id}`); - verticalTab.textContent = headerAnchorParent.textContent; if (headerAnchorParent.tagName === 'H2') { + verticalTab.textContent = headerAnchorParent.textContent; + headerAnchorParent?.parentElement?.setAttribute('aria-labelledby', verticalTab.id); + } else if (headerAnchorParent.getAttribute('link-in-navigation-text')) { + verticalTab.textContent = headerAnchorParent.getAttribute('link-in-navigation-text'); + headerAnchorParent.setAttribute('aria-labelledby', verticalTab.id); + } + + if (headerAnchorParent.tagName === 'H2' || headerAnchorParent.getAttribute('link-in-navigation-text')) { + verticalTab.setAttribute('href', `#${headerAnchorParent.id}`); verticalTab.classList.add('ds-tab--vertical'); verticalTab.setAttribute('role', 'tab'); verticalTab.setAttribute('tabindex', '-1'); @@ -178,7 +188,6 @@ function generateVerticalTabs(verticalTabContent: Element): void { verticalTab.setAttribute('aria-selected', 'false'); verticalTab.setAttribute('aria-controls', headerAnchorParent.id); verticalTabs.push(verticalTab); - headerAnchorParent?.parentElement?.setAttribute('aria-labelledby', verticalTab.id); } verticalTabs[0].classList.add('active'); } @@ -328,7 +337,7 @@ function selectTab(tab: Element): void { observer.observe(tabsContainer as Element); } - const tabSections = tabContent?.querySelectorAll('section[id]'); + const tabSections = tabContent?.querySelectorAll('section[id], [link-in-navigation][id]'); tabSections?.forEach(section => { section.setAttribute('role', 'tabpanel'); });