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