@warp-ds/elements 1.2.0-next.5 → 1.2.0-next.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +534 -504
- package/dist/packages/affix/index.js +1 -1
- package/dist/packages/affix/index.js.map +4 -4
- package/dist/packages/alert/index.js +2 -2
- package/dist/packages/alert/index.js.map +4 -4
- package/dist/packages/attention/index.d.ts +9 -0
- package/dist/packages/attention/index.js +24 -17
- package/dist/packages/attention/index.js.map +4 -4
- package/dist/packages/badge/index.js +1 -1
- package/dist/packages/badge/index.js.map +4 -4
- package/dist/packages/box/index.js +2 -2
- package/dist/packages/box/index.js.map +4 -4
- package/dist/packages/breadcrumbs/index.js +3 -3
- package/dist/packages/breadcrumbs/index.js.map +4 -4
- package/dist/packages/button/index.js +2 -2
- package/dist/packages/button/index.js.map +4 -4
- package/dist/packages/card/index.js +3 -3
- package/dist/packages/card/index.js.map +4 -4
- package/dist/packages/expandable/index.js +3 -3
- package/dist/packages/expandable/index.js.map +4 -4
- package/dist/packages/select/index.js +8 -8
- package/dist/packages/select/index.js.map +4 -4
- package/dist/packages/textfield/index.js +2 -2
- package/dist/packages/textfield/index.js.map +4 -4
- package/dist/packages/toast/index.js +7 -7
- package/dist/packages/toast/index.js.map +4 -4
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/toast/toast.js", "../../../node_modules/.pnpm/@warp-ds+css@1.
|
|
4
|
-
"sourcesContent": ["import { css, html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { when } from 'lit/directives/when.js';\nimport { toast as ccToast } from '@warp-ds/css/component-classes';\nimport { expand, collapse } from 'element-collapse';\n\nconst classes = (definition) => {\n const defn = {};\n for (const [key, value] of Object.entries(definition)) {\n for (const className of key.split(' ')) {\n defn[className] = value;\n }\n }\n return classMap(defn);\n};\n\nconst toastType = {\n success: 'success',\n error: 'error',\n warning: 'warning',\n}\n\nexport class WarpToast extends WarpElement {\n static styles = [WarpElement.styles,\n css`\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n id: { type: String, attribute: true, reflect: true },\n type: { type: String, attribute: true, reflect: true },\n text: { type: String, attribute: true, reflect: true },\n canclose: { type: Boolean, attribute: true, reflect: true },\n };\n\n constructor() {\n super();\n this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);\n this.type = 'success';\n this.text = '';\n this.canclose = false;\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n updated() {\n if (!this._expanded && this._wrapper) expand(this._wrapper, () => (this._expanded = true));\n }\n\n get _primaryClasses() {\n return classes({\n [ccToast.toast]: true,\n [ccToast.positive]: this.type === toastType.success,\n [ccToast.warning]: this.type === toastType.warning,\n [ccToast.negative]: this.type === toastType.error,\n });\n }\n\n get _iconClasses() {\n return classes({\n [ccToast.icon]: true,\n [ccToast.iconPositive]: this.type == toastType.success,\n [ccToast.iconWarning]: this.type === toastType.warning,\n [ccToast.iconNegative]: this.type === toastType.error,\n });\n }\n\n get _wrapper() {\n return this.renderRoot?.querySelector(`section`) ?? null;\n }\n\n get _warning() {\n return this.type === toastType.warning;\n }\n\n get _error() {\n return this.type === toastType.error;\n }\n\n get _role() {\n return this._error || this._warning ? 'alert' : 'status';\n }\n\n get _typeLabel() {\n if (this._warning) return 'Varsel';\n if (this._error) return 'Feil';\n return 'Vellykket'\n }\n\n get _iconMarkup() {\n if (this._warning) return html`<w-icon-alert-warning-16></w-icon-alert-warning-16>`;\n if (this._error) return html`<w-icon-alert-error-16></w-icon-alert-error-16>`;\n else return html`<w-icon-alert-success-16></w-icon-alert-success-16>`;\n }\n\n async collapse() {\n return new Promise((resolve) => {\n if (this._expanded && this._wrapper) collapse(this._wrapper, resolve);\n else resolve();\n });\n }\n\n close() {\n const event = new CustomEvent('close', {\n detail: { id: this.id },\n bubbles: true,\n composed: true,\n });\n this.updateComplete.then(() => this.dispatchEvent(event));\n }\n\n render() {\n if (!this.text) return html``;\n return html` <section class=\"${ccToast.wrapper}\" aria-label=\"${this._typeLabel}\">\n <div class=\"${this._primaryClasses}\">\n <div class=\"${this._iconClasses}\">${this._iconMarkup}</div>\n <div role=\"${this._role}\" class=\"${ccToast.content}\">\n <p>${this.text}</p>\n </div>\n ${when(\n this.canclose === true,\n () => html`\n <button class=\"${ccToast.close}\" @click=\"${this.close}\">\n <w-icon-close-16></w-icon-close-16>\n </button>\n `,\n )}\n </div>\n </section>`;\n }\n}\n\nif (!customElements.get('w-toast')) {\n customElements.define('w-toast', WarpToast);\n}\n", "export const attention = {\n base: 'border-2 relative',\n tooltip:\n 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n popover:\n 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n arrowBase:\n 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n content: 'last-child:mb-0',\n notCallout: 'absolute z-50',\n};\n\nexport const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n positionBase: 'absolute backdrop-blur',\n positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n wrapper: 'touch-pan-y relative w-full h-44 py-2',\n track:\n 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n trackDisabled:\n 'pointer-events-none i-bg-$color-slider-track-background-disabled',\n activeTrack:\n 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n activeTrackDisabled:\n 'i-bg-$color-slider-track-background-disabled pointer-events-none',\n thumb:\n 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n thumbDisabled:\n 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n pill: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n label: 'pl-12 py-8 rounded-l-full',\n labelWithoutClose: 'pr-12 rounded-r-full',\n labelWithClose: 'pr-2',\n close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n a11y: 'sr-only',\n};\n\nexport const step = {\n step: 'group/step',\n stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n stepVerticalLeft: 'grid-cols-[20px_1fr]',\n stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n stepDotVerticalRight: 'col-start-2',\n stepDotHorizontal: 'row-start-2 justify-self-end',\n stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n stepLineVertical: 'w-2 h-full justify-self-center',\n stepLineVerticalRight: 'col-start-2',\n stepLineHorizontal: 'h-2 w-full row-start-2',\n stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n content: 'last:mb-0 group-last/step:last:pb-0',\n contentVertical: 'row-span-2 pb-32',\n contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n steps: 'w-full',\n stepsHorizontal: 'flex',\n};\n\nexport const card = {\n card: 'cursor-pointer overflow-hidden relative transition-all',\n cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n cardFlat: 'border-2 rounded-4',\n cardFlatUnselected:\n 'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n cardFlatSelected:\n 'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n cardSelected:\n 'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n cardOutline:\n 'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n cardOutlineUnselected: 'i-border-$color-card-border',\n cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n switch: 'tap-highlight-transparent',\n label: 'block relative h-24 w-44 cursor-pointer group',\n labelDisabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n container:\n 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n content: 'w-full',\n toaster:\n 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n toast:\n 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 'i-text-$color-toast-positive-icon',\n iconWarning: 'i-text-$color-toast-warning-icon',\n iconNegative: 'i-text-$color-toast-negative-icon',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n tabContainer: 'mx-auto max-w-screen-md w-full grid relative',\n wunderbar:\n 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n wrapperUnderlined:\n 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n tabActive: 'i-text-$color-tabs-text-selected',\n icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n content: 'flex items-center justify-center gap-8',\n contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n cols1: 'grid-cols-1',\n cols2: 'grid-cols-2',\n cols3: 'grid-cols-3',\n cols4: 'grid-cols-4',\n cols5: 'grid-cols-5',\n cols6: 'grid-cols-6',\n cols7: 'grid-cols-7',\n cols8: 'grid-cols-8',\n cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n expandable: 'will-change-height',\n expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n expandableBleed: box.bleed,\n chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n chevronNonBox: 'relative left-8',\n chevronBox: 'absolute right-16',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: buttonReset + ' hover:underline focus:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center ' + box.box,\n paddingTop: 'pt-0',\n title: 'flex justify-between items-center',\n titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n utility: `border rounded-4 ${buttonDefaultStyling}`,\n negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n pill:\n `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n xsmall: 'py-6 px-16',\n small: 'py-8 px-16',\n medium: 'py-10 px-14',\n large: 'py-12 px-16',\n utility: 'py-[11px] px-[15px]',\n smallUtility: 'py-[7px] px-[15px]',\n pill: 'min-h-[44px] min-w-[44px]',\n pillSmall: 'min-h-32 min-w-32',\n link: 'p-0',\n};\n\nconst buttonTextSizes = {\n medium: 'text-m leading-[24]',\n xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n inProgress:\n `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet:\n `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled:\n `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n // Buttontypes\n secondary:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondaryQuiet:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondaryLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n secondaryQuietLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n linkAsButton: 'inline-block hover:no-underline text-center',\n a11y: 'sr-only',\n fullWidth: \"w-full max-w-full\",\n contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n wrapper: 'inline-flex rounded-4 overflow-hidden',\n raised: 'i-shadow-$shadow-buttongroup',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n modal:\n 'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n content:\n 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n transitionTitle: 'transition-all duration-300',\n transitionTitleCenter: 'justify-self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n titleText: 'mb-0 h4 sm:h3',\n titleButton: button.pill + ' sm:min-h-[32px] sm:min-w-[32px]',\n titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n alert: \"flex p-16 border border-l-4 rounded-4\",\n willChangeHeight: \"will-change-height\",\n textWrapper: \"last-child:mb-0 text-s\",\n title: \"text-s\",\n icon: \"w-16 mr-8 min-w-16\",\n negative: \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n negativeIcon: \"i-text-$color-alert-negative-icon\",\n positive: \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n positiveIcon: \"i-text-$color-alert-positive-icon\",\n warning: \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n warningIcon: \"i-text-$color-alert-warning-icon\",\n info: \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n textArea: 'min-h-[42] sm:min-h-[45]',\n disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n wrapper: 'relative',\n suffix: 'pr-40',\n prefix: 'pl-40',\n};\n\nexport const select = {\n default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n invalid: 'i-border-$color-select-border-negative',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n wrapper: 'relative',\n selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n labelInvalid: 'i-text-$color-label-text-negative',\n optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n helpTextValid: 'i-text-$color-helptext-text-positive',\n helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapperBase + 'right-0',\n wrapperWithLabel: 'w-max pr-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapperBase + 'left-0',\n wrapperWithLabel: 'w-max pl-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 'i-text-$color-breadcrumbs-text',\n link: 'i-text-$color-breadcrumbs-link-text',\n separator: 'select-none i-text-$color-breadcrumbs-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n field: 'relative text-m',\n wrapper: 'relative py-1',\n deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n input: 'peer',\n deadToggleInput: 'hidden',\n inputDisabled: 'pointer-events-none',\n focusable: 'peer-focus:focusable',\n focusableWithin: 'focus-within:focusable',\n label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n deadToggleLabel: '-mt-2',\n noContent: `before:content-[\"\"]`,\n indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n labelDisabled: 'pointer-events-none',\n checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',\n checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n labelCheckboxBorder: 'i-border-$color-checkbox-border',\n radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',\n radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',\n labelRadioBorder: 'i-border-$color-radio-border',\n radioButtons: 'inline-flex relative font-bold rounded-8',\n radioButtonsGroup: 'group',\n radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n radioButtonsJustified: 'flex!',\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n a11y: 'sr-only',\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n buttonOrLink: 'bg-transparent focusable',\n buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n wrapper: 'relative',\n combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n textMatch: 'font-bold',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n a11y: 'sr-only',\n};", "const windowExists = (typeof window !== 'undefined')\n\nlet prefersMotion = true\n\nif (windowExists) {\n const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n const callback = ({ matches }) => prefersMotion = !matches\n // older browsers don't support the new API, and the old API is deprecated\n if (query.addEventListener) query.addEventListener('change', callback)\n callback(query)\n}\n\nconst removeTransition = el => {\n el.style.transition = null\n el.style.backfaceVisibility = null\n el.style.overflow = null\n}\n\nconst addTransition = (el) => {\n // we set timing to something insanely short\n // when reducing motion so the after-* hooks still fire\n const timing = prefersMotion ? 'var(--f-expansion-duration, 0.3s)' : '0.01s'\n el.style.transition = `height ${timing}`\n el.style.backfaceVisibility = 'hidden'\n el.style.overflow = 'hidden'\n}\n\nconst getAfterExpandCallback = (el, done) => () => {\n el.style.height = 'auto'\n el.style.overflow = null\n if (done) done()\n}\n\nconst getAfterCollapseCallback = (done) => () => {\n if (done) done()\n}\n\n/**\n * Transitions an element from 0 to a detected height\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const expand = (el, done) => {\n const returnPromise = (() => {\n if (!done) return new Promise(r => { done = r })\n })()\n const afterExpandCallback = getAfterExpandCallback(el, done)\n removeTransition(el)\n el.style.height = 'auto'\n let dest = el.scrollHeight\n windowExists && requestAnimationFrame(() => {\n el.addEventListener('transitionend', afterExpandCallback, { once: true })\n el.style.height = '0px'\n el.style.transitionTimingFunction = 'ease-out'\n addTransition(el)\n requestAnimationFrame(() => el.style.height = dest + 'px')\n })\n if (returnPromise) return returnPromise\n}\n\n/**\n * Transitions an element from a detected height to 0\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const collapse = (el, done) => {\n const returnPromise = (() => {\n if (!done) return new Promise(r => { done = r })\n })()\n const afterCollapseCallback = getAfterCollapseCallback(done)\n removeTransition(el)\n let original = el.scrollHeight\n windowExists && requestAnimationFrame(() => {\n el.addEventListener('transitionend', afterCollapseCallback, { once: true })\n el.style.height = original + 'px'\n el.style.transitionTimingFunction = 'ease-in'\n addTransition(el)\n requestAnimationFrame(() => el.style.height = '0px')\n })\n if (returnPromise) return returnPromise\n}\n", "import { css, html } from \"lit\";\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { toaster as ccToaster } from \"@warp-ds/css/component-classes\";\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/**\n * Toast helper function options\n * @typedef {Object} ToastOptions\n * @property {(number|string)} [id] Custom identifier\n * @property {('success'|'error'|'warning')} [type] Type of alert\n * @property {String} [text] The toast message. Only needed when updating text on existing toast\n * @property {(number|string)} [duration] Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property {Boolean} [canClose] Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\nexport class WarpToastContainer extends WarpElement {\n static styles = [\n WarpElement.styles,\n css`\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n _toasts: { state: true },\n };\n\n constructor() {\n super();\n this._toasts = new Map();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // regularly check if any toasts have expired\n this._interval = setInterval(() => {\n // sort toasts into keep and remove\n const keep = [];\n const remove = [];\n for (const toast of this._toasts) {\n if (Date.now() <= toast[1].duration) keep.push(toast);\n else remove.push(toast);\n }\n // collapse toasts that will be removed\n const collapseTasks = [];\n for (const [id] of remove) {\n const el = this.renderRoot.querySelector(`#${id}`);\n collapseTasks.push(el.collapse());\n }\n // once all toasts that should be removed have been collapsed, remove them from the map\n Promise.all(collapseTasks).then(() => {\n if (keep.length != this._toasts.size) this._toasts = new Map(keep);\n });\n }, 500);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._interval) clearTimeout(this._interval);\n }\n\n static init() {\n let el = document.querySelector(\"w-toast-container\");\n if (!el) {\n el = document.createElement(\"w-toast-container\");\n document.body.appendChild(el);\n }\n return el;\n }\n\n get _toastsArray() {\n return Array.from(this._toasts).map(([, toast]) => toast);\n }\n\n /**\n *\n * @param {String|Number} id\n * @returns {ToastOptions}\n */\n get(id) {\n if (!id)\n throw new Error('undefined \"id\" given when attempting to retrieve toast');\n if (typeof id !== \"string\" && !Number.isInteger(id))\n throw new Error(\n '\"id\" must be number or string when attempting to retrieve toast'\n );\n return this._toasts.get(id);\n }\n\n /**\n *\n * @param {Object} toast\n * @returns {WarpToastContainer}\n */\n set(toast) {\n if (!toast.id) throw new Error('invalid or undefined \"id\" on toast object');\n const result = this._toasts.set(toast.id, {\n ...toast,\n duration: Date.now() + (toast.duration || 5000),\n });\n this._toasts = new Map(Array.from(this._toasts));\n return result;\n }\n\n /**\n *\n * @param {String|Number} id\n * @returns {ToastOptions | false}\n */\n async del(id) {\n if (!id)\n throw new Error('undefined \"id\" given when attempting to retrieve toast');\n if (typeof id !== \"string\" && !Number.isInteger(id))\n throw new Error(\n '\"id\" must be number or string when attempting to retrieve toast'\n );\n const el = this.renderRoot.querySelector(`#${id}`);\n if (!this._toasts.has(id)) return false;\n await el.collapse();\n const result = this._toasts.delete(id);\n this._toasts = new Map(Array.from(this._toasts));\n return result;\n }\n\n render() {\n return html`\n <aside class=\"${ccToaster.container}\">\n <div class=\"${ccToaster.toaster}\" id=\"w-toast-container-list\">\n ${repeat(\n this._toastsArray,\n (toast) => toast.id,\n (toast) =>\n html` <w-toast\n class=\"${ccToaster.content}\"\n id=\"${toast.id}\"\n type=\"${toast.type}\"\n text=\"${toast.text}\"\n ?canclose=${toast.canclose}\n @close=${() => this.del(toast.id)}\n >\n </w-toast>`\n )}\n </div>\n </aside>\n `;\n }\n}\n\nif (!customElements.get(\"w-toast-container\")) {\n customElements.define(\"w-toast-container\", WarpToastContainer);\n}\n", "export const windowExists = typeof window !== 'undefined';\n", "import { windowExists } from '../utils/window-exists';\n\n/**\n * Toast helper function options\n * @typedef {Object} ToastOptions\n * @property {(number|string)} [id] Custom identifier\n * @property {('success'|'error'|'warning'|'info')} [type] Type of alert\n * @property {String} [text] The toast message. Only needed when updating text on existing toast\n * @property {(number|string)} [duration] Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property {Boolean} [canclose] Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\n/**\n * Creates a new toast\n * @param {String} message Message\n * @param {ToastOptions?} options Toast options\n * @returns {ToastOptions} Toast details\n */\nexport function toast(message, options) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n\n const data = {\n id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),\n text: message,\n duration: 5000,\n type: 'success',\n ...options,\n };\n\n toast.set(data);\n return data;\n}\n\n/**\n * Remove an existing toast\n * @param {String|Number} id Toast identifier\n * @return {Promise<Boolean>} Resolves to true if deleted, false if not found\n */\nexport function removeToast(id) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n return toast.del(id);\n}\n\n/**\n * Update an existing toast\n * @param {String|Number} id Toast identifier\n * @param {ToastOptions?} options Toast options\n * @returns {WarpToastContainer} Toast details\n */\nexport function updateToast(id, options) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n toast.set({ ...toast.get(id), ...options });\n return toast.get(id);\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["css", "html", "WarpElement", "classMap", "when", "box", "toaster", "toast", "buttonReset", "expandable", "box", "buttonDefaultStyling", "buttonColors", "buttonTypes", "buttonSizes", "buttonTextSizes", "buttonVariants", "button", "modal", "
|
|
3
|
+
"sources": ["../../../packages/toast/toast.js", "../../../node_modules/.pnpm/@warp-ds+css@1.3.0/node_modules/@warp-ds/css/component-classes/index.js", "../../../node_modules/.pnpm/element-collapse@1.1.0/node_modules/element-collapse/index.js", "../../../packages/toast/toast-container.js", "../../../packages/utils/window-exists.js", "../../../packages/toast/api.js"],
|
|
4
|
+
"sourcesContent": ["import { css, html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { when } from 'lit/directives/when.js';\nimport { toast as ccToast } from '@warp-ds/css/component-classes';\nimport { expand, collapse } from 'element-collapse';\n\nconst classes = (definition) => {\n const defn = {};\n for (const [key, value] of Object.entries(definition)) {\n for (const className of key.split(' ')) {\n defn[className] = value;\n }\n }\n return classMap(defn);\n};\n\nconst toastType = {\n success: 'success',\n error: 'error',\n warning: 'warning',\n}\n\nexport class WarpToast extends WarpElement {\n static styles = [WarpElement.styles,\n css`\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n id: { type: String, attribute: true, reflect: true },\n type: { type: String, attribute: true, reflect: true },\n text: { type: String, attribute: true, reflect: true },\n canclose: { type: Boolean, attribute: true, reflect: true },\n };\n\n constructor() {\n super();\n this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);\n this.type = 'success';\n this.text = '';\n this.canclose = false;\n }\n\n connectedCallback() {\n super.connectedCallback();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n updated() {\n if (!this._expanded && this._wrapper) expand(this._wrapper, () => (this._expanded = true));\n }\n\n get _primaryClasses() {\n return classes({\n [ccToast.toast]: true,\n [ccToast.positive]: this.type === toastType.success,\n [ccToast.warning]: this.type === toastType.warning,\n [ccToast.negative]: this.type === toastType.error,\n });\n }\n\n get _iconClasses() {\n return classes({\n [ccToast.icon]: true,\n [ccToast.iconPositive]: this.type == toastType.success,\n [ccToast.iconWarning]: this.type === toastType.warning,\n [ccToast.iconNegative]: this.type === toastType.error,\n });\n }\n\n get _wrapper() {\n return this.renderRoot?.querySelector(`section`) ?? null;\n }\n\n get _warning() {\n return this.type === toastType.warning;\n }\n\n get _error() {\n return this.type === toastType.error;\n }\n\n get _role() {\n return this._error || this._warning ? 'alert' : 'status';\n }\n\n get _typeLabel() {\n if (this._warning) return 'Varsel';\n if (this._error) return 'Feil';\n return 'Vellykket'\n }\n\n get _iconMarkup() {\n if (this._warning) return html`<w-icon-alert-warning-16></w-icon-alert-warning-16>`;\n if (this._error) return html`<w-icon-alert-error-16></w-icon-alert-error-16>`;\n else return html`<w-icon-alert-success-16></w-icon-alert-success-16>`;\n }\n\n async collapse() {\n return new Promise((resolve) => {\n if (this._expanded && this._wrapper) collapse(this._wrapper, resolve);\n else resolve();\n });\n }\n\n close() {\n const event = new CustomEvent('close', {\n detail: { id: this.id },\n bubbles: true,\n composed: true,\n });\n this.updateComplete.then(() => this.dispatchEvent(event));\n }\n\n render() {\n if (!this.text) return html``;\n return html` <section class=\"${ccToast.wrapper}\" aria-label=\"${this._typeLabel}\">\n <div class=\"${this._primaryClasses}\">\n <div class=\"${this._iconClasses}\">${this._iconMarkup}</div>\n <div role=\"${this._role}\" class=\"${ccToast.content}\">\n <p>${this.text}</p>\n </div>\n ${when(\n this.canclose === true,\n () => html`\n <button class=\"${ccToast.close}\" @click=\"${this.close}\">\n <w-icon-close-16></w-icon-close-16>\n </button>\n `,\n )}\n </div>\n </section>`;\n }\n}\n\nif (!customElements.get('w-toast')) {\n customElements.define('w-toast', WarpToast);\n}\n", "export const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n positionBase: 'absolute backdrop-blur',\n positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n wrapper: 'touch-pan-y relative w-full h-44 py-2',\n track:\n 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n trackDisabled:\n 'pointer-events-none i-bg-$color-slider-track-background-disabled',\n activeTrack:\n 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n activeTrackDisabled:\n 'i-bg-$color-slider-track-background-disabled pointer-events-none',\n thumb:\n 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n thumbDisabled:\n 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n pill: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n label: 'pl-12 py-8 rounded-l-full',\n labelWithoutClose: 'pr-12 rounded-r-full',\n labelWithClose: 'pr-2',\n close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n a11y: 'sr-only',\n};\n\nexport const step = {\n step: 'group/step',\n stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n stepVerticalLeft: 'grid-cols-[20px_1fr]',\n stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n stepDotVerticalRight: 'col-start-2',\n stepDotHorizontal: 'row-start-2 justify-self-end',\n stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n stepLineVertical: 'w-2 h-full justify-self-center',\n stepLineVerticalRight: 'col-start-2',\n stepLineHorizontal: 'h-2 w-full row-start-2',\n stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n content: 'last:mb-0 group-last/step:last:pb-0',\n contentVertical: 'row-span-2 pb-32',\n contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n steps: 'w-full',\n stepsHorizontal: 'flex',\n};\n\nexport const card = {\n card: 'cursor-pointer overflow-hidden relative transition-all',\n cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n cardFlat: 'border-2 rounded-4',\n cardFlatUnselected:\n 'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n cardFlatSelected:\n 'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n cardSelected:\n 'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n cardOutline:\n 'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n cardOutlineUnselected: 'i-border-$color-card-border',\n cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n switch: 'tap-highlight-transparent',\n label: 'block relative h-24 w-44 cursor-pointer group',\n labelDisabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n container:\n 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n content: 'w-full',\n toaster:\n 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n toast:\n 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 'i-text-$color-toast-positive-icon',\n iconWarning: 'i-text-$color-toast-warning-icon',\n iconNegative: 'i-text-$color-toast-negative-icon',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n tabContainer: 'mx-auto max-w-screen-md w-full grid relative',\n wunderbar:\n 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n wrapperUnderlined:\n 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n tabActive: 'i-text-$color-tabs-text-selected',\n icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n content: 'flex items-center justify-center gap-8',\n contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n cols1: 'grid-cols-1',\n cols2: 'grid-cols-2',\n cols3: 'grid-cols-3',\n cols4: 'grid-cols-4',\n cols5: 'grid-cols-5',\n cols6: 'grid-cols-6',\n cols7: 'grid-cols-7',\n cols8: 'grid-cols-8',\n cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n expandable: 'will-change-height',\n expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n expandableBleed: box.bleed,\n chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n chevronNonBox: 'relative left-8',\n chevronBox: 'absolute right-16',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: buttonReset + ' hover:underline focus:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center ' + box.box,\n paddingTop: 'pt-0',\n title: 'flex justify-between items-center',\n titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n utility: `border rounded-4 ${buttonDefaultStyling}`,\n negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n pill:\n `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n xsmall: 'py-6 px-16',\n small: 'py-8 px-16',\n medium: 'py-10 px-14',\n large: 'py-12 px-16',\n utility: 'py-[11px] px-[15px]',\n smallUtility: 'py-[7px] px-[15px]',\n pill: 'min-h-[44px] min-w-[44px]',\n pillSmall: 'min-h-32 min-w-32',\n link: 'p-0',\n};\n\nconst buttonTextSizes = {\n medium: 'text-m leading-[24]',\n xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n inProgress:\n `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet:\n `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled:\n `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n // Buttontypes\n secondary:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondaryQuiet:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondaryLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n secondaryQuietLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n linkAsButton: 'inline-block hover:no-underline text-center',\n a11y: 'sr-only',\n fullWidth: \"w-full max-w-full\",\n contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n wrapper: 'inline-flex rounded-4 overflow-hidden',\n raised: 'i-shadow-$shadow-buttongroup',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n modal:\n 'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n content:\n 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n transitionTitle: 'transition-all duration-300',\n transitionTitleCenter: 'justify-self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n titleText: 'mb-0 h4 sm:h3',\n titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n alert: \"flex p-16 border border-l-4 rounded-4\",\n willChangeHeight: \"will-change-height\",\n textWrapper: \"last-child:mb-0 text-s\",\n title: \"text-s\",\n icon: \"w-16 mr-8 min-w-16\",\n negative: \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n negativeIcon: \"i-text-$color-alert-negative-icon\",\n positive: \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n positiveIcon: \"i-text-$color-alert-positive-icon\",\n warning: \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n warningIcon: \"i-text-$color-alert-warning-icon\",\n info: \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n textArea: 'min-h-[42] sm:min-h-[45]',\n disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n wrapper: 'relative',\n suffix: 'pr-40',\n prefix: 'pl-40',\n};\n\nexport const select = {\n default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n invalid: 'i-border-$color-select-border-negative',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n wrapper: 'relative',\n selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n labelInvalid: 'i-text-$color-label-text-negative',\n optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n helpTextValid: 'i-text-$color-helptext-text-positive',\n helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapperBase + 'right-0',\n wrapperWithLabel: 'w-max pr-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapperBase + 'left-0',\n wrapperWithLabel: 'w-max pl-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 'i-text-$color-breadcrumbs-text',\n link: 'i-text-$color-breadcrumbs-link-text',\n separator: 'select-none i-text-$color-breadcrumbs-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n field: 'relative text-m',\n wrapper: 'relative py-1',\n deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n input: 'peer',\n deadToggleInput: 'hidden',\n inputDisabled: 'pointer-events-none',\n focusable: 'peer-focus:focusable',\n focusableWithin: 'focus-within:focusable',\n label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n deadToggleLabel: '-mt-2',\n noContent: `before:content-[\"\"]`,\n indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n labelDisabled: 'pointer-events-none',\n checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',\n checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n labelCheckboxBorder: 'i-border-$color-checkbox-border',\n radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',\n radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',\n labelRadioBorder: 'i-border-$color-radio-border',\n radioButtons: 'inline-flex relative font-bold rounded-8',\n radioButtonsGroup: 'group',\n radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n radioButtonsJustified: 'flex!',\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n a11y: 'sr-only',\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n buttonOrLink: 'bg-transparent focusable',\n buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n wrapper: 'relative',\n combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n textMatch: 'font-bold',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const attention = {\n base: 'border-2 relative flex items-start',\n tooltip:\n 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n popover:\n 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n arrowBase:\n 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n content: 'last-child:mb-0',\n notCallout: 'absolute z-50',\n closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};", "const windowExists = (typeof window !== 'undefined')\n\nlet prefersMotion = true\n\nif (windowExists) {\n const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n const callback = ({ matches }) => prefersMotion = !matches\n // older browsers don't support the new API, and the old API is deprecated\n if (query.addEventListener) query.addEventListener('change', callback)\n callback(query)\n}\n\nconst removeTransition = el => {\n el.style.transition = null\n el.style.backfaceVisibility = null\n el.style.overflow = null\n}\n\nconst addTransition = (el) => {\n // we set timing to something insanely short\n // when reducing motion so the after-* hooks still fire\n const timing = prefersMotion ? 'var(--f-expansion-duration, 0.3s)' : '0.01s'\n el.style.transition = `height ${timing}`\n el.style.backfaceVisibility = 'hidden'\n el.style.overflow = 'hidden'\n}\n\nconst getAfterExpandCallback = (el, done) => () => {\n el.style.height = 'auto'\n el.style.overflow = null\n if (done) done()\n}\n\nconst getAfterCollapseCallback = (done) => () => {\n if (done) done()\n}\n\n/**\n * Transitions an element from 0 to a detected height\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const expand = (el, done) => {\n const returnPromise = (() => {\n if (!done) return new Promise(r => { done = r })\n })()\n const afterExpandCallback = getAfterExpandCallback(el, done)\n removeTransition(el)\n el.style.height = 'auto'\n let dest = el.scrollHeight\n windowExists && requestAnimationFrame(() => {\n el.addEventListener('transitionend', afterExpandCallback, { once: true })\n el.style.height = '0px'\n el.style.transitionTimingFunction = 'ease-out'\n addTransition(el)\n requestAnimationFrame(() => el.style.height = dest + 'px')\n })\n if (returnPromise) return returnPromise\n}\n\n/**\n * Transitions an element from a detected height to 0\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const collapse = (el, done) => {\n const returnPromise = (() => {\n if (!done) return new Promise(r => { done = r })\n })()\n const afterCollapseCallback = getAfterCollapseCallback(done)\n removeTransition(el)\n let original = el.scrollHeight\n windowExists && requestAnimationFrame(() => {\n el.addEventListener('transitionend', afterCollapseCallback, { once: true })\n el.style.height = original + 'px'\n el.style.transitionTimingFunction = 'ease-in'\n addTransition(el)\n requestAnimationFrame(() => el.style.height = '0px')\n })\n if (returnPromise) return returnPromise\n}\n", "import { css, html } from \"lit\";\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { toaster as ccToaster } from \"@warp-ds/css/component-classes\";\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/**\n * Toast helper function options\n * @typedef {Object} ToastOptions\n * @property {(number|string)} [id] Custom identifier\n * @property {('success'|'error'|'warning')} [type] Type of alert\n * @property {String} [text] The toast message. Only needed when updating text on existing toast\n * @property {(number|string)} [duration] Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property {Boolean} [canClose] Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\nexport class WarpToastContainer extends WarpElement {\n static styles = [\n WarpElement.styles,\n css`\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n _toasts: { state: true },\n };\n\n constructor() {\n super();\n this._toasts = new Map();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // regularly check if any toasts have expired\n this._interval = setInterval(() => {\n // sort toasts into keep and remove\n const keep = [];\n const remove = [];\n for (const toast of this._toasts) {\n if (Date.now() <= toast[1].duration) keep.push(toast);\n else remove.push(toast);\n }\n // collapse toasts that will be removed\n const collapseTasks = [];\n for (const [id] of remove) {\n const el = this.renderRoot.querySelector(`#${id}`);\n collapseTasks.push(el.collapse());\n }\n // once all toasts that should be removed have been collapsed, remove them from the map\n Promise.all(collapseTasks).then(() => {\n if (keep.length != this._toasts.size) this._toasts = new Map(keep);\n });\n }, 500);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this._interval) clearTimeout(this._interval);\n }\n\n static init() {\n let el = document.querySelector(\"w-toast-container\");\n if (!el) {\n el = document.createElement(\"w-toast-container\");\n document.body.appendChild(el);\n }\n return el;\n }\n\n get _toastsArray() {\n return Array.from(this._toasts).map(([, toast]) => toast);\n }\n\n /**\n *\n * @param {String|Number} id\n * @returns {ToastOptions}\n */\n get(id) {\n if (!id)\n throw new Error('undefined \"id\" given when attempting to retrieve toast');\n if (typeof id !== \"string\" && !Number.isInteger(id))\n throw new Error(\n '\"id\" must be number or string when attempting to retrieve toast'\n );\n return this._toasts.get(id);\n }\n\n /**\n *\n * @param {Object} toast\n * @returns {WarpToastContainer}\n */\n set(toast) {\n if (!toast.id) throw new Error('invalid or undefined \"id\" on toast object');\n const result = this._toasts.set(toast.id, {\n ...toast,\n duration: Date.now() + (toast.duration || 5000),\n });\n this._toasts = new Map(Array.from(this._toasts));\n return result;\n }\n\n /**\n *\n * @param {String|Number} id\n * @returns {ToastOptions | false}\n */\n async del(id) {\n if (!id)\n throw new Error('undefined \"id\" given when attempting to retrieve toast');\n if (typeof id !== \"string\" && !Number.isInteger(id))\n throw new Error(\n '\"id\" must be number or string when attempting to retrieve toast'\n );\n const el = this.renderRoot.querySelector(`#${id}`);\n if (!this._toasts.has(id)) return false;\n await el.collapse();\n const result = this._toasts.delete(id);\n this._toasts = new Map(Array.from(this._toasts));\n return result;\n }\n\n render() {\n return html`\n <aside class=\"${ccToaster.container}\">\n <div class=\"${ccToaster.toaster}\" id=\"w-toast-container-list\">\n ${repeat(\n this._toastsArray,\n (toast) => toast.id,\n (toast) =>\n html` <w-toast\n class=\"${ccToaster.content}\"\n id=\"${toast.id}\"\n type=\"${toast.type}\"\n text=\"${toast.text}\"\n ?canclose=${toast.canclose}\n @close=${() => this.del(toast.id)}\n >\n </w-toast>`\n )}\n </div>\n </aside>\n `;\n }\n}\n\nif (!customElements.get(\"w-toast-container\")) {\n customElements.define(\"w-toast-container\", WarpToastContainer);\n}\n", "export const windowExists = typeof window !== 'undefined';\n", "import { windowExists } from '../utils/window-exists';\n\n/**\n * Toast helper function options\n * @typedef {Object} ToastOptions\n * @property {(number|string)} [id] Custom identifier\n * @property {('success'|'error'|'warning'|'info')} [type] Type of alert\n * @property {String} [text] The toast message. Only needed when updating text on existing toast\n * @property {(number|string)} [duration] Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property {Boolean} [canclose] Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\n/**\n * Creates a new toast\n * @param {String} message Message\n * @param {ToastOptions?} options Toast options\n * @returns {ToastOptions} Toast details\n */\nexport function toast(message, options) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n\n const data = {\n id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),\n text: message,\n duration: 5000,\n type: 'success',\n ...options,\n };\n\n toast.set(data);\n return data;\n}\n\n/**\n * Remove an existing toast\n * @param {String|Number} id Toast identifier\n * @return {Promise<Boolean>} Resolves to true if deleted, false if not found\n */\nexport function removeToast(id) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n return toast.del(id);\n}\n\n/**\n * Update an existing toast\n * @param {String|Number} id Toast identifier\n * @param {ToastOptions?} options Toast options\n * @returns {WarpToastContainer} Toast details\n */\nexport function updateToast(id, options) {\n if (!windowExists) return;\n const toast = customElements.get('w-toast-container').init();\n toast.set({ ...toast.get(id), ...options });\n return toast.get(id);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["css", "html", "WarpElement", "classMap", "when", "box", "toaster", "toast", "buttonReset", "expandable", "box", "buttonDefaultStyling", "buttonColors", "buttonTypes", "buttonSizes", "buttonTextSizes", "buttonVariants", "button", "modal", "buttonTextSizes", "buttonTypes", "buttonColors", "label", "prefixSuffixWrapperBase", "suffix", "prefix", "clickable", "label", "attention", "buttonTextSizes", "buttonTypes", "buttonColors", "windowExists", "prefersMotion", "query", "callback", "matches", "removeTransition", "el", "addTransition", "timing", "getAfterExpandCallback", "done", "getAfterCollapseCallback", "expand", "returnPromise", "r", "afterExpandCallback", "dest", "collapse", "afterCollapseCallback", "original", "classes", "definition", "defn", "key", "value", "className", "classMap", "toastType", "WarpToast", "WarpElement", "expand", "toast", "_a", "_b", "html", "resolve", "collapse", "event", "when", "__publicField", "css", "css", "html", "WarpElement", "repeat", "WarpToastContainer", "WarpElement", "keep", "remove", "toast", "collapseTasks", "id", "el", "result", "__spreadProps", "__spreadValues", "html", "toaster", "repeat", "__publicField", "css", "windowExists", "toast", "message", "options", "windowExists", "data", "__spreadValues", "removeToast", "id", "updateToast"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@warp-ds/elements",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.2.0-next.
|
|
4
|
+
"version": "1.2.0-next.6",
|
|
5
5
|
"description": "Custom elements for Warp",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./dist/index.js",
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"@lingui/core": "^4.5.0",
|
|
97
97
|
"@warp-ds/core": "1.0.0",
|
|
98
|
-
"@warp-ds/css": "^1.
|
|
98
|
+
"@warp-ds/css": "^1.3.0",
|
|
99
99
|
"@warp-ds/elements-core": "0.0.1-alpha.9",
|
|
100
100
|
"@warp-ds/icons": "1.1.1"
|
|
101
101
|
},
|