@public-ui/components 4.3.0-rc.3 → 4.3.0-rc.5

package/dist/esm/kol-popover-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-popover-button.entry.js","sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\tdisplay: inline-block;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements ClickableElement, FocusableElement, PopoverButtonProps {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"names":[],"mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,gxVAAgxV;;MCsC3xV,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAG,YAAY,EAAiC;AAkF1D,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AAhJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQ5B,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAQ5B,MAAM,KAAK,GAAA;AASX,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;AAnCb,UAAA,CAAA;IADZ,aAAa,CAAC,QAAQ;CACe,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;AASzB,UAAA,CAAA;IAHZ,aAAa,CAAC,QAAQ;CAGwC,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}
+{"version":3,"file":"kol-popover-button.entry.js","sources":["src/components/popover-button/style.scss?tag=kol-popover-button&mode=default&encapsulation=shadow","src/components/popover-button/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\n\t.kol-popover-button {\n\t\t&--open {\n\t\t\t.kol-button__tooltip {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&--inline {\n\t\t\tdisplay: inline-block;\n\n\t\t\t.kol-button {\n\t\t\t\tmin-width: 0;\n\t\t\t\tmin-height: 1em;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements ClickableElement, FocusableElement, PopoverButtonProps {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType = 'normal';\n}\n"],"names":[],"mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,myVAAmyV;;MCsC9yV,gBAAgB,GAAA,MAAA;AAP7B,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAG,YAAY,EAAiC;AAkF1D,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAO,CAAA,OAAA,GAAoB,KAAK;AAehC,QAAA,IAAa,CAAA,aAAA,GAA0B,QAAQ;AAqB/C,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA8B,QAAQ;AAC7D;AAhJO,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;AAQ5B,IAAA,MAAM,WAAW,GAAA;;AACvB,QAAA,MAAK,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,CAAC,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,WAAW,EAAE,CAAA;;IAQ5B,MAAM,KAAK,GAAA;AASX,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,qBAAqB,EACrB,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAQ,CAAA,EACzC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACe;;;;AAnCb,UAAA,CAAA;IADZ,aAAa,CAAC,QAAQ;CACe,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;AASzB,UAAA,CAAA;IAHZ,aAAa,CAAC,QAAQ;CAGwC,EAAA,gBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}

package/dist/esm/kol-progress.entry.js

@@ -1,15 +1,16 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, H as Host } from './index-CfYfRjdO.js';
-import { B as BaseWebComponent } from './base-web-component-BCIMb9gN.js';
-import { t as translate } from './i18n-CcjZRTxD.js';
-import './common-Cbb6Axov.js';
-import { l as labelProp } from './label-BwPy2Jd4.js';
-import { m as maxProp, c as clampedNumberValueProp, u as unitProp } from './value-number-clamped-CiWMaJPP.js';
-import { c as createPropDefinition, n as normalizeString } from './normalizers-iLdS6AQE.js';
+import { h, r as registerInstance, H as Host } from './index-btga56T2.js';
+import { B as BaseWebComponent } from './base-web-component-BT6jbe_v.js';
+import { t as translate } from './i18n-BsXYYo8j.js';
+import './common-D5l8QiaY.js';
+import { l as labelProp } from './label-RX8TPr4R.js';
+import './variant-quote-BI3zVSZn.js';
+import { m as maxProp, c as clampedNumberValueProp, u as unitProp } from './value-number-clamped-DlQghACX.js';
+import { c as createPropDefinition, n as normalizeString } from './normalizers-Dmgd1cXp.js';
 import { B as BaseController } from './base-controller-CXhqh4cR.js';
-import './i18n-CMA39edx.js';
+import './i18n-CoO4-0na.js';
 import './_Uint8Array-kJHDjtoP.js';
 import './isArray-CcrBs4JM.js';
 
@@ -150,7 +151,7 @@ const KolProgress = class extends BaseWebComponent {
         this.ctrl.destroy();
     }
     render() {
-        return (h(Host, { key: '70710a5592ba3177b7d4e657c36ee496c92fb879' }, h(ProgressFC, { key: '19414781e2a8b8b4daa4df4ca0734afcc7507830', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
+        return (h(Host, { key: '875e3cb3b7b18f3a73be1115a577e7681e7f2c6d' }, h(ProgressFC, { key: '89fc086cc42ec754a47faf0ee6ba99800aac90dd', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
     }
     static get watchers() { return {
         "_label": ["watchLabel"],

package/dist/esm/kol-progress.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-progress.entry.js","sources":["src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { translate } from '../../../i18n';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\tconst liveValueText = isPercentage\n\t\t? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })\n\t\t: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{liveValueText}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp, type ProgressVariantType } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(stateAccess: StateAccess<ProgressApi>) {\n\t\tsuper(stateAccess, progressPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: white;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: var(--color-bar);\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: var(--color-bar);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.stateAccess);\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-progress.entry.js","sources":["src/internal/props/variant-progress.ts","src/internal/functional-components/progress/component.tsx","src/internal/functional-components/progress/api.tsx","src/internal/functional-components/progress/controller.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Variant prop for progress display style\n *\n * Description:\n * Determines the visual presentation of a progress indicator. Both variants use the\n * WAI-ARIA progressbar role and convey the same semantic information to assistive technologies.\n *\n * Usage (according to W3C HTML specification and WAI-ARIA):\n * - \"bar\": Linear horizontal progress bar (default)\n * - \"cycle\": Circular/radial progress indicator\n * - Both variants must expose role=\"progressbar\" with aria-valuenow, aria-valuemin, and aria-valuemax\n * - The visual variant choice is presentation-only and does not affect the accessible semantics\n *\n * Accessibility:\n * - Progress state must be announced to screen readers (WCAG 4.1.3 Status Messages)\n * - The progress indicator must be perceivable through non-visual means (WCAG 1.1.1 Non-text Content)\n * - Animation in the cycle variant must respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions)\n *\n * @see https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element\n * @see https://www.w3.org/TR/wai-aria-1.2/#progressbar\n * @see https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html\n */\nexport const progressVariantOptions = ['bar', 'cycle'] as const;\nexport type ProgressVariantType = (typeof progressVariantOptions)[number];\n\nexport type VariantProgressProp = SimpleProp<'variant', ProgressVariantType>;\nexport const variantProgressProp = createPropDefinition<VariantProgressProp>(\n\t'variant',\n\t'bar',\n\t(value: unknown) => {\n\t\tconst str = normalizeString(value);\n\t\tif (progressVariantOptions.includes(str as ProgressVariantType)) {\n\t\t\treturn str as ProgressVariantType;\n\t\t}\n\t\tthrow new Error(`Invalid progress variant: ${str}`);\n\t},\n\t() => true,\n);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport { translate } from '../../../i18n';\n\nimport type { ProgressVariantType } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ProgressApi } from './api';\n\nconst FULL_CIRCLE = 342;\n\nconst CycleSvg: FC<{ max: number; value: number }> = ({ max, value }) => (\n\t<svg width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t<circle\n\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\tfill=\"currentColor\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-dasharray={`${Math.round((value / max) * FULL_CIRCLE)}px ${FULL_CIRCLE}px`}\n\t\t\tstroke-width=\"6\"\n\t\t\tcx=\"60\"\n\t\t\tcy=\"60\"\n\t\t\tr=\"54.5\"\n\t\t></circle>\n\t</svg>\n);\n\nconst BarSvg: FC<{ max: number; value: number }> = ({ max, value }) => {\n\tconst percentage = 100 * (value / max);\n\treturn (\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t<rect class=\"kol-progress__bar-background\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100%\"></rect>\n\t\t\t<rect class=\"kol-progress__bar-border\" x=\"1\" y=\"1\" height=\"11\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100%\"></rect>\n\t\t\t<rect\n\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\tx=\"3\"\n\t\t\t\ty=\"3\"\n\t\t\t\theight=\"7\"\n\t\t\t\trx=\"3.5\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-width=\"3\"\n\t\t\t\tstyle={{ width: `calc(${percentage}% - 4px)` }}\n\t\t\t></rect>\n\t\t</svg>\n\t);\n};\n\nconst createProgressSVG = (variant: ProgressVariantType, max: number, value: number) => {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg max={max} value={value} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg max={max} value={value} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${variant as string} not implemented.`);\n\t}\n};\n\nexport const ProgressFC: FC<FunctionalComponentProps<ProgressApi>> = (props) => {\n\tconst { label, max, unit, value, variant, liveValue } = props;\n\tconst isPercentage = unit === '%';\n\tconst liveProgressValue = isPercentage ? `${Math.round((liveValue / max) * 100)}` : liveValue;\n\tconst displayValue = isPercentage ? Math.round((value / max) * 100) : value;\n\tconst valueColumnWidth = `${`${(isPercentage ? 100 : max) + 1}`.length}ch`;\n\n\tconst liveValueText = isPercentage\n\t\t? translate('kol-live-value', { placeholders: { value: String(liveProgressValue), unit } })\n\t\t: translate('kol-live-value-bounded', { placeholders: { value: String(liveProgressValue), max: String(max), unit } });\n\n\treturn (\n\t\t<div class=\"kol-progress\">\n\t\t\t<div\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclass={{\n\t\t\t\t\t'kol-progress__cycle': variant === 'cycle',\n\t\t\t\t\t'kol-progress__bar': variant === 'bar',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{variant === 'bar' && label && <div class=\"kol-progress__bar-label\">{label}</div>}\n\t\t\t\t{createProgressSVG(variant, max, value)}\n\t\t\t\t{variant === 'cycle' && (\n\t\t\t\t\t<div class=\"kol-progress__cycle-text\">\n\t\t\t\t\t\t{label && <div class=\"kol-progress__cycle-label\">{label}</div>}\n\t\t\t\t\t\t<div class=\"kol-progress__cycle-value\">{`${displayValue} ${unit}`}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && (\n\t\t\t\t\t<div class=\"kol-progress__bar-value\" style={{ width: valueColumnWidth }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{variant === 'bar' && <div class=\"kol-progress__bar-unit\">{unit}</div>}\n\t\t\t</div>\n\n\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t<progress class=\"visually-hidden\" aria-busy={value < max ? 'true' : 'false'} max={max} value={value}></progress>\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-hidden\">\n\t\t\t\t{liveValueText}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const progressPropsConfig = {\n\toptional: [labelProp, unitProp, variantProgressProp],\n\trequired: [maxProp, clampedNumberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport type ProgressApi = ApiFromConfig<typeof progressPropsConfig, { States: { liveValue: number } }>;\n","import { clampedNumberValueProp, labelProp, maxProp, unitProp, variantProgressProp, type ProgressVariantType } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ProgressApi } from './api';\nimport { progressPropsConfig } from './api';\n\nexport class ProgressController extends BaseController<ProgressApi> implements ControllerInterface<ProgressApi> {\n\tprivate interval?: ReturnType<typeof setInterval>;\n\n\tpublic constructor(stateAccess: StateAccess<ProgressApi>) {\n\t\tsuper(stateAccess, progressPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ProgressApi>): void {\n\t\tconst { label, max, unit, value, variant } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchMax(max);\n\t\tthis.watchUnit(unit);\n\t\tthis.watchValue(value);\n\t\tthis.watchVariant(variant);\n\n\t\tthis.setState('liveValue', this.getRenderProp('value'));\n\t\tthis.startLiveValueInterval();\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchMax(value?: number): void {\n\t\tmaxProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('max', v);\n\t\t\tthis.watchValue(this.getRawProp('value'));\n\t\t});\n\t}\n\n\tpublic watchUnit(value?: string): void {\n\t\tunitProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('unit', v);\n\t\t});\n\t}\n\n\tpublic watchValue(value?: number): void {\n\t\tthis.setRawProp('value', value);\n\t\tclampedNumberValueProp.apply(\n\t\t\tvalue,\n\t\t\t(v) => {\n\t\t\t\tthis.setRenderProp('value', v);\n\t\t\t},\n\t\t\t{ min: 0, max: this.getRenderProp('max') },\n\t\t);\n\t}\n\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tvariantProgressProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n\n\t// a11y: says the value of the component every 5s\n\tprivate startLiveValueInterval(): void {\n\t\tthis.interval = setInterval(() => {\n\t\t\tconst value = this.getRenderProp('value');\n\t\t\tthis.setState('liveValue', value);\n\t\t}, 5000);\n\t}\n\n\tpublic destroy(): void {\n\t\tif (this.interval) {\n\t\t\tclearInterval(this.interval);\n\t\t\tthis.interval = undefined;\n\t\t}\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-progress {\n\t\t--color-bar: var(--kol-progress-color-bar, #0075ff);\n\n\t\t&__bar {\n\t\t\tdisplay: grid;\n\t\t\talign-items: center;\n\t\t\tgrid-template-areas:\n\t\t\t\t'LABEL LABEL LABEL'\n\t\t\t\t'BAR VALUE UNIT';\n\t\t\tgrid-template-columns: 1fr auto;\n\n\t\t\t&-label {\n\t\t\t\tgrid-column-end: 2;\n\t\t\t\tgrid-area: LABEL;\n\t\t\t}\n\n\t\t\tsvg {\n\t\t\t\tgrid-area: BAR;\n\t\t\t}\n\n\t\t\t&-value {\n\t\t\t\tgrid-area: VALUE;\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&-unit {\n\t\t\t\tgrid-area: UNIT;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: white;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\tfill: var(--color-bar);\n\t\t\t\tstroke: transparent;\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__cycle {\n\t\t\tdisplay: grid;\n\t\t\talign-content: center;\n\t\t\tjustify-items: center;\n\t\t\tgrid-template-areas: 'ALL';\n\t\t\tgrid-template-columns: auto;\n\n\t\t\t> * {\n\t\t\t\tgrid-area: ALL;\n\t\t\t}\n\n\t\t\t&-text {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\n\t\t\t\tfont-size: x-small;\n\t\t\t\ttext-align: center;\n\n\t\t\t\t* {\n\t\t\t\t\tbackground-color: white;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&-background {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-border {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: black;\n\t\t\t}\n\n\t\t\t&-whitespace {\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: white;\n\t\t\t}\n\n\t\t\t&-progress {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\ttransform-origin: 50% 50%;\n\t\t\t\tfill: transparent;\n\t\t\t\tstroke: var(--color-bar);\n\n\t\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ProgressApi } from '../../internal/functional-components/progress/api';\nimport { ProgressFC } from '../../internal/functional-components/progress/component';\nimport { ProgressController } from '../../internal/functional-components/progress/controller';\nimport type { ProgressVariantType } from '../../internal/props';\n\n/**\n * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.\n */\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProgress extends BaseWebComponent<ProgressApi> implements WebComponentInterface<ProgressApi> {\n\tprivate readonly ctrl = new ProgressController(this.stateAccess);\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t */\n\t@Prop()\n\tpublic _max!: number;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop()\n\tpublic _unit?: string;\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: ProgressVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: ProgressVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t/**\n\t * A11y: Aria live value\n\t */\n\t@State()\n\tpublic liveValue: number = 0;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tmax: this._max,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ctrl.destroy();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ProgressFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tliveValue={this.liveValue}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/kol-quote.entry.js

@@ -1,13 +1,14 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, H as Host } from './index-CfYfRjdO.js';
-import { v as variantQuoteProp, B as BaseWebComponent } from './base-web-component-BCIMb9gN.js';
+import { h, r as registerInstance, H as Host } from './index-btga56T2.js';
+import { B as BaseWebComponent } from './base-web-component-BT6jbe_v.js';
 import { i as KolLinkTag } from './component-names-Dy77vq43.js';
-import { b as bem } from './bem-registry-BRfTMZf0.js';
-import './common-Cbb6Axov.js';
-import { c as createPropDefinition, n as normalizeString } from './normalizers-iLdS6AQE.js';
-import { l as labelProp } from './label-BwPy2Jd4.js';
+import { b as bem } from './bem-registry-Coj2Hlbo.js';
+import './common-D5l8QiaY.js';
+import { c as createPropDefinition, n as normalizeString } from './normalizers-Dmgd1cXp.js';
+import { l as labelProp } from './label-RX8TPr4R.js';
+import { v as variantQuoteProp } from './variant-quote-BI3zVSZn.js';
 import { B as BaseController } from './base-controller-CXhqh4cR.js';
 import './_Uint8Array-kJHDjtoP.js';
 import './isArray-CcrBs4JM.js';
@@ -95,7 +96,7 @@ const KolQuote = class {
         });
     }
     render() {
-        return (h(Host, { key: '0e6593206846694c7a999d1a00d1776c5507112c' }, h(QuoteFC, { key: '8e4b699204dd80e609632c82ab6e3db688d0c3ef', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
+        return (h(Host, { key: '6dbdd16912a99997f52326f7cca426f704a7357b' }, h(QuoteFC, { key: 'a523fb0f75067faad16629169193f76e9e879ace', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
     }
     static get watchers() { return {
         "_href": ["watchHref"],

package/dist/esm/kol-quote.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-quote.entry.js","sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/api.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Href prop for links and navigation\n *\n * Description:\n * The href attribute defines the URL target for a link. Using a sentinel value like '#no-href-set'\n * as a default can break expected link behavior and prevent consumers from clearing the href to an empty string.\n *\n * Usage:\n * - Valid URL: href=\"https://example.com\"\n * - Relative path: href=\"/page\"\n * - Fragment: href=\"#section\"\n * - Empty/undefined: href=\"\" (no link target, should prevent navigation)\n *\n * Consumers should check if href is non-empty before rendering clickable links.\n * An empty href means the component should not resolve to a link.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>('href', '', normalizeString, (v) => typeof v === 'string');\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Quote prop for cited text content\n *\n * Description:\n * Contains the quoted text to be rendered. The content is displayed within semantically\n * correct HTML quotation elements (<blockquote> or <q>) depending on the variant.\n *\n * Usage (according to W3C HTML specification):\n * - The quote text should be attributed to its source using the cite attribute or a visible citation\n * - Block quotes (<blockquote>) are for extended quotations from an external source\n * - Inline quotes (<q>) are for short inline quotations\n * - Quotation marks are automatically added by the browser for <q> elements\n *\n * Accessibility:\n * - Semantic quotation elements help assistive technologies convey the nature of the content\n * - The structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\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 */\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>('quote', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const quotePropsConfig = {\n\toptional: [labelProp, variantQuoteProp],\n\trequired: [hrefProp, quoteProp],\n} as const satisfies PropsConfigShape;\n\nexport type QuoteApi = ApiFromConfig<typeof quotePropsConfig>;\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { QuoteApi } from './api';\nimport { quotePropsConfig } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic constructor(stateAccess: StateAccess<QuoteApi>) {\n\t\tsuper(stateAccess, quotePropsConfig);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('href', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('quote', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n/**\n * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n */\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC\n\t\t\t\t\thref={this.ctrl.getRenderProp('href')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tquote={this.ctrl.getRenderProp('quote')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-quote.entry.js","sources":["src/internal/props/href.ts","src/internal/props/quote.ts","src/internal/functional-components/quote/component.tsx","src/internal/functional-components/quote/api.tsx","src/internal/functional-components/quote/controller.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Href prop for links and navigation\n *\n * Description:\n * The href attribute defines the URL target for a link. Using a sentinel value like '#no-href-set'\n * as a default can break expected link behavior and prevent consumers from clearing the href to an empty string.\n *\n * Usage:\n * - Valid URL: href=\"https://example.com\"\n * - Relative path: href=\"/page\"\n * - Fragment: href=\"#section\"\n * - Empty/undefined: href=\"\" (no link target, should prevent navigation)\n *\n * Consumers should check if href is non-empty before rendering clickable links.\n * An empty href means the component should not resolve to a link.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a\n */\nexport type HrefProp = SimpleProp<'href', string>;\nexport const hrefProp = createPropDefinition<HrefProp>('href', '', normalizeString, (v) => typeof v === 'string');\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\n/**\n * Quote prop for cited text content\n *\n * Description:\n * Contains the quoted text to be rendered. The content is displayed within semantically\n * correct HTML quotation elements (<blockquote> or <q>) depending on the variant.\n *\n * Usage (according to W3C HTML specification):\n * - The quote text should be attributed to its source using the cite attribute or a visible citation\n * - Block quotes (<blockquote>) are for extended quotations from an external source\n * - Inline quotes (<q>) are for short inline quotations\n * - Quotation marks are automatically added by the browser for <q> elements\n *\n * Accessibility:\n * - Semantic quotation elements help assistive technologies convey the nature of the content\n * - The structure must be programmatically determinable (WCAG 1.3.1 Info and Relationships)\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 */\nexport type QuoteProp = SimpleProp<'quote', string>;\nexport const quoteProp = createPropDefinition<QuoteProp>('quote', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { KolLinkTag } from '../../../core/component-names';\nimport { bem } from '../../../schema/bem-registry';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { QuoteApi } from './api';\n\nconst quoteBem = bem.forBlock('kol-quote');\nconst BEM_CLASS_QUOTE__BLOCKQUOTE = quoteBem('blockquote');\nconst BEM_CLASS_QUOTE__CITE = quoteBem('cite');\nconst BEM_CLASS_QUOTE__FIGCAPTION = quoteBem('figcaption');\nconst BEM_CLASS_QUOTE__QUOTE = quoteBem('quote');\n\nexport const QuoteFC: FC<FunctionalComponentProps<QuoteApi>> = (props) => {\n\tconst { href, label, quote, variant } = props;\n\tconst hasExpertSlot = quote === '';\n\tconst BEM_CLASS_ROOT = quoteBem({ [variant]: true });\n\treturn (\n\t\t<figure class={BEM_CLASS_ROOT}>\n\t\t\t{variant === 'block' ? (\n\t\t\t\t<blockquote class={BEM_CLASS_QUOTE__BLOCKQUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</blockquote>\n\t\t\t) : (\n\t\t\t\t<q class={BEM_CLASS_QUOTE__QUOTE} cite={href}>\n\t\t\t\t\t{quote}\n\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t</q>\n\t\t\t)}\n\t\t\t{typeof label === 'string' && label.length > 0 && (\n\t\t\t\t<figcaption class={BEM_CLASS_QUOTE__FIGCAPTION}>\n\t\t\t\t\t<cite class={BEM_CLASS_QUOTE__CITE}>\n\t\t\t\t\t\t<KolLinkTag _href={href} _label={label} _target=\"_blank\" />\n\t\t\t\t\t</cite>\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t);\n};\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const quotePropsConfig = {\n\toptional: [labelProp, variantQuoteProp],\n\trequired: [hrefProp, quoteProp],\n} as const satisfies PropsConfigShape;\n\nexport type QuoteApi = ApiFromConfig<typeof quotePropsConfig>;\n","import { hrefProp, labelProp, quoteProp, variantQuoteProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { QuoteApi } from './api';\nimport { quotePropsConfig } from './api';\n\nexport class QuoteController extends BaseController<QuoteApi> implements ControllerInterface<QuoteApi> {\n\tpublic constructor(stateAccess: StateAccess<QuoteApi>) {\n\t\tsuper(stateAccess, quotePropsConfig);\n\t}\n\tpublic componentWillLoad(props: ResolvedInputProps<QuoteApi>): void {\n\t\tconst { href, label, quote, variant } = props;\n\t\tthis.watchHref(href);\n\t\tthis.watchLabel(label);\n\t\tthis.watchQuote(quote);\n\t\tthis.watchVariant(variant);\n\t}\n\n\tpublic watchHref(value?: string): void {\n\t\threfProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('href', v);\n\t\t});\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchQuote(value?: string): void {\n\t\tquoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('quote', v);\n\t\t});\n\t}\n\n\tpublic watchVariant(value?: string): void {\n\t\tvariantQuoteProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('variant', v);\n\t\t});\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-quote {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.kol-quote__cite {\n\t\t&::before {\n\t\t\tcontent: '—';\n\t\t}\n\t}\n\n\t.kol-quote__figcaption {\n\t\t.kol-quote--block & {\n\t\t\tdisplay: inline;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.kol-quote__blockquote {\n\t\t&::before {\n\t\t\tcontent: open-quote;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: close-quote;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { QuoteApi } from '../../internal/functional-components/quote/api';\nimport { QuoteFC } from '../../internal/functional-components/quote/component';\nimport { QuoteController } from '../../internal/functional-components/quote/controller';\nimport type { QuoteVariantType } from '../../internal/props/variant-quote';\n\n/**\n * The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.\n */\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements WebComponentInterface<QuoteApi> {\n\tprivate readonly ctrl = new QuoteController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop()\n\tpublic _href!: string;\n\n\t@Watch('_href')\n\tpublic watchHref(value?: string): void {\n\t\tthis.ctrl.watchHref(value);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop()\n\tpublic _quote!: string;\n\n\t@Watch('_quote')\n\tpublic watchQuote(value?: string): void {\n\t\tthis.ctrl.watchQuote(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: QuoteVariantType = 'inline';\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: QuoteVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thref: this._href,\n\t\t\tlabel: this._label,\n\t\t\tquote: this._quote,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<QuoteFC\n\t\t\t\t\thref={this.ctrl.getRenderProp('href')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tquote={this.ctrl.getRenderProp('quote')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/kol-select-wc.entry.js

@@ -1,52 +1,53 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, F as Fragment, r as registerInstance, g as getElement } from './index-CfYfRjdO.js';
+import { h, F as Fragment, r as registerInstance, g as getElement } from './index-btga56T2.js';
 import { a as __rest, _ as __decorate } from './tslib.es6-QNbPBOk5.js';
 import { c as clsx } from './clsx-COFh-Vc8.js';
-import { g as getMsgType, i as isMsgDefinedAndInputTouched, c as getDefaultProps, a as getRenderStates, F as FormFieldStateWrapper } from './FormFieldStateWrapper-DCZ5A-2U.js';
-import { I as InputIconController, a as InputContainerStateWrapperFc } from './controller-icon-DktA_QxA.js';
-import { H as watchJsonArrayString } from './common-Cbb6Axov.js';
-import { c as createUniqueId } from './dev.utils-CBuLoTMV.js';
+import { g as getMsgType, i as isMsgDefinedAndInputTouched, c as getDefaultProps, a as getRenderStates, F as FormFieldStateWrapper } from './FormFieldStateWrapper-x-JrV0ZZ.js';
+import { I as InputIconController, a as InputContainerStateWrapperFc } from './controller-icon-BD5cEXa7.js';
+import { H as watchJsonArrayString } from './common-D5l8QiaY.js';
+import { c as createUniqueId } from './dev.utils-Bhh4oJHO.js';
 import { b as directFocus, e as directClick, c as createCtaRef } from './element-interaction-C5-6aPzz.js';
-import { p as propagateSubmitEventToForm } from './controller-9xFQ1gbO.js';
-import { v as validateMultiple } from './multiple-wlinUB8P.js';
-import { f as fillKeyOptionMap, v as validateOptionsWithOptgroup } from './controller-CSptrI5n.js';
-import { v as validateRequired } from './required-BYwM0tPO.js';
-import { v as validateRows } from './rows-W8SFsFj4.js';
-import './access-and-short-key-DzjVTrop.js';
-import './disabled-DfW4ft-F.js';
-import './hide-label-BDwvU6I8.js';
-import './label-We78Dt9U.js';
-import './tooltip-align-LkJ2mgrc.js';
-import './align-BdqBkiyq.js';
-import './variant-class-name-D8tvX7Qv.js';
+import { p as propagateSubmitEventToForm } from './controller-CY_VvCRp.js';
+import { v as validateMultiple } from './multiple-BZH-f6A7.js';
+import { f as fillKeyOptionMap, v as validateOptionsWithOptgroup } from './controller-4UReKcll.js';
+import { v as validateRequired } from './required-DSzN5_9V.js';
+import { v as validateRows } from './rows-BJbzOEWy.js';
+import './access-and-short-key-Mj1AS76I.js';
+import './disabled-BcXSZaDo.js';
+import './hide-label-B9ipEhG8.js';
+import './label-Ftw1VCQG.js';
+import './tooltip-align-ChjYN8Pt.js';
+import './align-DpNc6EKs.js';
+import './variant-class-name-DFWOlDkF.js';
 import './events-BhfZTW2e.js';
-import './associated.controller-yo_yku-m.js';
-import './aria-details-Ddidnfeo.js';
+import './associated.controller-CKYHZabJ.js';
+import './aria-details-8nY2-PPr.js';
 import './aria-labelledby-6-ki3akM.js';
-import './bootstrap-wNRvSYNh.js';
+import './bootstrap-DZ17-oRV.js';
 import './component-names-Dy77vq43.js';
-import './i18n-CMA39edx.js';
-import './_Uint8Array-kJHDjtoP.js';
+import './i18n-CoO4-0na.js';
+import './i18n-BsXYYo8j.js';
+import './base-web-component-BT6jbe_v.js';
+import './component-C1c9n-6L.js';
+import './component-BJI9wETu.js';
+import './bem-registry-Coj2Hlbo.js';
+import './component-BYTdfz9f.js';
 import './isArray-CcrBs4JM.js';
-import './base-web-component-BCIMb9gN.js';
-import './normalizers-iLdS6AQE.js';
-import './component-BX1n4r9q.js';
-import './component-CKSOghiT.js';
-import './bem-registry-BRfTMZf0.js';
-import './component-DaUkSW3u.js';
-import './controller-BUTW5QfH.js';
-import './align-floating-elements-Xqbu3THH.js';
+import './controller-B0iAHK14.js';
+import './align-floating-elements-Dg-_rui1.js';
 import './tooltip-open-tracking-D3tCiiGP.js';
-import './label-BwPy2Jd4.js';
+import './normalizers-Dmgd1cXp.js';
+import './_Uint8Array-kJHDjtoP.js';
+import './label-RX8TPr4R.js';
+import './variant-quote-BI3zVSZn.js';
 import './base-controller-CXhqh4cR.js';
-import './i18n-CcjZRTxD.js';
-import './Alert-DlY1Cd8i.js';
-import './Heading-Bi9MCxAk.js';
-import './icons-BGkS8g2K.js';
+import './Alert-DroK3hbV.js';
+import './Heading-CYjA6xHT.js';
+import './icons-BX75HD_Y.js';
 import './element-focus-BQXzaLL9.js';
-import './orientation-DPjc47G2.js';
+import './orientation-BOSiSKDw.js';
 
 const NativeOptionFc = (_a) => {
     var { baseClassName = 'kol-select', class: classNames, index, selectedValue, selected, value, label, disabled } = _a, other = __rest(_a, ["baseClassName", "class", "index", "selectedValue", "selected", "value", "label", "disabled"]);
@@ -266,11 +267,11 @@ const KolSelectWc = class {
             } });
     }
     render() {
-        return (h(FormFieldStateWrapper, Object.assign({ key: 'f4650685f51b81d569c58b83d9cb3e0fcbe1e3ac' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '8c667a237948d5a16fbfa7386cf2fa570b1aabda', state: this.state }, h("form", { key: '797df79691c959d00703ab3c4ed75f3ce184a8c0', onSubmit: (event) => {
+        return (h(FormFieldStateWrapper, Object.assign({ key: '16249933fbe5d93cb0c053234e44b95aa311fec2' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '5c562b4be5b8e0ae01689a05beb682bb5c34cf60', state: this.state }, h("form", { key: 'f9f491d92ed4c209caf61ea6752c7af2c6b54c43', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host});
-            } }, h("input", { key: 'e156192b09a158149fa310b2d81cbfad4657a875', type: "submit", hidden: true }), h(SelectStateWrapper, Object.assign({ key: 'dee324e9704157bc659671c582743eb4771509d6' }, this.getSelectProps()))))));
+            } }, h("input", { key: 'd7f07e16929b9f341d662f320c232f1ae811a6f7', type: "submit", hidden: true }), h(SelectStateWrapper, Object.assign({ key: 'fabf8c04ac649db44d0bfada2b2d3f7678c1bea4' }, this.getSelectProps()))))));
     }
     validateAriaDetails(value) {
         this.controller.validateAriaDetails(value);