@warp-ds/elements 2.0.0 → 2.0.1-next.2
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 +59 -31
- package/dist/index.js.map +4 -4
- package/dist/packages/badge/index.js +1 -1
- package/dist/packages/badge/index.js.map +2 -2
- package/dist/packages/modal/index.js +74 -14
- package/dist/packages/modal/index.js.map +4 -4
- package/dist/packages/modal/locales/da/messages.d.mts +1 -0
- package/dist/packages/modal/locales/en/messages.d.mts +1 -0
- package/dist/packages/modal/locales/fi/messages.d.mts +1 -0
- package/dist/packages/modal/locales/nb/messages.d.mts +1 -0
- package/dist/packages/modal/modal-header.d.ts +1 -1
- package/package.json +1 -1
|
@@ -288,7 +288,7 @@ var WarpBadge = class extends WarpElement {
|
|
|
288
288
|
};
|
|
289
289
|
__publicField(WarpBadge, "properties", {
|
|
290
290
|
variant: {
|
|
291
|
-
type: "neutral" | "info" | "positive" | "warning" | "negative" | "disabled" | "
|
|
291
|
+
type: "neutral" | "info" | "positive" | "warning" | "negative" | "disabled" | "price"
|
|
292
292
|
},
|
|
293
293
|
position: {
|
|
294
294
|
type: "top-left" | "top-right" | "bottom-right" | "bottom-left"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/badge/index.js", "../../../node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js", "../../../node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js"],
|
|
4
|
-
"sourcesContent": ["import { html } from 'lit';\n\nimport { classNames } from '@chbphone55/classnames';\nimport { badge as ccBadge } from '@warp-ds/css/component-classes';\nimport WarpElement from '@warp-ds/elements-core';\n\nclass WarpBadge extends WarpElement {\n static properties = {\n variant: {\n type: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'notification' | 'price',\n },\n position: {\n type: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left',\n },\n };\n\n static styles = [WarpElement.styles];\n\n constructor() {\n super();\n\n this.variant = 'neutral';\n }\n\n get _class() {\n return classNames([\n ccBadge.base,\n ccBadge[this.variant],\n !!this.position && ccBadge.positionBase,\n this.position === 'top-left' && ccBadge.positionTL,\n this.position === 'top-right' && ccBadge.positionTR,\n this.position === 'bottom-right' && ccBadge.positionBR,\n this.position === 'bottom-left' && ccBadge.positionBL,\n ]);\n }\n\n render() {\n return html`\n <div class=\"${this._class}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get('w-badge')) {\n customElements.define('w-badge', WarpBadge);\n}\n\nexport { WarpBadge };\n", "var r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return t.reduce(function(t,n){return t.concat(\"string\"==typeof n?n:Array.isArray(n)?r.apply(void 0,n):\"object\"==typeof n&&n?Object.keys(n).map(function(r){return n[r]?r:\"\"}):\"\")},[]).join(\" \")};export{r as classNames};\n", "export const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',\n active: 'bg-[--w-s-icon-selected]',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'bg-[--w-color-badge-neutral-background] s-text',\n info: 'bg-[--w-color-badge-info-background] s-text',\n positive: 'bg-[--w-color-badge-positive-background] s-text',\n warning: 'bg-[--w-color-badge-warning-background] s-text',\n negative: 'bg-[--w-color-badge-negative-background] s-text',\n disabled: 's-bg-disabled s-text',\n price: 'bg-[--w-black/70] s-text-inverted-static',\n sponsored: 'bg-[--w-color-badge-sponsored-background] s-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: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',\n trackDisabled: 'pointer-events-none',\n activeTrack: 'absolute h-6 top-[19px] rounded-4',\n activeTrackEnabled: 's-bg-primary',\n activeTrackDisabled: 's-bg-disabled pointer-events-none',\n thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',\n thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n base: '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: 's-bg-info-subtle',\n neutral: 's-surface-sunken',\n bordered: 'border-2 s-border s-bg',\n};\n\nexport const pill = {\n wrapper: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion:\n 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',\n filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',\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 py-8 rounded-r-full',\n a11y: 'sr-only',\n};\n\nexport const step = {\n base: 'group/step',\n vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n alignLeft: 'grid-cols-[20px_1fr]',\n alignRight: 'grid-cols-[1fr_20px] text-right',\n\n dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',\n dotAlignRight: 'col-start-2',\n dotHorizontal: 'row-start-2 justify-self-end',\n dotActive: 's-border-primary s-bg-primary',\n dotIncomplete: 's-border s-bg',\n\n line: 'group-last/stepv:hidden transition-colors duration-300',\n lineVertical: 'w-2 h-full justify-self-center',\n lineAlignRight: 'col-start-2',\n lineHorizontal: 'h-2 w-full row-start-2',\n lineHorizontalAlignRight: 'group-last/steph:bg-transparent',\n lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',\n\n lineIncomplete: 's-bg-disabled',\n lineComplete: 's-bg-primary',\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 wrapper: 'w-full',\n horizontal: 'flex',\n};\n\nexport const card = {\n base: 'cursor-pointer overflow-hidden relative transition-all',\n shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',\n selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',\n outline: 'absolute border-2 rounded-8 inset-0 transition-all',\n outlineUnselected: 'border-transparent group-active:s-border-active',\n outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',\n flat: 'border-2 rounded-4',\n flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n flatSelected:\n 's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',\n disabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 's-bg-primary group-hover:s-bg-primary-hover',\n trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',\n trackDisabled: 's-bg-disabled-subtle',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 's-bg shadow-s',\n handleDisabled: 's-bg-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n content: 'w-full',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',\n positive: 's-bg-positive-subtle s-border-positive-subtle s-text',\n warning: 's-bg-warning-subtle s-border-warning-subtle s-text',\n negative: 's-bg-negative-subtle s-border-negative-subtle s-text',\n iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 's-icon-positive',\n iconWarning: 's-icon-warning',\n iconNegative: 's-icon-negative',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',\n};\n\nexport const tabs = {\n wrapper: 'inline-block border-b s-border mb-32',\n base: 'inline-grid relative -mb-1',\n selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',\n};\n\nexport const tab = {\n base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',\n inactive: 's-text-subtle',\n active: 's-text-link',\n icon: 'mx-auto',\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};\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 = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n wrapper: 'will-change-height s-text',\n box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',\n bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',\n chevron: 'inline-block align-middle s-icon',\n chevronNonBox: 'ml-8',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n\n // These are web component specific classes, using the ::part-selector:\n elementsChevronDownTransform:\n 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n elementsChevronUpTransform:\n 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',\n contentWithTitle: 'pt-0',\n title: 'flex w-full justify-between items-center',\n titleType: 't4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary:\n 's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',\n secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',\n utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',\n pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n disabled: 's-text-inverted s-bg-disabled',\n quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',\n utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',\n negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',\n loading: 's-text s-bg-subtle',\n link: 's-text-link',\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: `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 focus: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: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled: `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: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled: `${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: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled: `${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: `${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: `${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 active:no-underline hover:no-underline focus: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: 'shadow-s',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative s-text',\n outlined: 'border hover:z-30',\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 outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',\n outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',\n unselected:\n 's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',\n selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',\n};\n\nexport const modal = {\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',\n base: 'pb-safe-[32] shadow-m 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 bg-[--w-s-color-surface-elevated-100] 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: '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 self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n 'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start 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 modalElement = {\n // several items in here are 'resets' for the <dialog> element\n dialogEl:\n 'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',\n dialogInner:\n 'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',\n contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n header: 'relative pb-8',\n headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',\n headerButton:\n 'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',\n headerButtonLeft:\n '-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n headerCloseButton:\n '-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,\n headerTitle: 'mb-0 t3 self-center',\n headerTitleWithBackButton: 'justify-self-center',\n headerTitleWithoutBackButton: 'col-span-2',\n headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',\n};\n\nexport const alert = {\n wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',\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: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',\n negativeIcon: 's-icon-negative',\n positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',\n positiveIcon: 's-icon-positive',\n warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',\n warningIcon: 's-icon-warning',\n info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',\n infoIcon: 's-icon-info',\n};\n\nexport const input = {\n // wrapper classes\n wrapper: 'relative',\n // input classes\n base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true\n default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly\n disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly\n invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly\n readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly\n placeholder: 'placeholder:s-text-placeholder',\n suffix: 'pr-40',\n prefix: 'pl-[var(--w-prefix-width,_40px)]',\n // textarea classes\n textArea: 'min-h-[42] sm:min-h-[45]',\n};\n\nexport const select = {\n base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',\n default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',\n disabled:\n 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',\n invalid:\n 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',\n readOnly: 's-text bg-transparent pl-0 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: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',\n optional: 'pl-8 font-normal text-s s-text-subtle',\n};\n\nexport const helpText = {\n base: 'text-xs mt-4 block',\n color: 's-text-subtle',\n colorInvalid: 's-text-negative',\n};\n\nconst prefixSuffixWrapper =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapper + '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 s-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapper + '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 s-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 's-text',\n link: 's-text-link',\n separator: 'select-none s-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n // wrapper classes\n field: 'relative text-m', // true\n wrapper: 'relative py-1', // true\n wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth\n wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,\n\n // group classes\n radioButtonsGroup: 'group', // isRadioButton\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth\n\n // input classes\n input: 'peer',\n a11y: 'sr-only',\n\n // label classes\n label:\n 'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton\n labelBefore: 'before:content-[\"\"] before:block', // !isRadioButton && !isIndeterminate\n checkbox:\n 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled\n checkboxInvalid:\n 'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled\n checkboxDisabled:\n 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled\n indeterminate:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled\n indeterminateInvalid:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled\n indeterminateDisabled:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled\n radio:\n 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid\n radioInvalid:\n 'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled\n radioDisabled:\n 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled\n radioButtonsLabel:\n 'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border 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', // isRadioButtons\n radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall\n radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall\n};\n\nexport const deadToggle = {\n wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,\n input: `${toggle.input} hidden`,\n inputVue: 'hidden',\n labelVue: '-mt-2',\n labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,\n labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: 'antialiased block relative text-s font-bold s-text px-12 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 base: 'absolute left-0 right-0 pb-8 rounded-8 shadow-m',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8',\n optionUnselected: 's-bg hover:s-bg-hover',\n optionSelected: 's-bg-selected hover:s-bg-selected-hover',\n textMatch: 'font-bold',\n a11y: 'sr-only',\n};\n\nexport const attention = {\n base: 'border-2 relative flex items-start',\n tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',\n callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',\n highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',\n popover:\n 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',\n\n arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeftStart: '-left-[8px]',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionLeftEnd: '-left-[8px]',\n arrowDirectionRightStart: '-right-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionRightEnd: '-right-[8px]',\n arrowDirectionBottomStart: '-bottom-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionBottomEnd: '-bottom-[8px]',\n arrowDirectionTopStart: '-top-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowDirectionTopEnd: '-top-[8px]',\n arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',\n arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',\n arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n\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};\n\nexport const pagination = {\n link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',\n currentPage: 'block md:hidden p-8 font-bold',\n icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n containerNav: 'flex items-center justify-center p-8',\n a11y: 'sr-only',\n pages: 'hidden md:block s-text-link',\n active: 's-bg-primary s-text-inverted',\n notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n};\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { html } from 'lit';\n\nimport { classNames } from '@chbphone55/classnames';\nimport { badge as ccBadge } from '@warp-ds/css/component-classes';\nimport WarpElement from '@warp-ds/elements-core';\n\nclass WarpBadge extends WarpElement {\n static properties = {\n variant: {\n type: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price',\n },\n position: {\n type: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left',\n },\n };\n\n static styles = [WarpElement.styles];\n\n constructor() {\n super();\n\n this.variant = 'neutral';\n }\n\n get _class() {\n return classNames([\n ccBadge.base,\n ccBadge[this.variant],\n !!this.position && ccBadge.positionBase,\n this.position === 'top-left' && ccBadge.positionTL,\n this.position === 'top-right' && ccBadge.positionTR,\n this.position === 'bottom-right' && ccBadge.positionBR,\n this.position === 'bottom-left' && ccBadge.positionBL,\n ]);\n }\n\n render() {\n return html`\n <div class=\"${this._class}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get('w-badge')) {\n customElements.define('w-badge', WarpBadge);\n}\n\nexport { WarpBadge };\n", "var r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return t.reduce(function(t,n){return t.concat(\"string\"==typeof n?n:Array.isArray(n)?r.apply(void 0,n):\"object\"==typeof n&&n?Object.keys(n).map(function(r){return n[r]?r:\"\"}):\"\")},[]).join(\" \")};export{r as classNames};\n", "export const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',\n active: 'bg-[--w-s-icon-selected]',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'bg-[--w-color-badge-neutral-background] s-text',\n info: 'bg-[--w-color-badge-info-background] s-text',\n positive: 'bg-[--w-color-badge-positive-background] s-text',\n warning: 'bg-[--w-color-badge-warning-background] s-text',\n negative: 'bg-[--w-color-badge-negative-background] s-text',\n disabled: 's-bg-disabled s-text',\n price: 'bg-[--w-black/70] s-text-inverted-static',\n sponsored: 'bg-[--w-color-badge-sponsored-background] s-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: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',\n trackDisabled: 'pointer-events-none',\n activeTrack: 'absolute h-6 top-[19px] rounded-4',\n activeTrackEnabled: 's-bg-primary',\n activeTrackDisabled: 's-bg-disabled pointer-events-none',\n thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',\n thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n base: '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: 's-bg-info-subtle',\n neutral: 's-surface-sunken',\n bordered: 'border-2 s-border s-bg',\n};\n\nexport const pill = {\n wrapper: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion:\n 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',\n filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',\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 py-8 rounded-r-full',\n a11y: 'sr-only',\n};\n\nexport const step = {\n base: 'group/step',\n vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n alignLeft: 'grid-cols-[20px_1fr]',\n alignRight: 'grid-cols-[1fr_20px] text-right',\n\n dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',\n dotAlignRight: 'col-start-2',\n dotHorizontal: 'row-start-2 justify-self-end',\n dotActive: 's-border-primary s-bg-primary',\n dotIncomplete: 's-border s-bg',\n\n line: 'group-last/stepv:hidden transition-colors duration-300',\n lineVertical: 'w-2 h-full justify-self-center',\n lineAlignRight: 'col-start-2',\n lineHorizontal: 'h-2 w-full row-start-2',\n lineHorizontalAlignRight: 'group-last/steph:bg-transparent',\n lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',\n\n lineIncomplete: 's-bg-disabled',\n lineComplete: 's-bg-primary',\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 wrapper: 'w-full',\n horizontal: 'flex',\n};\n\nexport const card = {\n base: 'cursor-pointer overflow-hidden relative transition-all',\n shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',\n selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',\n outline: 'absolute border-2 rounded-8 inset-0 transition-all',\n outlineUnselected: 'border-transparent group-active:s-border-active',\n outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',\n flat: 'border-2 rounded-4',\n flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n flatSelected:\n 's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',\n disabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 's-bg-primary group-hover:s-bg-primary-hover',\n trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',\n trackDisabled: 's-bg-disabled-subtle',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 's-bg shadow-s',\n handleDisabled: 's-bg-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n content: 'w-full',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',\n positive: 's-bg-positive-subtle s-border-positive-subtle s-text',\n warning: 's-bg-warning-subtle s-border-warning-subtle s-text',\n negative: 's-bg-negative-subtle s-border-negative-subtle s-text',\n iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 's-icon-positive',\n iconWarning: 's-icon-warning',\n iconNegative: 's-icon-negative',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',\n};\n\nexport const tabs = {\n wrapper: 'inline-block border-b s-border mb-32',\n base: 'inline-grid relative -mb-1',\n selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',\n};\n\nexport const tab = {\n base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',\n inactive: 's-text-subtle',\n active: 's-text-link',\n icon: 'mx-auto',\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};\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 = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n wrapper: 'will-change-height s-text',\n box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',\n bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',\n chevron: 'inline-block align-middle s-icon',\n chevronNonBox: 'ml-8',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n\n // These are web component specific classes, using the ::part-selector:\n elementsChevronDownTransform:\n 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n elementsChevronUpTransform:\n 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',\n contentWithTitle: 'pt-0',\n title: 'flex w-full justify-between items-center',\n titleType: 't4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary:\n 's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',\n secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',\n utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',\n pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n disabled: 's-text-inverted s-bg-disabled',\n quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',\n utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',\n negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',\n loading: 's-text s-bg-subtle',\n link: 's-text-link',\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: `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 focus: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: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled: `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: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled: `${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: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled: `${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: `${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: `${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 active:no-underline hover:no-underline focus: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: 'shadow-s',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative s-text',\n outlined: 'border hover:z-30',\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 outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',\n outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',\n unselected:\n 's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',\n selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',\n};\n\nexport const modal = {\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',\n base: 'pb-safe-[32] shadow-m 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 bg-[--w-s-color-surface-elevated-100] 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: '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 self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n 'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start 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 modalElement = {\n // several items in here are 'resets' for the <dialog> element\n dialogEl:\n 'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',\n dialogInner:\n 'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',\n contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n header: 'relative pb-8',\n headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',\n headerButton:\n 'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',\n headerButtonLeft:\n '-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n headerCloseButton:\n '-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,\n headerTitle: 'mb-0 t3 self-center',\n headerTitleWithBackButton: 'justify-self-center',\n headerTitleWithoutBackButton: 'col-span-2',\n headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',\n};\n\nexport const alert = {\n wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',\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: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',\n negativeIcon: 's-icon-negative',\n positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',\n positiveIcon: 's-icon-positive',\n warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',\n warningIcon: 's-icon-warning',\n info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',\n infoIcon: 's-icon-info',\n};\n\nexport const input = {\n // wrapper classes\n wrapper: 'relative',\n // input classes\n base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true\n default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly\n disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly\n invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly\n readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly\n placeholder: 'placeholder:s-text-placeholder',\n suffix: 'pr-40',\n prefix: 'pl-[var(--w-prefix-width,_40px)]',\n // textarea classes\n textArea: 'min-h-[42] sm:min-h-[45]',\n};\n\nexport const select = {\n base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',\n default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',\n disabled:\n 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',\n invalid:\n 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',\n readOnly: 's-text bg-transparent pl-0 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: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',\n optional: 'pl-8 font-normal text-s s-text-subtle',\n};\n\nexport const helpText = {\n base: 'text-xs mt-4 block',\n color: 's-text-subtle',\n colorInvalid: 's-text-negative',\n};\n\nconst prefixSuffixWrapper =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapper + '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 s-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapper + '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 s-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 's-text',\n link: 's-text-link',\n separator: 'select-none s-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n // wrapper classes\n field: 'relative text-m', // true\n wrapper: 'relative py-1', // true\n wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth\n wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,\n\n // group classes\n radioButtonsGroup: 'group', // isRadioButton\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth\n\n // input classes\n input: 'peer',\n a11y: 'sr-only',\n\n // label classes\n label:\n 'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton\n labelBefore: 'before:content-[\"\"] before:block', // !isRadioButton && !isIndeterminate\n checkbox:\n 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled\n checkboxInvalid:\n 'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled\n checkboxDisabled:\n 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled\n indeterminate:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled\n indeterminateInvalid:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled\n indeterminateDisabled:\n 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled\n radio:\n 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid\n radioInvalid:\n 'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled\n radioDisabled:\n 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled\n radioButtonsLabel:\n 'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border 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', // isRadioButtons\n radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall\n radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall\n};\n\nexport const deadToggle = {\n wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,\n input: `${toggle.input} hidden`,\n inputVue: 'hidden',\n labelVue: '-mt-2',\n labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,\n labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: 'antialiased block relative text-s font-bold s-text px-12 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 base: 'absolute left-0 right-0 pb-8 rounded-8 shadow-m',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8',\n optionUnselected: 's-bg hover:s-bg-hover',\n optionSelected: 's-bg-selected hover:s-bg-selected-hover',\n textMatch: 'font-bold',\n a11y: 'sr-only',\n};\n\nexport const attention = {\n base: 'border-2 relative flex items-start',\n tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',\n callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',\n highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',\n popover:\n 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',\n\n arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeftStart: '-left-[8px]',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionLeftEnd: '-left-[8px]',\n arrowDirectionRightStart: '-right-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionRightEnd: '-right-[8px]',\n arrowDirectionBottomStart: '-bottom-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionBottomEnd: '-bottom-[8px]',\n arrowDirectionTopStart: '-top-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowDirectionTopEnd: '-top-[8px]',\n arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',\n arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',\n arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n\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};\n\nexport const pagination = {\n link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',\n currentPage: 'block md:hidden p-8 font-bold',\n icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n containerNav: 'flex items-center justify-center p-8',\n a11y: 'sr-only',\n pages: 'hidden md:block s-text-link',\n active: 's-bg-primary s-text-inverted',\n notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["t", "n", "r"]
|
|
7
7
|
}
|
|
@@ -1370,10 +1370,6 @@ var Move = class {
|
|
|
1370
1370
|
}
|
|
1371
1371
|
};
|
|
1372
1372
|
|
|
1373
|
-
// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
|
|
1374
|
-
import { LitElement } from "lit";
|
|
1375
|
-
import { unsafeStatic, html as html2 } from "lit/static-html.js";
|
|
1376
|
-
|
|
1377
1373
|
// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
|
|
1378
1374
|
var import_unraw = __toESM(require_dist(), 1);
|
|
1379
1375
|
|
|
@@ -1658,17 +1654,17 @@ var I18n = class extends EventEmitter {
|
|
|
1658
1654
|
}
|
|
1659
1655
|
this.emit("change");
|
|
1660
1656
|
}
|
|
1661
|
-
_load(locale,
|
|
1657
|
+
_load(locale, messages9) {
|
|
1662
1658
|
const maybeMessages = this._messages[locale];
|
|
1663
1659
|
if (!maybeMessages) {
|
|
1664
|
-
this._messages[locale] =
|
|
1660
|
+
this._messages[locale] = messages9;
|
|
1665
1661
|
} else {
|
|
1666
|
-
Object.assign(maybeMessages,
|
|
1662
|
+
Object.assign(maybeMessages, messages9);
|
|
1667
1663
|
}
|
|
1668
1664
|
}
|
|
1669
|
-
load(localeOrMessages,
|
|
1670
|
-
if (typeof localeOrMessages == "string" && typeof
|
|
1671
|
-
this._load(localeOrMessages,
|
|
1665
|
+
load(localeOrMessages, messages9) {
|
|
1666
|
+
if (typeof localeOrMessages == "string" && typeof messages9 === "object") {
|
|
1667
|
+
this._load(localeOrMessages, messages9);
|
|
1672
1668
|
} else {
|
|
1673
1669
|
Object.entries(localeOrMessages).forEach(
|
|
1674
1670
|
([locale, messages23]) => this._load(locale, messages23)
|
|
@@ -1679,10 +1675,10 @@ var I18n = class extends EventEmitter {
|
|
|
1679
1675
|
/**
|
|
1680
1676
|
* @param options {@link LoadAndActivateOptions}
|
|
1681
1677
|
*/
|
|
1682
|
-
loadAndActivate({ locale, locales, messages:
|
|
1678
|
+
loadAndActivate({ locale, locales, messages: messages9 }) {
|
|
1683
1679
|
this._locale = locale;
|
|
1684
1680
|
this._locales = locales || void 0;
|
|
1685
|
-
this._messages[this._locale] =
|
|
1681
|
+
this._messages[this._locale] = messages9;
|
|
1686
1682
|
this.emit("change");
|
|
1687
1683
|
}
|
|
1688
1684
|
activate(locale, locales) {
|
|
@@ -1741,6 +1737,8 @@ function setupI18n(params = {}) {
|
|
|
1741
1737
|
var i18n = setupI18n();
|
|
1742
1738
|
|
|
1743
1739
|
// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
|
|
1740
|
+
import { LitElement } from "lit";
|
|
1741
|
+
import { unsafeStatic, html as html2 } from "lit/static-html.js";
|
|
1744
1742
|
var messages = JSON.parse('{"icon.title.arrow-left":"Pil som peker mot venstre"}');
|
|
1745
1743
|
var messages2 = JSON.parse('{"icon.title.arrow-left":"Leftward-pointing arrow"}');
|
|
1746
1744
|
var messages3 = JSON.parse('{"icon.title.arrow-left":"Vasemmalle osoittava nuoli"}');
|
|
@@ -1923,11 +1921,60 @@ if (!customElements.get("w-icon-close-16")) {
|
|
|
1923
1921
|
// packages/modal/modal-header.js
|
|
1924
1922
|
import WarpElement2 from "@warp-ds/elements-core";
|
|
1925
1923
|
import { createRef, ref } from "lit/directives/ref.js";
|
|
1924
|
+
|
|
1925
|
+
// packages/i18n.ts
|
|
1926
|
+
var supportedLocales3 = ["en", "nb", "fi", "da"];
|
|
1927
|
+
var defaultLocale4 = "en";
|
|
1928
|
+
var getSupportedLocale3 = (usedLocale) => {
|
|
1929
|
+
return supportedLocales3.find(
|
|
1930
|
+
(locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
|
|
1931
|
+
) || defaultLocale4;
|
|
1932
|
+
};
|
|
1933
|
+
function detectLocale3() {
|
|
1934
|
+
if (typeof window === "undefined") {
|
|
1935
|
+
const serverLocale = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
|
|
1936
|
+
return getSupportedLocale3(serverLocale);
|
|
1937
|
+
}
|
|
1938
|
+
try {
|
|
1939
|
+
const htmlLocale = document.documentElement.lang;
|
|
1940
|
+
return getSupportedLocale3(htmlLocale);
|
|
1941
|
+
} catch (e) {
|
|
1942
|
+
console.warn("could not detect locale, falling back to source locale", e);
|
|
1943
|
+
return defaultLocale4;
|
|
1944
|
+
}
|
|
1945
|
+
}
|
|
1946
|
+
var getMessages3 = (locale, enMsg, nbMsg, fiMsg, daMsg) => {
|
|
1947
|
+
if (locale === "nb") return nbMsg;
|
|
1948
|
+
if (locale === "fi") return fiMsg;
|
|
1949
|
+
if (locale === "da") return daMsg;
|
|
1950
|
+
return enMsg;
|
|
1951
|
+
};
|
|
1952
|
+
var activateI18n3 = (enMessages, nbMessages, fiMessages, daMessages) => {
|
|
1953
|
+
const locale = detectLocale3();
|
|
1954
|
+
const messages9 = getMessages3(locale, enMessages, nbMessages, fiMessages, daMessages);
|
|
1955
|
+
i18n.load(locale, messages9);
|
|
1956
|
+
i18n.activate(locale);
|
|
1957
|
+
};
|
|
1958
|
+
|
|
1959
|
+
// packages/modal/locales/da/messages.mjs
|
|
1960
|
+
var messages5 = JSON.parse('{"modal.aria.back":"Tilbage","modal.aria.close":"Luk"}');
|
|
1961
|
+
|
|
1962
|
+
// packages/modal/locales/en/messages.mjs
|
|
1963
|
+
var messages6 = JSON.parse('{"modal.aria.back":"Back","modal.aria.close":"Close"}');
|
|
1964
|
+
|
|
1965
|
+
// packages/modal/locales/fi/messages.mjs
|
|
1966
|
+
var messages7 = JSON.parse('{"modal.aria.back":"Takaisin","modal.aria.close":"Sulje"}');
|
|
1967
|
+
|
|
1968
|
+
// packages/modal/locales/nb/messages.mjs
|
|
1969
|
+
var messages8 = JSON.parse('{"modal.aria.back":"Tilbake","modal.aria.close":"Lukk"}');
|
|
1970
|
+
|
|
1971
|
+
// packages/modal/modal-header.js
|
|
1926
1972
|
var NO_CLOSE_BUTTON = "no-close";
|
|
1927
1973
|
var ModalHeader = class extends CanCloseMixin(WarpElement2) {
|
|
1928
1974
|
constructor() {
|
|
1929
1975
|
super();
|
|
1930
1976
|
__publicField(this, "titleEl", createRef());
|
|
1977
|
+
activateI18n3(messages6, messages8, messages7, messages5);
|
|
1931
1978
|
this._hasTopContent = false;
|
|
1932
1979
|
}
|
|
1933
1980
|
render() {
|
|
@@ -1958,14 +2005,27 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
|
|
|
1958
2005
|
].join(" ");
|
|
1959
2006
|
}
|
|
1960
2007
|
get backButton() {
|
|
1961
|
-
return this.back && !this._hasTopContent ? html4
|
|
2008
|
+
return this.back && !this._hasTopContent ? html4`<button
|
|
2009
|
+
type="button"
|
|
2010
|
+
aria-label="${i18n._({
|
|
2011
|
+
id: "modal.aria.back",
|
|
2012
|
+
message: "Back",
|
|
2013
|
+
comment: "Aria label for the back button in modal"
|
|
2014
|
+
})}"
|
|
2015
|
+
class="${modalElement.headerButton} ${modalElement.headerButtonLeft}"
|
|
2016
|
+
@click="${this.emitBack}">
|
|
1962
2017
|
<w-icon-arrow-left-16></w-icon-arrow-left-16>
|
|
1963
2018
|
</button>` : nothing;
|
|
1964
2019
|
}
|
|
1965
2020
|
get closeButton() {
|
|
1966
2021
|
if (this[NO_CLOSE_BUTTON]) return nothing;
|
|
1967
|
-
return html4
|
|
2022
|
+
return html4`<button
|
|
1968
2023
|
type="button"
|
|
2024
|
+
aria-label="${i18n._({
|
|
2025
|
+
id: "modal.aria.close",
|
|
2026
|
+
message: "Close",
|
|
2027
|
+
comment: "Aria label for the close button in modal"
|
|
2028
|
+
})}"
|
|
1969
2029
|
class="${modalElement.headerButton} ${this._hasTopContent ? modalElement.headerCloseButtonOnImage : modalElement.headerCloseButton}"
|
|
1970
2030
|
@click="${this.close}">
|
|
1971
2031
|
<w-icon-close-16></w-icon-close-16>
|