@warp-ds/elements 2.2.0-next.2 → 2.2.0-next.4

package/dist/packages/badge/index.d.ts

@@ -1,4 +1,4 @@
-export class WarpBadge {
+export class WarpBadge extends WarpElement {
     static properties: {
         variant: {
             type: number;
@@ -7,8 +7,9 @@ export class WarpBadge {
             type: number;
         };
     };
-    static styles: any[];
+    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
     variant: string;
     get _class(): string;
     render(): import("lit").TemplateResult<1>;
 }
+import WarpElement from '@warp-ds/elements-core';

package/dist/packages/badge/index.js

@@ -15,7 +15,7 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
   neutral: "bg-[--w-color-badge-neutral-background] s-text",

package/dist/packages/badge/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 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.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js"],
+  "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.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js"],
   "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-[1.92rem] 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 s-border-selected',\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 s-bg pb-4 rounded-8 overflow-hidden shadow-m',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8',\n  optionUnselected: '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\n// remove these in v3\nexport const backwardsCompatibleClasses = {\n  removedActiveTrack: 'top-[19px]',\n};\n"],
   "mappings": "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",
   "names": ["t", "n", "r"]

package/dist/packages/box/index.d.ts

@@ -1,4 +1,4 @@
-export class WarpBox {
+export class WarpBox extends WarpElement {
     static properties: {
         bleed: {
             type: BooleanConstructor;
@@ -16,8 +16,10 @@ export class WarpBox {
             type: StringConstructor;
         };
     };
-    static styles: any[];
+    static styles: (import("lit").CSSResult | (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[])[];
     get _class(): string;
-    get _optOutRoleWithDefault(): any;
+    get _optOutRoleWithDefault(): string | typeof nothing;
     render(): import("lit").TemplateResult<1>;
 }
+import WarpElement from '@warp-ds/elements-core';
+import { nothing } from 'lit';

package/dist/packages/box/index.js

@@ -15,7 +15,7 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js
 var box = {
   base: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable

package/dist/packages/box/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/box/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.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js"],
+  "sources": ["../../../packages/box/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.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js"],
   "sourcesContent": ["import { css, html, nothing } from 'lit';\n\nimport { classNames } from '@chbphone55/classnames';\nimport { box as ccBox } from '@warp-ds/css/component-classes';\nimport WarpElement from '@warp-ds/elements-core';\n\nclass WarpBox extends WarpElement {\n  static properties = {\n    bleed: { type: Boolean },\n    bordered: { type: Boolean },\n    info: { type: Boolean },\n    neutral: { type: Boolean },\n    role: { type: String },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0 !important;\n      }\n    `,\n  ];\n\n  get _class() {\n    return classNames([\n      ccBox.base,\n      this.bleed && ccBox.bleed,\n      this.info && ccBox.info,\n      this.neutral && ccBox.neutral,\n      this.bordered && ccBox.bordered,\n    ]);\n  }\n\n  get _optOutRoleWithDefault() {\n    return this.role === '' ? nothing : this.role ?? 'region';\n  }\n\n  render() {\n    return html`\n      <div role=\"${this._optOutRoleWithDefault}\" class=\"${this._class}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get('w-box')) {\n  customElements.define('w-box', WarpBox);\n}\n\nexport { WarpBox };\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-[1.92rem] 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 s-border-selected',\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 s-bg pb-4 rounded-8 overflow-hidden shadow-m',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8',\n  optionUnselected: '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\n// remove these in v3\nexport const backwardsCompatibleClasses = {\n  removedActiveTrack: 'top-[19px]',\n};\n"],
   "mappings": "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",
   "names": ["t", "n", "r"]

package/dist/packages/breadcrumbs/index.d.ts

@@ -6,7 +6,7 @@ declare const WarpBreadcrumbs_base: {
     createProperty(name: any, options: any): void;
 };
 export class WarpBreadcrumbs extends WarpBreadcrumbs_base {
-    static styles: any[];
+    static styles: (import("lit").CSSResult | CSSStyleSheet | import("lit").CSSResultArray)[][];
     static properties: {
         ariaLabel: {
             type: StringConstructor;

package/dist/packages/breadcrumbs/index.js

@@ -1016,7 +1016,7 @@ var require_parser = __commonJS({
 // packages/breadcrumbs/index.js
 import { html } from "lit";
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
 // node_modules/.pnpm/@lingui+message-utils@5.2.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
@@ -1338,7 +1338,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1751,7 +1751,7 @@ function interleave(array, separator2) {
   return array.flatMap((el) => [el, separator2]).slice(0, -1);
 }
 
-// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "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]",
@@ -1994,9 +1994,7 @@ import WarpElement from "@warp-ds/elements-core";
 var supportedLocales = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale2 = "en";
 var getSupportedLocale = (usedLocale) => {
-  return supportedLocales.find(
-    (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
-  ) || defaultLocale2;
+  return supportedLocales.find((locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)) || defaultLocale2;
 };
 function detectLocale() {
   if (typeof window === "undefined") {
@@ -2074,7 +2072,7 @@ var WarpBreadcrumbs = class extends kebabCaseAttributes(WarpElement) {
     const flattenedChildren = Array.from(this.children).flat(Infinity).filter((child) => child);
     const styledChildren = flattenedChildren.map((child, index) => {
       if (typeof child === "string") {
-        const isLastEl = index === children.length - 1;
+        const isLastEl = index === this.children.length - 1;
         return html`<span class=${breadcrumbs.text} aria-current=${isLastEl ? "page" : void 0}>${child}</span>`;
       }
       child.classList.add(child.tagName === "A" ? breadcrumbs.link : breadcrumbs.text);