@public-ui/components 4.1.4 → 4.1.5-rc.1

package/dist/{esm/variant-quote-DI6q8gPw.js.map → kolibri/variant-quote-y0Z1TRdz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"variant-quote-DI6q8gPw.js","sources":["src/internal/functional-components/base-web-component.ts","src/internal/props/loading.ts","src/internal/props/variant-quote.ts"],"sourcesContent":["import type { ComponentApi, InternalOf, StateAccess } from './generic-types';\n\n/**\n * Throws when a stateless controller accidentally attempts to read or write state.\n * Used as the implementation behind {@link BaseWebComponent.stateLess}.\n */\nfunction throwNoStateAccess(): never {\n\tthrow new Error('This controller does not use component state.');\n}\n\n/**\n * Base class for web components that provides type-safe state access.\n * Subclasses pass `this.stateAccess` to their controller constructors, ensuring\n * that all state reads and writes are validated against Api['States'] at compile time.\n */\nexport abstract class BaseWebComponent<Api extends ComponentApi> {\n\t/**\n\t * Frozen sentinel for controllers that do not need component state.\n\t * Both `setState` and `getState` throw if called, catching accidental\n\t * state access at runtime.\n\t *\n\t * Pass this to the controller constructor in web components whose\n\t * controller only uses render props (no `@State` fields).\n\t */\n\tpublic static readonly stateLess: StateAccess<never> = Object.freeze({\n\t\tsetState: throwNoStateAccess,\n\t\tgetState: throwNoStateAccess,\n\t});\n\n\t/**\n\t * Bundled state access for passing to controllers.\n\t * Writes trigger a Stencil re-render via the @State decorator on the subclass.\n\t */\n\tprotected readonly stateAccess: StateAccess<Api> = {\n\t\tsetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K, value: InternalOf<NonNullable<Api['States']>>[K]): void => {\n\t\t\t(this as Record<string, unknown>)[key as string] = value;\n\t\t},\n\t\tgetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K): InternalOf<NonNullable<Api['States']>>[K] => {\n\t\t\treturn (this as Record<string, unknown>)[key as string] as InternalOf<NonNullable<Api['States']>>[K];\n\t\t},\n\t};\n}\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Loading prop for lazy-loading behavior of embedded content\n *\n * Description:\n * The loading attribute controls when the browser should start fetching the resource.\n * Lazy loading defers loading of off-screen content until it is near the viewport,\n * improving initial page load performance.\n *\n * Usage (according to W3C HTML specification):\n * - \"lazy\": Defers loading until the element approaches the viewport\n * - \"eager\": Loads the resource immediately regardless of viewport position\n * - Default is \"lazy\" to optimize performance\n *\n * Accessibility:\n * - Lazy loading must not interfere with assistive technology access to content\n * - Content must be available when focused or navigated to via keyboard (WCAG 2.1.1 Keyboard)\n * - Ensure lazy-loaded content does not cause unexpected layout shifts (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html\n */\nconst LOADING_OPTIONS = ['eager', 'lazy'] as const;\nexport type LoadingType = (typeof LOADING_OPTIONS)[number];\nexport type LoadingProp = SimpleProp<'loading', LoadingType>;\n\nconst LOADING_SET: ReadonlySet<string> = new Set(LOADING_OPTIONS);\n\nexport const loadingProp = createPropDefinition<LoadingProp>(\n\t'loading',\n\t'lazy',\n\t(value: unknown) => normalizeString(value) as LoadingType,\n\t(v) => LOADING_SET.has(v),\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for quotation display style\n *\n * Description:\n * Determines whether the quotation is rendered as a block-level (<blockquote>) or\n * inline (<q>) element. The choice affects both visual layout and semantic HTML structure.\n *\n * Usage (according to W3C HTML specification):\n * - \"block\": Renders as <blockquote> — for extended, standalone quotations from an external source\n * - \"inline\": Renders as <q> — for short inline quotations within flowing text (default)\n * - The browser automatically adds appropriate quotation marks around <q> elements\n * - Both elements support the cite attribute to reference the quotation source\n *\n * Accessibility:\n * - Semantic HTML elements (<blockquote>, <q>) help assistive technologies convey content structure\n * - The quotation structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Block quotes are announced as distinct sections by screen readers\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nconst QUOTE_VARIANT_OPTIONS = ['block', 'inline'] as const;\nexport type QuoteVariantType = (typeof QUOTE_VARIANT_OPTIONS)[number];\nexport type VariantQuoteProp = SimpleProp<'variant', QuoteVariantType>;\n\nconst QUOTE_VARIANT_SET: ReadonlySet<string> = new Set(QUOTE_VARIANT_OPTIONS);\n\nexport const variantQuoteProp = createPropDefinition<VariantQuoteProp>(\n\t'variant',\n\t'inline',\n\t(value: unknown) => normalizeString(value) as QuoteVariantType,\n\t(v) => QUOTE_VARIANT_SET.has(v),\n);\n"],"names":[],"mappings":";;;;;AAMA,SAAS,kBAAkB,GAAA;AAC1B,IAAA,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC;AACjE;MAOsB,gBAAgB,CAAA;AAAtC,IAAA,WAAA,GAAA;QAkBoB,IAAA,CAAA,WAAW,GAAqB;AAClD,YAAA,QAAQ,EAAE,CAAyD,GAAM,EAAE,KAAgD,KAAU;AACnI,gBAAA,IAAgC,CAAC,GAAa,CAAC,GAAG,KAAK;aACxD;AACD,YAAA,QAAQ,EAAE,CAAyD,GAAM,KAA+C;AACvH,gBAAA,OAAQ,IAAgC,CAAC,GAAa,CAA8C;aACpG;SACD;;;AAhBsB,gBAAA,CAAA,SAAS,GAAuB,MAAM,CAAC,MAAM,CAAC;AACpE,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,CAAA,CAAC;;ACFH,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU;AAIlD,MAAM,WAAW,GAAwB,IAAI,GAAG,CAAC,eAAe,CAAC;AAE1D,MAAM,WAAW,GAAG,oBAAoB,CAC9C,SAAS,EACT,MAAM,EACN,CAAC,KAAc,KAAK,eAAe,CAAC,KAAK,CAAgB,EACzD,CAAC,CAAC,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;;ACT1B,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;AAI1D,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAG,oBAAoB,CACnD,SAAS,EACT,QAAQ,EACR,CAAC,KAAc,KAAK,eAAe,CAAC,KAAK,CAAqB,EAC9D,CAAC,CAAC,KAAK,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;;;"}
+{"version":3,"file":"variant-quote-y0Z1TRdz.js","sources":["src/internal/functional-components/base-web-component.ts","src/internal/props/loading.ts","src/internal/props/variant-quote.ts"],"sourcesContent":["import type { ComponentApi, InternalOf, StateAccess } from './generic-types';\n\n/**\n * Throws when a stateless controller accidentally attempts to read or write state.\n * Used as the implementation behind {@link BaseWebComponent.stateLess}.\n */\nfunction throwNoStateAccess(): never {\n\tthrow new Error('This controller does not use component state.');\n}\n\n/**\n * Base class for web components that provides type-safe state access.\n * Subclasses pass `this.stateAccess` to their controller constructors, ensuring\n * that all state reads and writes are validated against Api['States'] at compile time.\n */\nexport abstract class BaseWebComponent<Api extends ComponentApi> {\n\t/**\n\t * Frozen sentinel for controllers that do not need component state.\n\t * Both `setState` and `getState` throw if called, catching accidental\n\t * state access at runtime.\n\t *\n\t * Pass this to the controller constructor in web components whose\n\t * controller only uses render props (no `@State` fields).\n\t */\n\tpublic static readonly stateLess: StateAccess<never> = Object.freeze({\n\t\tsetState: throwNoStateAccess,\n\t\tgetState: throwNoStateAccess,\n\t});\n\n\t/**\n\t * Bundled state access for passing to controllers.\n\t * Writes trigger a Stencil re-render via the @State decorator on the subclass.\n\t */\n\tprotected readonly stateAccess: StateAccess<Api> = {\n\t\tsetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K, value: InternalOf<NonNullable<Api['States']>>[K]): void => {\n\t\t\t(this as Record<string, unknown>)[key as string] = value;\n\t\t},\n\t\tgetState: <K extends keyof InternalOf<NonNullable<Api['States']>>>(key: K): InternalOf<NonNullable<Api['States']>>[K] => {\n\t\t\treturn (this as Record<string, unknown>)[key as string] as InternalOf<NonNullable<Api['States']>>[K];\n\t\t},\n\t};\n}\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Loading prop for lazy-loading behavior of embedded content\n *\n * Description:\n * The loading attribute controls when the browser should start fetching the resource.\n * Lazy loading defers loading of off-screen content until it is near the viewport,\n * improving initial page load performance.\n *\n * Usage (according to W3C HTML specification):\n * - \"lazy\": Defers loading until the element approaches the viewport\n * - \"eager\": Loads the resource immediately regardless of viewport position\n * - Default is \"lazy\" to optimize performance\n *\n * Accessibility:\n * - Lazy loading must not interfere with assistive technology access to content\n * - Content must be available when focused or navigated to via keyboard (WCAG 2.1.1 Keyboard)\n * - Ensure lazy-loaded content does not cause unexpected layout shifts (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes\n * @see https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html\n */\nconst LOADING_OPTIONS = ['eager', 'lazy'] as const;\nexport type LoadingType = (typeof LOADING_OPTIONS)[number];\nexport type LoadingProp = SimpleProp<'loading', LoadingType>;\n\nconst LOADING_SET: ReadonlySet<string> = new Set(LOADING_OPTIONS);\n\nexport const loadingProp = createPropDefinition<LoadingProp>(\n\t'loading',\n\t'lazy',\n\t(value: unknown) => normalizeString(value) as LoadingType,\n\t(v) => LOADING_SET.has(v),\n);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for quotation display style\n *\n * Description:\n * Determines whether the quotation is rendered as a block-level (<blockquote>) or\n * inline (<q>) element. The choice affects both visual layout and semantic HTML structure.\n *\n * Usage (according to W3C HTML specification):\n * - \"block\": Renders as <blockquote> — for extended, standalone quotations from an external source\n * - \"inline\": Renders as <q> — for short inline quotations within flowing text (default)\n * - The browser automatically adds appropriate quotation marks around <q> elements\n * - Both elements support the cite attribute to reference the quotation source\n *\n * Accessibility:\n * - Semantic HTML elements (<blockquote>, <q>) help assistive technologies convey content structure\n * - The quotation structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\n * - Block quotes are announced as distinct sections by screen readers\n *\n * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element\n * @see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element\n * @see https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html\n */\nconst QUOTE_VARIANT_OPTIONS = ['block', 'inline'] as const;\nexport type QuoteVariantType = (typeof QUOTE_VARIANT_OPTIONS)[number];\nexport type VariantQuoteProp = SimpleProp<'variant', QuoteVariantType>;\n\nconst QUOTE_VARIANT_SET: ReadonlySet<string> = new Set(QUOTE_VARIANT_OPTIONS);\n\nexport const variantQuoteProp = createPropDefinition<VariantQuoteProp>(\n\t'variant',\n\t'inline',\n\t(value: unknown) => normalizeString(value) as QuoteVariantType,\n\t(v) => QUOTE_VARIANT_SET.has(v),\n);\n"],"names":[],"mappings":";;;;;AAMA,SAAS,kBAAkB,GAAA;AAC1B,IAAA,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC;AACjE;MAOsB,gBAAgB,CAAA;AAAtC,IAAA,WAAA,GAAA;QAkBoB,IAAA,CAAA,WAAW,GAAqB;AAClD,YAAA,QAAQ,EAAE,CAAyD,GAAM,EAAE,KAAgD,KAAU;AACnI,gBAAA,IAAgC,CAAC,GAAa,CAAC,GAAG,KAAK;aACxD;AACD,YAAA,QAAQ,EAAE,CAAyD,GAAM,KAA+C;AACvH,gBAAA,OAAQ,IAAgC,CAAC,GAAa,CAA8C;aACpG;SACD;;;AAhBsB,gBAAA,CAAA,SAAS,GAAuB,MAAM,CAAC,MAAM,CAAC;AACpE,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,CAAA,CAAC;;ACFH,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU;AAIlD,MAAM,WAAW,GAAwB,IAAI,GAAG,CAAC,eAAe,CAAC;AAE1D,MAAM,WAAW,GAAG,oBAAoB,CAC9C,SAAS,EACT,MAAM,EACN,CAAC,KAAc,KAAK,eAAe,CAAC,KAAK,CAAgB,EACzD,CAAC,CAAC,KAAK,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC;;ACT1B,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;AAI1D,MAAM,iBAAiB,GAAwB,IAAI,GAAG,CAAC,qBAAqB,CAAC;AAEtE,MAAM,gBAAgB,GAAG,oBAAoB,CACnD,SAAS,EACT,QAAQ,EACR,CAAC,KAAc,KAAK,eAAe,CAAC,KAAK,CAAqB,EAC9D,CAAC,CAAC,KAAK,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;;;;"}

package/dist/types/components/card/component.d.ts

@@ -2,20 +2,20 @@ import type { JSX } from '../../stencil-public-runtime';
 import type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';
 export declare class KolCardWc implements CardAPI {
     private readonly host?;
-    private readonly nonce;
     private readonly translateClose;
     private readonly close;
     private readonly on;
     render(): JSX.Element;
-    _on?: KoliBriCardEventCallbacks;
     _hasCloser?: boolean;
+    _headingId?: string;
     _label: LabelPropType;
     _level?: HeadingLevel;
+    _on?: KoliBriCardEventCallbacks;
     state: CardStates;
     private validateOnValue;
-    validateOn(value?: KoliBriCardEventCallbacks): void;
     validateHasCloser(value?: HasCloserPropType): void;
     validateLabel(value?: LabelPropType): void;
     validateLevel(value?: HeadingLevel): void;
+    validateOn(value?: KoliBriCardEventCallbacks): void;
     componentWillLoad(): void;
 }

package/dist/types/components/component-list.d.ts

@@ -12,7 +12,6 @@ import { KolCombobox } from './combobox/shadow';
 import { KolDetails } from './details/shadow';
 import { KolDialogWc } from './dialog/component';
 import { KolDialog } from './dialog/shadow';
-import { KolDrawer } from './drawer/shadow';
 import { KolForm } from './form/shadow';
 import { KolHeading } from './heading/component';
 import { KolIcon } from './icon/component';
@@ -53,4 +52,4 @@ import { KolTreeItem } from './tree-item/shadow';
 import { KolTreeWc } from './tree/component';
 import { KolTree } from './tree/shadow';
 import { KolVersion } from './version/shadow';
-export declare const COMPONENTS: (typeof KolAbbr | typeof KolAccordion | typeof KolAlert | typeof KolAvatar | typeof KolBadge | typeof KolBreadcrumb | typeof KolButtonLink | typeof KolButtonWc | typeof KolButton | typeof KolCard | typeof KolCombobox | typeof KolDetails | typeof KolDialogWc | typeof KolDialog | typeof KolDrawer | typeof KolForm | typeof KolHeading | typeof KolIcon | typeof KolImage | typeof KolInputCheckbox | typeof KolInputColor | typeof KolInputDate | typeof KolInputEmail | typeof KolInputFile | typeof KolInputNumber | typeof KolInputPassword | typeof KolInputRadio | typeof KolInputRange | typeof KolInputText | typeof KolKolibri | typeof KolLinkButton | typeof KolLinkWc | typeof KolLink | typeof KolMeter | typeof KolModal | typeof KolNav | typeof KolPagination | typeof KolPopoverButton | typeof KolProgress | typeof KolQuote | typeof KolSelect | typeof KolSingleSelect | typeof KolSkipNav | typeof KolSpin | typeof KolSplitButton | typeof KolTabs | typeof KolTextarea | typeof KolToastContainer | typeof KolToolbar | typeof KolTooltipWc | typeof KolTreeItemWc | typeof KolTreeItem | typeof KolTreeWc | typeof KolTree | typeof KolVersion)[];
+export declare const COMPONENTS: (typeof KolAbbr | typeof KolAccordion | typeof KolAlert | typeof KolAvatar | typeof KolBadge | typeof KolBreadcrumb | typeof KolButtonLink | typeof KolButtonWc | typeof KolButton | typeof KolCard | typeof KolCombobox | typeof KolDetails | typeof KolDialogWc | typeof KolDialog | typeof KolForm | typeof KolHeading | typeof KolIcon | typeof KolImage | typeof KolInputCheckbox | typeof KolInputColor | typeof KolInputDate | typeof KolInputEmail | typeof KolInputFile | typeof KolInputNumber | typeof KolInputPassword | typeof KolInputRadio | typeof KolInputRange | typeof KolInputText | typeof KolKolibri | typeof KolLinkButton | typeof KolLinkWc | typeof KolLink | typeof KolMeter | typeof KolModal | typeof KolNav | typeof KolPagination | typeof KolPopoverButton | typeof KolProgress | typeof KolQuote | typeof KolSelect | typeof KolSingleSelect | typeof KolSkipNav | typeof KolSpin | typeof KolSplitButton | typeof KolTabs | typeof KolTextarea | typeof KolToastContainer | typeof KolToolbar | typeof KolTooltipWc | typeof KolTreeItemWc | typeof KolTreeItem | typeof KolTreeWc | typeof KolTree | typeof KolVersion)[];

package/dist/types/components/dialog/component.d.ts

@@ -1,21 +1,28 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { DialogAPI, DialogStates, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';
+import type { DialogAPI, DialogStates, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';
 import type { ModalVariantPropType } from '../../schema/props/variant/modal';
 export declare class KolDialogWc implements DialogAPI {
     private readonly host?;
     private refDialog?;
+    private readonly cardHeadingId;
+    private isModal;
+    private readonly _cardOn;
     disconnectedCallback(): void;
     private handleNativeCloseEvent;
+    show(modal?: boolean): Promise<void>;
+    showModal(): Promise<void>;
     openModal(): Promise<void>;
+    close(): Promise<void>;
     closeModal(): Promise<void>;
-    private readonly on;
     render(): JSX.Element;
     _label: LabelPropType;
+    _level?: HeadingLevel;
     _on?: KoliBriDialogEventCallbacks;
     _width?: string;
     _variant?: ModalVariantPropType;
     state: DialogStates;
     validateLabel(value?: LabelPropType): void;
+    validateLevel(value?: HeadingLevel): void;
     validateOn(value?: KoliBriDialogEventCallbacks): void;
     validateWidth(value?: string): void;
     validateVariant(value?: ModalVariantPropType): void;

package/dist/types/components/dialog/shadow.d.ts

@@ -1,13 +1,17 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { DialogProps, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';
+import type { DialogProps, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';
 import type { ModalVariantPropType } from '../../schema/props/variant/modal';
 export declare class KolDialog implements DialogProps {
     private dialogRef?;
     private readonly catchRef;
     openModal(): Promise<void>;
+    showModal(): Promise<void>;
+    show(modal?: boolean): Promise<void>;
+    close(): Promise<void>;
     closeModal(): Promise<void>;
     render(): JSX.Element;
     _label: LabelPropType;
+    _level?: HeadingLevel;
     _on?: KoliBriDialogEventCallbacks;
     _width?: string;
     _variant?: ModalVariantPropType;

package/dist/types/components/drawer/shadow.d.ts

@@ -1,11 +1,16 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';
+import type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, HeadingLevel, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';
 export declare class KolDrawer implements DrawerAPI {
     private readonly host?;
     private dialogElement?;
     private dialogWrapperElement?;
+    private readonly cardHeadingId;
+    private isModal;
+    show(modal?: boolean): Promise<void>;
+    showModal(): Promise<void>;
     open(): Promise<void>;
     close(): Promise<void>;
+    private readonly _cardOn;
     private getWrapperRef;
     private renderDialogContent;
     private getRef;
@@ -14,17 +19,19 @@ export declare class KolDrawer implements DrawerAPI {
     _align?: AlignPropType;
     _hasCloser?: boolean;
     _label: LabelPropType;
+    _level?: HeadingLevel;
     _on?: KoliBriModalEventCallbacks;
     state: DrawerStates;
     validateLabel(value?: LabelPropType): void;
     validateAlign(value?: AlignPropType): void;
     validateHasCloser(value?: HasCloserPropType): void;
+    validateLevel(value?: HeadingLevel): void;
     validateOpen(value?: OpenPropType): void;
     private openOrCloseBasedOnState;
     validateOn(value?: KoliBriModalEventCallbacks): void;
     private handleCloseDialog;
-    private handleClose;
-    private handleAnimationEnd;
+    private readonly handleClose;
+    private readonly handleAnimationEnd;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;

package/dist/types/components/modal/shadow.d.ts

@@ -5,6 +5,9 @@ export declare class KolModal implements DialogProps {
     private dialogRef?;
     private readonly catchRef;
     openModal(): Promise<void>;
+    showModal(): Promise<void>;
+    show(modal?: boolean): Promise<void>;
+    close(): Promise<void>;
     closeModal(): Promise<void>;
     render(): JSX.Element;
     _label: LabelPropType;

package/dist/types/components/table-stateful/shadow.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { FixedColsPropType, HasSettingsMenuPropType, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, LabelPropType, PaginationPositionPropType, Stringified, TableAPI, TableDataFootPropType, TableDataPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TableStates } from '../../schema';
+import type { FixedColsPropType, HasSettingsMenuPropType, KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps, LabelPropType, PaginationPositionPropType, Stringified, TableAPI, TableDataFootPropType, TableDataPropType, TableSelectionPropType, TableStatefulCallbacksPropType, TableStates, VariantClassNamePropType } from '../../schema';
 export declare class KolTableStateful implements TableAPI {
     private readonly host?;
     private tableWcRef?;
@@ -20,6 +20,7 @@ export declare class KolTableStateful implements TableAPI {
     _selection?: TableSelectionPropType;
     _on?: TableStatefulCallbacksPropType;
     _hasSettingsMenu?: HasSettingsMenuPropType;
+    _variant?: VariantClassNamePropType;
     state: TableStates;
     validateAllowMultiSort(value?: boolean): void;
     validateData(value?: TableDataPropType): void;

package/dist/types/components/table-stateless/component.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { FixedColsPropType, HasSettingsMenuPropType, KoliBriTableHeaderCell, LabelPropType, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatelessAPI, TableStatelessStates } from '../../schema';
+import type { FixedColsPropType, HasSettingsMenuPropType, KoliBriTableHeaderCell, LabelPropType, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatelessAPI, TableStatelessStates, VariantClassNamePropType } from '../../schema';
 export declare class KolTableStatelessWc implements TableStatelessAPI {
     private readonly host?;
     private readonly translateNoEntries;
@@ -26,6 +26,7 @@ export declare class KolTableStatelessWc implements TableStatelessAPI {
     _label: string;
     _on?: TableCallbacksPropType;
     _selection?: TableSelectionPropType;
+    _variant?: VariantClassNamePropType;
     _hasSettingsMenu?: HasSettingsMenuPropType;
     validateHasSettingsMenu(value?: HasSettingsMenuPropType): void;
     validateData(value?: TableDataPropType): void;
@@ -35,6 +36,7 @@ export declare class KolTableStatelessWc implements TableStatelessAPI {
     validateLabel(value?: LabelPropType): void;
     validateOn(value?: TableCallbacksPropType): void;
     validateSelection(value?: TableSelectionPropType): void;
+    validateVariantClassName(value?: VariantClassNamePropType): void;
     handleKeyDown(event: KeyboardEvent): void;
     componentDidRender(): void;
     componentDidLoad(): void;

package/dist/types/components/table-stateless/shadow.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from '../../stencil-public-runtime';
-import type { FixedColsPropType, HasSettingsMenuPropType, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatelessProps } from '../../schema';
+import type { FixedColsPropType, HasSettingsMenuPropType, TableCallbacksPropType, TableDataFootPropType, TableDataPropType, TableHeaderCellsPropType, TableSelectionPropType, TableStatelessProps, VariantClassNamePropType } from '../../schema';
 export declare class KolTableStateless implements TableStatelessProps {
     _data: TableDataPropType;
     _dataFoot?: TableDataFootPropType;
@@ -9,5 +9,6 @@ export declare class KolTableStateless implements TableStatelessProps {
     _on?: TableCallbacksPropType;
     _selection?: TableSelectionPropType;
     _hasSettingsMenu?: HasSettingsMenuPropType;
+    _variant?: VariantClassNamePropType;
     render(): JSX.Element;
 }

package/dist/types/components.d.ts

@@ -568,6 +568,11 @@ export namespace Components {
           * @default false
          */
         "_hasCloser"?: boolean;
+        /**
+          * Defines the ID of the heading element. If not provided, an internal ID will be generated.
+          * @default nonce()
+         */
+        "_headingId"?: string;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -741,6 +746,11 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Defines the modal callback functions.
          */
@@ -758,11 +768,25 @@ export namespace Components {
         /**
           * Closes the dialog.
          */
+        "close": () => Promise<void>;
+        /**
+          * Closes the dialog.
+          * @deprecated Use close() instead.
+         */
         "closeModal": () => Promise<void>;
         /**
           * Opens the dialog.
+          * @deprecated Use showModal() instead.
          */
         "openModal": () => Promise<void>;
+        /**
+          * Opens the dialog. Pass true to open as a modal dialog.
+         */
+        "show": (modal?: boolean) => Promise<void>;
+        /**
+          * Opens the dialog as a modal.
+         */
+        "showModal": () => Promise<void>;
     }
     /**
      * https://en.wikipedia.org/wiki/Modal_window
@@ -772,6 +796,11 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Defines the modal callback functions.
          */
@@ -787,13 +816,27 @@ export namespace Components {
          */
         "_width"?: string;
         /**
-          * Closes the modal dialog.
+          * Closes the dialog.
+         */
+        "close": () => Promise<void>;
+        /**
+          * Closes the dialog.
+          * @deprecated Use close() instead.
          */
         "closeModal": () => Promise<void>;
         /**
-          * Opens the modal dialog.
+          * Opens the dialog as a modal.
+          * @deprecated Use showModal() instead.
          */
         "openModal": () => Promise<void>;
+        /**
+          * Opens the dialog. Pass true to open as a modal dialog.
+         */
+        "show": (modal?: boolean) => Promise<void>;
+        /**
+          * Opens the dialog as a modal.
+         */
+        "showModal": () => Promise<void>;
     }
     interface KolDrawer {
         /**
@@ -810,6 +853,11 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Specifies the EventCallback function to be called when the drawer is closing.
          */
@@ -824,8 +872,17 @@ export namespace Components {
         "close": () => Promise<void>;
         /**
           * Opens the drawer.
+          * @deprecated Use show() or showModal() instead.
          */
         "open": () => Promise<void>;
+        /**
+          * Opens the drawer. Pass true to open as a modal drawer.
+         */
+        "show": (modal?: boolean) => Promise<void>;
+        /**
+          * Opens the drawer as a modal.
+         */
+        "showModal": () => Promise<void>;
     }
     /**
      * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
@@ -2477,11 +2534,25 @@ export namespace Components {
         /**
           * Closes the modal dialog.
          */
+        "close": () => Promise<void>;
+        /**
+          * Closes the modal dialog.
+          * @deprecated Use close() instead.
+         */
         "closeModal": () => Promise<void>;
         /**
           * Opens the modal dialog.
+          * @deprecated Use showModal() instead.
          */
         "openModal": () => Promise<void>;
+        /**
+          * Opens the dialog. Pass true to open as a modal dialog.
+         */
+        "show": (modal?: boolean) => Promise<void>;
+        /**
+          * Opens the dialog as a modal.
+         */
+        "showModal": () => Promise<void>;
     }
     /**
      * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.
@@ -3390,6 +3461,10 @@ export namespace Components {
           * Defines how rows can be selected and the current selection.
          */
         "_selection"?: TableSelectionPropType;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
         /**
           * Returns the selected rows.
          */
@@ -3432,6 +3507,10 @@ export namespace Components {
           * Defines how rows can be selected and the current selection.
          */
         "_selection"?: TableSelectionPropType;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolTableStatelessWc {
         /**
@@ -3466,6 +3545,10 @@ export namespace Components {
           * Defines how rows can be selected and the current selection.
          */
         "_selection"?: TableSelectionPropType;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     /**
      * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.
@@ -5320,6 +5403,11 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Defines the modal callback functions.
          */
@@ -5343,6 +5431,11 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Defines the modal callback functions.
          */
@@ -5373,6 +5466,11 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label": LabelPropType;
+        /**
+          * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.
+          * @default 0
+         */
+        "_level"?: HeadingLevel;
         /**
           * Specifies the EventCallback function to be called when the drawer is closing.
          */
@@ -7613,6 +7711,10 @@ declare namespace LocalJSX {
           * Defines how rows can be selected and the current selection.
          */
         "_selection"?: TableSelectionPropType;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolTableStateless {
         /**
@@ -7647,6 +7749,10 @@ declare namespace LocalJSX {
           * Defines how rows can be selected and the current selection.
          */
         "_selection"?: TableSelectionPropType;
+        /**
+          * Defines which variant should be used for presentation.
+         */
+        "_variant"?: VariantClassNamePropType;
     }
     interface KolTableStatelessWc {
         /**

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+export { getDefaultThemeName } from 'adopted-style-sheets';
 export * from './components.d';
 export { setCurrentLocation } from './components/link/ariaCurrentService';
 export { ToasterService } from './components/toaster/toaster';

package/dist/types/schema/components/dialog.d.ts

@@ -1,16 +1,18 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel } from '../props';
+import type { HeadingLevel, PropLabel } from '../props';
 import type { PropDialogVariant } from '../props/variant/dialog';
 import type { KoliBriModalEventCallbacks } from '../types';
 type RequiredProps = PropLabel;
 type OptionalProps = {
     on: KoliBriModalEventCallbacks;
     width: string;
+    level?: HeadingLevel;
 } & PropDialogVariant;
 type RequiredStates = {
     width: string;
 } & PropLabel;
 type OptionalStates = {
+    level?: HeadingLevel;
     on: KoliBriModalEventCallbacks;
 } & PropDialogVariant;
 export type DialogProps = Generic.Element.Members<RequiredProps, OptionalProps>;

package/dist/types/schema/components/drawer.d.ts

@@ -1,12 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropAlign, PropHasCloser, PropLabel, PropOpen } from '../props';
+import type { HeadingLevel, PropAlign, PropHasCloser, PropLabel, PropOpen } from '../props';
 import type { KoliBriModalEventCallbacks } from '../types';
 type RequiredProps = PropLabel;
 type OptionalProps = PropAlign & PropHasCloser & PropOpen & {
+    level?: HeadingLevel;
     on: KoliBriModalEventCallbacks;
 };
 type RequiredStates = PropAlign & PropOpen & PropLabel;
 type OptionalStates = PropHasCloser & {
+    level?: HeadingLevel;
     on: KoliBriModalEventCallbacks;
 };
 export type DrawerProps = Generic.Element.Members<RequiredProps, OptionalProps>;

package/dist/types/schema/components/tableStateless.d.ts

@@ -1,5 +1,5 @@
 import type { Generic } from 'adopted-style-sheets';
-import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, PropTableSelection, TableHeaderCells } from '../props';
+import type { PropLabel, PropTableCallbacks, PropTableData, PropTableDataFoot, PropTableSelection, PropVariantClassName, TableHeaderCells } from '../props';
 import type { PropHasSettingsMenu } from '../props/has-settings-menu';
 import type { PropTableHeaderCells } from '../props/table-header-cells';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '../types';
@@ -13,7 +13,7 @@ type OptionalStates = {
     dataFoot: KoliBriTableDataType[];
     fixedCols: [number, number];
     selection: KoliBriTableSelection;
-} & PropHasSettingsMenu & PropTableCallbacks;
+} & PropHasSettingsMenu & PropVariantClassName & PropTableCallbacks;
 export type TableStatelessProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TableStatelessStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type TableStatelessAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;

package/dist/types/schema/props/accordion-callbacks.d.ts

@@ -3,6 +3,7 @@ import type { Callback } from '../enums';
 import type { EventValueOrEventCallback } from '../types/callbacks';
 export type AccordionCallbacksPropType<T> = {
     [Callback.onClick]?: EventValueOrEventCallback<MouseEvent, T>;
+    [Callback.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;
 };
 export type PropAccordionCallbacks<T> = {
     on: AccordionCallbacksPropType<T>;

package/dist/types/schema/types/modal.d.ts

@@ -1,3 +1,4 @@
 export type KoliBriModalEventCallbacks = {
     onClose?: () => void;
+    onToggle?: (open: boolean) => void;
 };

package/doc/accordion.md

@@ -11,13 +11,13 @@ Accordions are used whenever content associated with a thematic heading needs to
 
 ## Properties
 
-| Property              | Attribute   | Description                                                                                                        | Type                                                                                      | Default     |
-| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ----------- |
-| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                                    | `false`     |
-| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                  | `undefined` |
-| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                            | `0`         |
-| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                    | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                                                                                                                                              | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                                                                                                            | `false`     |
+| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                          | `undefined` |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                                                                                    | `0`         |
+| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` |
+| `_open`               | `_open`     | Opens/expands the element when truthy, closes/collapses when falsy.                                                | `boolean \| undefined`                                                                                                                                            | `false`     |
 
 
 ## Methods

package/doc/dialog.md

@@ -5,17 +5,18 @@
 
 ## Properties
 
-| Property              | Attribute  | Description                                                                                                        | Type                                                      | Default     |
-| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                  | `undefined` |
-| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \| ({ onClose?: (() => void) \| undefined; })` | `undefined` |
-| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `"blank" \| "card" \| undefined`                          | `'blank'`   |
-| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \| undefined`                                     | `'100%'`    |
+| Property              | Attribute  | Description                                                                                                        | Type                                                                                                         | Default     |
+| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |
+| `_label` _(required)_ | `_label`   | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                     | `undefined` |
+| `_level`              | `_level`   | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                                               | `0`         |
+| `_on`                 | --         | Defines the modal callback functions.                                                                              | `undefined \| ({ onClose?: (() => void) \| undefined; onToggle?: ((open: boolean) => void) \| undefined; })` | `undefined` |
+| `_variant`            | `_variant` | Defines the variant of the modal.                                                                                  | `"blank" \| "card" \| undefined`                                                                             | `'blank'`   |
+| `_width`              | `_width`   | Defines the width of the modal. (max-width: 100%)                                                                  | `string \| undefined`                                                                                        | `'100%'`    |
 
 
 ## Methods
 
-### `closeModal() => Promise<void>`
+### `close() => Promise<void>`
 
 Closes the dialog.
 
@@ -25,9 +26,45 @@ Type: `Promise<void>`
 
 
 
+### `closeModal() => Promise<void>`
+
+<span class="text-red-500">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the dialog.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `openModal() => Promise<void>`
 
-Opens the dialog.
+<span style="color:red">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the dialog.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `show(modal?: boolean) => Promise<void>`
+
+Opens the dialog. Pass true to open as a modal dialog.
+
+#### Parameters
+
+| Name    | Type      | Description |
+| ------- | --------- | ----------- |
+| `modal` | `boolean` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `showModal() => Promise<void>`
+
+Opens the dialog as a modal.
 
 #### Returns