@warp-ds/elements 1.2.0 → 1.2.1-next.2

package/dist/packages/card/index.js

@@ -1,25 +1,322 @@
-var f=Object.defineProperty;var k=(n,l,c)=>l in n?f(n,l,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[l]=c;var s=(n,l,c)=>(k(n,typeof l!="symbol"?l+"":l,c),c);import{html as p,css as S}from"lit";import x from"@warp-ds/elements-core";import{ifDefined as L}from"lit/directives/if-defined.js";var u={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"i-bg-$color-box-info-background i-text-$color-box-info-text",neutral:"i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",bordered:"border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",infoClickable:"hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",neutralClickable:"hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",borderedClickable:"hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"};var a={card:"cursor-pointer overflow-hidden relative transition-all",cardShadow:"rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent",cardFlat:"border-2 rounded-4",cardFlatUnselected:"i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active",cardFlatSelected:"i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active",cardSelected:"i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active",cardOutline:"active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2",cardOutlineUnselected:"i-border-$color-card-border",cardOutlineSelected:"i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover",a11y:"sr-only"};var y="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",B={expandable:"will-change-height",expandableTitle:"font-bold i-text-$color-expandable-title-text",expandableBox:"i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 "+u.box,expandableBleed:u.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:y+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+u.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},d="font-bold focusable justify-center transition-colors ease-in-out",i={primary:"i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",secondary:"i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",utility:"i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",destructive:"i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",pill:"i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",disabled:"i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",quiet:"i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",utilityQuiet:"i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",negativeQuiet:"i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",loading:"i-text-$color-button-loading-text i-bg-$color-button-loading-background",link:"i-text-$color-button-link-text"},t={primary:`border-0 rounded-8 ${d}`,secondary:`border-2 rounded-8 ${d}`,utility:`border rounded-4 ${d}`,negative:`border-0 rounded-8 ${d}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${d}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${i.link}`},r={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},o={medium:"text-m leading-[24]",xsmall:"text-xs"},e={inProgress:`border-transparent animate-inprogress pointer-events-none ${i.loading}`,quiet:`border-0 rounded-8 ${d}`,utilityQuiet:`border-0 rounded-4 ${d}`,negativeQuiet:`border-0 rounded-8 ${d}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${i.disabled}`},q={secondary:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryHref:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryDisabled:`${r.medium} ${o.medium} ${t.secondary} ${e.isDisabled}`,secondarySmall:`${o.xsmall} ${r.xsmall} ${t.secondary} ${i.secondary}`,secondarySmallDisabled:`${o.xsmall} ${r.xsmall} ${t.secondary} ${e.isDisabled}`,secondaryQuiet:`${r.medium} ${o.medium} ${e.quiet} ${i.quiet}`,secondaryQuietDisabled:`${r.medium} ${o.medium} ${e.quiet} ${e.isDisabled}`,secondarySmallQuiet:`${o.xsmall} ${r.xsmall} ${e.quiet} ${i.quiet}`,secondarySmallQuietDisabled:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.isDisabled}`,secondaryLoading:`${r.medium} ${o.medium} ${t.secondary} ${e.inProgress}`,secondarySmallLoading:`${o.xsmall} ${r.xsmall}  ${t.secondary} ${e.inProgress}`,secondarySmallQuietLoading:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.inProgress}`,secondaryQuietLoading:`${r.medium} ${o.medium} ${e.quiet} ${e.inProgress}`,primary:`${r.large} ${o.medium} ${t.primary} ${i.primary}`,primaryDisabled:`${r.large} ${o.medium} ${e.isDisabled} ${t.primary}`,primarySmall:`${r.small} ${o.xsmall} ${t.primary} ${i.primary}`,primarySmallDisabled:`${r.small} ${o.xsmall} ${e.isDisabled} ${t.primary} `,primaryQuiet:`${r.large} ${o.medium} ${e.quiet} ${i.quiet}`,primaryQuietDisabled:`${r.large} ${o.medium} ${e.quiet} ${e.isDisabled}`,primarySmallQuiet:`${r.small} ${o.xsmall} ${e.quiet} ${i.quiet}`,primarySmallQuietDisabled:`${r.small} ${o.xsmall} ${e.quiet} ${e.isDisabled}`,primaryLoading:`${r.large} ${o.medium} ${e.inProgress} ${t.primary}`,primarySmallLoading:`${r.small} ${o.xsmall}  ${e.inProgress} ${t.primary}`,primarySmallQuietLoading:`${r.small} ${o.xsmall} ${e.quiet} ${e.inProgress} ${t.primary}`,primaryQuietLoading:`${r.large} ${o.medium} ${e.quiet} ${e.inProgress}`,utility:`${r.utility} ${o.medium} ${t.utility} ${i.utility}`,utilityDisabled:`${r.utility} ${o.medium} ${t.utility} ${e.isDisabled}`,utilityQuiet:`${r.large} ${o.medium} ${e.utilityQuiet} ${i.utilityQuiet}`,utilityQuietDisabled:`${r.large} ${o.medium} ${e.utilityQuiet} ${e.isDisabled}`,utilitySmall:`${r.smallUtility} ${o.xsmall} ${t.utility} ${i.utility}`,utilitySmallDisabled:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.isDisabled}`,utilitySmallQuiet:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${i.utilityQuiet}`,utilitySmallQuietDisabled:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${e.isDisabled}`,utilityLoading:`${r.large} ${o.medium} ${t.utility} ${e.inProgress}`,utilitySmallLoading:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.inProgress}`,utilityQuietLoading:`${r.large} ${o.medium} ${e.inProgress} ${e.utilityQuiet}`,utilitySmallQuietLoading:`${r.smallUtility} ${o.xsmall} ${e.inProgress} ${e.utilityQuiet}`,negative:`${r.large} ${o.medium} ${t.negative} ${i.destructive}`,negativeDisabled:`${r.large} ${o.medium} ${t.negative} ${e.isDisabled}`,negativeQuiet:`${r.large} ${o.medium} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeQuietDisabled:`${r.large} ${o.medium} ${e.negativeQuiet}${e.isDisabled}`,negativeSmall:`${r.small} ${o.xsmall} ${t.negative} ${i.destructive}`,negativeSmallDisabled:`${r.small} ${o.xsmall} ${t.negative} ${e.isDisabled}`,negativeSmallQuiet:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeSmallQuietDisabled:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.isDisabled}`,negativeLoading:`${r.large} ${o.medium} ${t.negative} ${e.inProgress}`,negativeSmallLoading:`${r.small} ${o.xsmall} ${e.inProgress} ${t.negative}`,negativeQuietLoading:`${r.large} ${o.medium} ${e.negativeQuiet} ${t.negative} ${e.inProgress}`,negativeSmallQuietLoading:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.inProgress}`,pill:`${r.pill} ${o.medium} ${t.pill} ${i.pill}`,pillSmall:`${r.pillSmall} ${o.xsmall} ${t.pill} ${i.pill}`,pillLoading:`${r.pill} ${o.medium} ${t.pill} ${e.inProgress}`,pillSmallLoading:`${r.pillSmall} ${o.xsmall} ${t.pill} ${e.inProgress}`,link:`${r.link} ${o.medium} ${t.link}`,linkSmall:`${r.link} ${o.xsmall} ${t.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var T={transparentBg:'before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',backdrop:"fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]",modal:"pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",content:"block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",footer:"flex justify-end shrink-0 px-16 sm:px-32",transitionTitle:"transition-all duration-300",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:`${o.medium} ${t.pill} ${i.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var w={label:"antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",labelInvalid:"i-text-$color-label-text-negative",optional:"pl-8 font-normal text-s i-text-$color-label-optional-text"};var $="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",C={wrapper:$+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"},P={wrapper:$+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"};var j={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${w.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};var z={base:"border-2 relative flex items-start",tooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",callout:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",highlight:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",popover:"i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",arrowBase:"absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",arrowDirectionLeft:"-left-[8px]",arrowDirectionRight:"-right-[8px]",arrowDirectionBottom:"-bottom-[8px]",arrowDirectionTop:"-top-[8px]",arrowTooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background",arrowCallout:"i-bg-$color-callout-background i-border-$color-callout-border",arrowPopover:"i-bg-$color-popover-background i-border-$color-popover-background",arrowHighlight:"i-bg-$color-callout-background i-border-$color-callout-border",content:"last-child:mb-0",notCallout:"absolute z-50",closeBtn:`${o.medium} ${t.pill} ${i.pill} justify-self-end -mr-8 ml-8`};import{classMap as D}from"lit/directives/class-map.js";function g(n){let l={};for(let[c,m]of Object.entries(n))for(let v of c.split(" "))l[v]=m;return D(l)}var h={ENTER:"Enter",SPACE:" "},b=class extends x{constructor(){super(),this.selected=!1,this.flat=!1,this.clickable=!1}get _outerClasses(){return g({[a.card]:!0,[a.cardShadow]:!this.flat,[a.cardSelected]:this.selected,[a.cardFlat]:this.flat,[this.selected?a.cardFlatSelected:a.cardFlatUnselected]:this.flat})}get _innerClasses(){return g({[a.cardOutline]:!0,[this.selected?a.cardOutlineSelected:a.cardOutlineUnselected]:!0})}get uuButton(){return p`<button
-      class="${a.a11y}"
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/card/index.js
+import { html, css } from "lit";
+import WarpElement from "@warp-ds/elements-core";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// node_modules/.pnpm/@warp-ds+css@1.4.2/node_modules/@warp-ds/css/component-classes/index.js
+var box = {
+  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
+  // Relative here enables w-clickable
+  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
+  info: "i-bg-$color-box-info-background i-text-$color-box-info-text",
+  neutral: "i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",
+  bordered: "border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",
+  infoClickable: "hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",
+  neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
+  borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
+};
+var card = {
+  card: "cursor-pointer overflow-hidden relative transition-all",
+  cardShadow: "rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent",
+  cardFlat: "border-2 rounded-4",
+  cardFlatUnselected: "i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active",
+  cardFlatSelected: "i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active",
+  cardSelected: "i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active",
+  cardOutline: "active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2",
+  cardOutlineUnselected: "i-border-$color-card-border",
+  cardOutlineSelected: "i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover",
+  a11y: "sr-only"
+};
+var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
+var expandable = {
+  expandable: "will-change-height",
+  expandableTitle: "font-bold i-text-$color-expandable-title-text",
+  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + box.box,
+  expandableBleed: box.bleed,
+  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevronNonBox: "ml-8",
+  chevronBox: "",
+  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
+  chevronExpand: "-rotate-180",
+  chevronCollapse: "rotate-180",
+  elementsTransformChevronDownPart: "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",
+  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsTransformChevronUpPart: "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",
+  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
+  expansion: "overflow-hidden",
+  expansionNotExpanded: "h-0 invisible",
+  button: buttonReset + " hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
+  paddingTop: "pt-0",
+  title: "flex w-full justify-between items-center",
+  titleType: "h4"
+};
+var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
+var buttonColors = {
+  primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
+  secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
+  utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
+  destructive: "i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",
+  pill: "i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",
+  disabled: "i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",
+  quiet: "i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",
+  utilityQuiet: "i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",
+  negativeQuiet: "i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",
+  loading: "i-text-$color-button-loading-text i-bg-$color-button-loading-background",
+  link: "i-text-$color-button-link-text"
+};
+var buttonTypes = {
+  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
+  utility: `border rounded-4 ${buttonDefaultStyling}`,
+  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
+};
+var buttonSizes = {
+  xsmall: "py-6 px-16",
+  small: "py-8 px-16",
+  medium: "py-10 px-14",
+  large: "py-12 px-16",
+  utility: "py-[11px] px-[15px]",
+  smallUtility: "py-[7px] px-[15px]",
+  pill: "min-h-[44px] min-w-[44px]",
+  pillSmall: "min-h-32 min-w-32",
+  link: "p-0"
+};
+var buttonTextSizes = {
+  medium: "text-m leading-[24]",
+  xsmall: "text-xs"
+};
+var buttonVariants = {
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`,
+  // .button--in-progress, a.button--in-progress:visited
+  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
+  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`
+  // .button:disabled, .button--is-disabled
+};
+var button = {
+  // Buttontypes
+  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  // .button--secondary, .button--default, .button
+  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`,
+  // .button--primary, .button--cta
+  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
+  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
+  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
+  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`,
+  // .button--utility
+  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  // .button--utility-flat
+  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
+  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  // .button--destructive
+  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  // .button--destructive-flat
+  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
+  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
+  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
+  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
+  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`,
+  // .button--pill
+  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
+  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
+  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
+  linkAsButton: "inline-block hover:no-underline text-center",
+  a11y: "sr-only",
+  fullWidth: "w-full max-w-full",
+  contentWidth: "max-w-max"
+};
+var modal = {
+  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
+  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
+  backdrop: "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]",
+  modal: "pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
+  footer: "flex justify-end shrink-0 px-16 sm:px-32",
+  transitionTitle: "transition-all duration-300",
+  transitionTitleCenter: "justify-self-center",
+  transitionTitleColSpan: "col-span-2",
+  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  titleText: "mb-0 h4 sm:h3",
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
+  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
+  titleButtonRight: "-mr-8 sm:-mr-12 justify-self-end",
+  titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
+  titleButtonIconRotated: "transform rotate-90"
+};
+var label = {
+  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
+  labelInvalid: "i-text-$color-label-text-negative",
+  optional: "pl-8 font-normal text-s i-text-$color-label-optional-text"
+};
+var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ";
+var suffix = {
+  wrapper: prefixSuffixWrapperBase + "right-0",
+  wrapperWithLabel: "w-max pr-12",
+  wrapperWithIcon: "w-40",
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+};
+var prefix = {
+  wrapper: prefixSuffixWrapperBase + "left-0",
+  wrapperWithLabel: "w-max pl-12",
+  wrapperWithIcon: "w-40",
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+};
+var clickable = {
+  toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
+  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
+  buttonOrLink: "bg-transparent focusable",
+  buttonOrLinkStretch: "inset-0 absolute"
+};
+var attention = {
+  base: "border-2 relative flex items-start",
+  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
+  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
+  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
+  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
+  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionRight: "-right-[8px]",
+  arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionTop: "-top-[8px]",
+  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
+  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
+  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
+  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
+  content: "last-child:mb-0",
+  notCallout: "absolute z-50",
+  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
+};
+
+// packages/utils/index.js
+import { classMap } from "lit/directives/class-map.js";
+function fclasses(definition) {
+  const defn = {};
+  for (const [key, value] of Object.entries(definition)) {
+    for (const className of key.split(" ")) {
+      defn[className] = value;
+    }
+  }
+  return classMap(defn);
+}
+
+// packages/card/index.js
+var keys = {
+  ENTER: "Enter",
+  SPACE: " "
+};
+var WarpCard = class extends WarpElement {
+  constructor() {
+    super();
+    this.selected = false;
+    this.flat = false;
+    this.clickable = false;
+  }
+  get _outerClasses() {
+    return fclasses({
+      [card.card]: true,
+      [card.cardShadow]: !this.flat,
+      [card.cardSelected]: this.selected,
+      [card.cardFlat]: this.flat,
+      [this.selected ? card.cardFlatSelected : card.cardFlatUnselected]: this.flat
+    });
+  }
+  get _innerClasses() {
+    return fclasses({
+      [card.cardOutline]: true,
+      [this.selected ? card.cardOutlineSelected : card.cardOutlineUnselected]: true
+    });
+  }
+  get uuButton() {
+    return html`<button
+      class="${card.a11y}"
       aria-pressed="${this.selected}"
       tabindex="-1"
     >
       Velg
-    </button>`}get uuSpan(){return p`<span
+    </button>`;
+  }
+  get uuSpan() {
+    return html`<span
       role="checkbox"
       aria-checked="true"
       aria-disabled="true"
-    ></span>`}keypressed(l){!this.clickable||l.altKey||l.ctrlKey||(l.key===h.ENTER||l.key===h.SPACE)&&(l.preventDefault(),this.click())}render(){return p`
+    ></span>`;
+  }
+  keypressed(e) {
+    if (!this.clickable || e.altKey || e.ctrlKey)
+      return;
+    if (e.key === keys.ENTER || e.key === keys.SPACE) {
+      e.preventDefault();
+      this.click();
+    }
+  }
+  render() {
+    return html`
       <div
-        tabindex=${L(this.clickable?"0":void 0)}
+        tabindex=${ifDefined(this.clickable ? "0" : void 0)}
         class="${this._outerClasses}"
         @keydown=${this.keypressed}
       >
-        ${this.clickable?this.uuButton:""}
-        ${!this.clickable&&this.selected?this.uuSpan:""}
+        ${this.clickable ? this.uuButton : ""}
+        ${!this.clickable && this.selected ? this.uuSpan : ""}
         <div class="${this._innerClasses}"></div>
         <slot></slot>
       </div>
-    `}};s(b,"styles",[x.styles,S`
+    `;
+  }
+};
+__publicField(WarpCard, "styles", [
+  WarpElement.styles,
+  css`
       a::after {
         content: "";
         position: absolute;
@@ -31,5 +328,17 @@ var f=Object.defineProperty;var k=(n,l,c)=>l in n?f(n,l,{enumerable:!0,configura
       :host {
         display: block;
       }
-    `]),s(b,"properties",{selected:{type:Boolean,reflect:!0},flat:{type:Boolean},clickable:{type:Boolean}});customElements.get("w-card")||customElements.define("w-card",b);export{b as WarpCard};
+    `
+]);
+__publicField(WarpCard, "properties", {
+  selected: { type: Boolean, reflect: true },
+  flat: { type: Boolean },
+  clickable: { type: Boolean }
+});
+if (!customElements.get("w-card")) {
+  customElements.define("w-card", WarpCard);
+}
+export {
+  WarpCard
+};
 //# sourceMappingURL=index.js.map