@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.3

package/dist/packages/modal/index.js

@@ -52,6 +52,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // node_modules/.pnpm/unraw@3.0.0/node_modules/unraw/dist/errors.js
@@ -428,9 +436,9 @@ var require_moo = __commonJS({
         }
         var fallbackRule = errorRule && errorRule.fallback;
         var flags = hasSticky && !fallbackRule ? "ym" : "gm";
-        var suffix2 = hasSticky || fallbackRule ? "" : "|";
+        var suffix = hasSticky || fallbackRule ? "" : "|";
         if (unicodeFlag === true) flags += "u";
-        var combined = new RegExp(reUnion(parts) + suffix2, flags);
+        var combined = new RegExp(reUnion(parts) + suffix, flags);
         return { regexp: combined, groups, fast, error: errorRule || defaultErrorRule };
       }
       function compile(rules) {
@@ -438,9 +446,9 @@ var require_moo = __commonJS({
         return new Lexer({ start: result }, "start");
       }
       function checkStateGroup(g2, name, map) {
-        var state = g2 && (g2.push || g2.next);
-        if (state && !map[state]) {
-          throw new Error("Missing state '" + state + "' (in token '" + g2.defaultType + "' of state '" + name + "')");
+        var state2 = g2 && (g2.push || g2.next);
+        if (state2 && !map[state2]) {
+          throw new Error("Missing state '" + state2 + "' (in token '" + g2.defaultType + "' of state '" + name + "')");
         }
         if (g2 && g2.pop && +g2.pop !== 1) {
           throw new Error("pop must be 1 (in token '" + g2.defaultType + "' of state '" + name + "')");
@@ -487,14 +495,14 @@ var require_moo = __commonJS({
         }
         for (var i2 = 0; i2 < keys.length; i2++) {
           var name = keys[i2];
-          var state = map[name];
-          var groups = state.groups;
+          var state2 = map[name];
+          var groups = state2.groups;
           for (var j = 0; j < groups.length; j++) {
             checkStateGroup(groups[j], name, map);
           }
-          var fastKeys = Object.getOwnPropertyNames(state.fast);
+          var fastKeys = Object.getOwnPropertyNames(state2.fast);
           for (var j = 0; j < fastKeys.length; j++) {
-            checkStateGroup(state.fast[fastKeys[j]], name, map);
+            checkStateGroup(state2.fast[fastKeys[j]], name, map);
           }
         }
         return new Lexer(map, start);
@@ -522,8 +530,8 @@ var require_moo = __commonJS({
           return isMap ? reverseMap.get(k) : reverseMap[k];
         };
       }
-      var Lexer = function(states, state) {
-        this.startState = state;
+      var Lexer = function(states, state2) {
+        this.startState = state2;
         this.states = states;
         this.buffer = "";
         this.stack = [];
@@ -552,10 +560,10 @@ var require_moo = __commonJS({
           queuedThrow: this.queuedThrow
         };
       };
-      Lexer.prototype.setState = function(state) {
-        if (!state || this.state === state) return;
-        this.state = state;
-        var info = this.states[state];
+      Lexer.prototype.setState = function(state2) {
+        if (!state2 || this.state === state2) return;
+        this.state = state2;
+        var info = this.states[state2];
         this.groups = info.groups;
         this.error = info.error;
         this.re = info.regexp;
@@ -564,9 +572,9 @@ var require_moo = __commonJS({
       Lexer.prototype.popState = function() {
         this.setState(this.stack.pop());
       };
-      Lexer.prototype.pushState = function(state) {
+      Lexer.prototype.pushState = function(state2) {
         this.stack.push(this.state);
-        this.setState(state);
+        this.setState(state2);
       };
       var eat = hasSticky ? function(re, buffer) {
         return re.exec(buffer);
@@ -1016,257 +1024,8 @@ var require_parser = __commonJS({
   }
 });
 
-// packages/modal/modal-footer.js
-import { html } from "lit";
-
-// 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
-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]",
-  secondary: "s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",
-  utility: "s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
-  destructive: "s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",
-  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]",
-  disabled: "s-text-inverted s-bg-disabled",
-  quiet: "bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",
-  utilityQuiet: "s-text bg-transparent hover:s-bg-hover active:s-bg-active",
-  negativeQuiet: "bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",
-  loading: "s-text s-bg-subtle",
-  link: "s-text-link"
-};
-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 focus: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 active:no-underline hover:no-underline focus:no-underline text-center",
-  a11y: "sr-only",
-  fullWidth: "w-full max-w-full",
-  contentWidth: "max-w-max"
-};
-var modal = {
-  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] bg-[--w-black/25]",
-  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",
-  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 self-center",
-  transitionTitleColSpan: "col-span-2",
-  title: "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",
-  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 modalElement = {
-  // several items in here are 'resets' for the <dialog> element
-  dialogEl: "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]",
-  dialogInner: "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",
-  contentSlot: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
-  header: "relative pb-8",
-  headerTitleBar: "pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!",
-  headerButton: "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",
-  headerButtonLeft: "-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
-  headerCloseButton: "-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
-  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`,
-  headerTitle: "mb-0 t3 self-center",
-  headerTitleWithBackButton: "justify-self-center",
-  headerTitleWithoutBackButton: "col-span-2",
-  headerTitleWithTopArea: "pt-16 px-16 sm:px-32",
-  footer: "flex justify-end shrink-0 px-16 sm:px-32 pt-24"
-};
-var prefixSuffixWrapper = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
-var suffix = {
-  wrapper: prefixSuffixWrapper + "right-0",
-  wrapperWithLabel: "w-max pr-12",
-  wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
-};
-var prefix = {
-  wrapper: prefixSuffixWrapper + "left-0",
-  wrapperWithLabel: "w-max pl-12",
-  wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
-};
-var toggle = {
-  // wrapper classes
-  field: "relative text-m",
-  // true
-  wrapper: "relative py-1",
-  // true
-  wrapperRadioButtons: "inline-flex font-bold rounded-8 focus-within:focusable",
-  // isRadioButton && !isEqualWidth
-  wrapperRadioButtonsJustified: "flex font-bold rounded-8 focus-within:focusable",
-  // isRadioButton && isEqualWidth,
-  // group classes
-  radioButtonsGroup: "group",
-  // isRadioButton
-  radioButtonsGroupJustified: "grow-1 shrink-0 basis-auto",
-  // isRadioButton && isEqualWidth
-  // input classes
-  input: "peer",
-  a11y: "sr-only",
-  // label classes
-  label: "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
-  labelBefore: 'before:content-[""] before:block',
-  // !isRadioButton && !isIndeterminate
-  checkbox: "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
-  checkboxInvalid: "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
-  checkboxDisabled: "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
-  indeterminate: '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
-  indeterminateInvalid: '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
-  indeterminateDisabled: '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
-  radio: "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
-  radioInvalid: "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
-  radioDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]",
-  // isRadio && !isInvalid && isDisabled
-  radioButtonsLabel: "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
-  radioButtonsRegular: "text-s py-8 pl-12 pr-14",
-  // isRadioButtons && !isSmall
-  radioButtonsSmall: "text-xs py-[5px] px-[8px]"
-  // isRadioButtons && isSmall
-};
-var deadToggle = {
-  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
-  input: `${toggle.input} hidden`,
-  inputVue: "hidden",
-  labelVue: "-mt-2",
-  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
-  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`
-};
-var attention = {
-  base: "border-2 relative flex items-start",
-  tooltip: "s-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8",
-  callout: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8",
-  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",
-  popover: "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",
-  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
-  arrowDirectionLeftStart: "-left-[8px]",
-  arrowDirectionLeft: "-left-[8px]",
-  arrowDirectionLeftEnd: "-left-[8px]",
-  arrowDirectionRightStart: "-right-[8px]",
-  arrowDirectionRight: "-right-[8px]",
-  arrowDirectionRightEnd: "-right-[8px]",
-  arrowDirectionBottomStart: "-bottom-[8px]",
-  arrowDirectionBottom: "-bottom-[8px]",
-  arrowDirectionBottomEnd: "-bottom-[8px]",
-  arrowDirectionTopStart: "-top-[8px]",
-  arrowDirectionTop: "-top-[8px]",
-  arrowDirectionTopEnd: "-top-[8px]",
-  arrowTooltip: "s-bg-inverted border-[--w-s-color-background-inverted]",
-  arrowCallout: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
-  arrowPopover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]",
-  arrowHighlight: "bg-[--w-color-callout-background] border-[--w-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/modal/modal-footer.js
-import WarpElement from "@warp-ds/elements-core";
+// packages/modal/modal-footer.ts
+import { html, css, LitElement } from "lit";
 
 // packages/modal/util.js
 var CanCloseMixin = (superClass) => class extends superClass {
@@ -1290,20 +1049,35 @@ var ProvidesCanCloseToSlotsMixin = (superClass) => class extends superClass {
   }
 };
 
-// packages/modal/modal-footer.js
-var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(WarpElement)) {
+// packages/modal/modal-footer.ts
+var ModalFooter = class extends CanCloseMixin(ProvidesCanCloseToSlotsMixin(LitElement)) {
   render() {
     return html`
-      <div class="${modalElement.footer}">
+      <div class="footer">
         <slot @slotchange="${this.handleSlotChange}"></slot>
       </div>
     `;
   }
 };
-__publicField(ModalFooter, "styles", [WarpElement.styles]);
+ModalFooter.styles = css`
+    .footer {
+      display:flex;
+      flex-shrink:0;
+      justify-content:flex-end;
+      padding-left:1.6rem;
+      padding-right:1.6rem;
+      padding-top:2.4rem;
+    }
+    @media (min-width: 480px){
+      .footer {
+        padding-left:3.2rem;
+        padding-right:3.2rem;
+      }
+    }
+  `;
 
-// packages/modal/modal-header.js
-import { html as html4, nothing } from "lit";
+// packages/modal/modal-header.ts
+import { css as css2, html as html4, LitElement as LitElement4, nothing } from "lit";
 
 // node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/utility.js
 var computeDeltas = (first, last) => ({
@@ -1324,10 +1098,10 @@ var animationDefaults = { easing: "ease", duration: 300 };
 var reduceMotion = false;
 var windowExists = typeof window !== "undefined";
 if (windowExists) {
-  const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const query3 = window.matchMedia("(prefers-reduced-motion: reduce)");
   const callback = ({ matches }) => reduceMotion = matches;
-  if (query.addEventListener) query.addEventListener("change", callback);
-  callback(query);
+  if (query3.addEventListener) query3.addEventListener("change", callback);
+  callback(query3);
 }
 
 // node_modules/.pnpm/@itsy+animate@0.0.9/node_modules/@itsy/animate/src/move.js
@@ -1377,7 +1151,7 @@ var Move = class {
   }
 };
 
-// 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
@@ -1699,7 +1473,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 = (f2) => typeof f2 === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -2107,8 +1881,11 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
-import { LitElement } from "lit";
+// packages/modal/modal-header.ts
+import { property, query, state } from "lit/decorators.js";
+
+// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-p_f73b1d3c5bd9121d6f30248535f1f172/node_modules/@warp-ds/icons/dist/elements/arrow-left-16.js
+import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic, html as html2 } from "lit/static-html.js";
 var messages = JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}');
 var messages2 = JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}');
@@ -2191,7 +1968,7 @@ var activateI18n = (enMessages, nbMessages, fiMessages, daMessages, svMessages)
   i18n.activate(locale);
 };
 activateI18n(messages2, messages, messages3, messages4, messages5);
-var IconArrowLeft16 = class extends LitElement {
+var IconArrowLeft16 = class extends LitElement2 {
   render() {
     const title = i18n.t({ message: `Leftward-pointing arrow`, id: "icon.title.arrow-left", comment: "Title for table arrow left icon" });
     return html2`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${unsafeStatic(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`;
@@ -2201,8 +1978,8 @@ if (!customElements.get("w-icon-arrow-left-16")) {
   customElements.define("w-icon-arrow-left-16", IconArrowLeft16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-_hyhbgchrkasknlbocfng7geeci/node_modules/@warp-ds/icons/dist/elements/close-16.js
-import { LitElement as LitElement2 } from "lit";
+// node_modules/.pnpm/@warp-ds+icons@2.5.0_@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-p_f73b1d3c5bd9121d6f30248535f1f172/node_modules/@warp-ds/icons/dist/elements/close-16.js
+import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html3 } from "lit/static-html.js";
 var messages6 = JSON.parse('{"icon.title.close":["Kryss"]}');
 var messages22 = JSON.parse('{"icon.title.close":["Cross"]}');
@@ -2285,7 +2062,7 @@ var activateI18n2 = (enMessages, nbMessages, fiMessages, daMessages, svMessages)
   i18n.activate(locale);
 };
 activateI18n2(messages22, messages6, messages32, messages42, messages52);
-var IconClose16 = class extends LitElement2 {
+var IconClose16 = class extends LitElement3 {
   render() {
     const title = i18n.t({ message: `Cross`, id: "icon.title.close", comment: "Title for close icon" });
     return html3`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${unsafeStatic2(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`;
@@ -2295,10 +2072,6 @@ if (!customElements.get("w-icon-close-16")) {
   customElements.define("w-icon-close-16", IconClose16);
 }
 
-// packages/modal/modal-header.js
-import WarpElement2 from "@warp-ds/elements-core";
-import { createRef, ref } from "lit/directives/ref.js";
-
 // packages/i18n.ts
 var supportedLocales3 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale4 = "en";
@@ -2349,22 +2122,20 @@ var messages10 = JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":[
 // packages/modal/locales/sv/messages.mjs
 var messages11 = JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');
 
-// packages/modal/modal-header.js
-var NO_CLOSE_BUTTON = "no-close";
-var ModalHeader = class extends CanCloseMixin(WarpElement2) {
+// packages/modal/modal-header.ts
+var ModalHeader = class extends CanCloseMixin(LitElement4) {
   constructor() {
     super();
-    __publicField(this, "titleEl", createRef());
-    activateI18n3(messages8, messages10, messages9, messages7, messages11);
     this._hasTopContent = false;
+    activateI18n3(messages8, messages10, messages9, messages7, messages11);
   }
   render() {
     return html4`
-      <div class="${modalElement.header}">
+      <div class="header">
         <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
-        <div class="${this._hasTopContent ? "" : modalElement.headerTitleBar}">
+        <div class="${this._hasTopContent ? "" : "header-title-bar"}">
           ${this.backButton}
-          <h1 ${ref(this.titleEl)} class="${this.titleClasses}">${this.title}</h1>
+          <h1 class="title-el ${this.titleClasses}">${this.title}</h1>
           ${this.closeButton}
         </div>
       </div>
@@ -2372,7 +2143,7 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
   }
   async willUpdate(changedProperties) {
     if (changedProperties.has("back")) {
-      const move = new Move(this.titleEl.value);
+      const move = new Move(this.titleEl);
       move.when(async () => {
         await this.updateComplete;
       });
@@ -2380,9 +2151,9 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
   }
   get titleClasses() {
     return [
-      modalElement.headerTitle,
-      this.back ? modalElement.headerTitleWithBackButton : modalElement.headerTitleWithoutBackButton,
-      this._hasTopContent ? modalElement.headerTitleWithTopArea : ""
+      "header-title",
+      this.back ? "header-title-with-back-button" : "header-title-without-back-button",
+      this._hasTopContent ? "header-title-with-top-area" : ""
     ].join(" ");
   }
   get backButton() {
@@ -2393,13 +2164,13 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
       message: "Back",
       comment: "Aria label for the back button in modal"
     })}"
-          class="${modalElement.headerButton} ${modalElement.headerButtonLeft}"
+          class="header-button header-button-left"
           @click="${this.emitBack}">
           <w-icon-arrow-left-16></w-icon-arrow-left-16>
         </button>` : nothing;
   }
   get closeButton() {
-    if (this[NO_CLOSE_BUTTON]) return nothing;
+    if (this.noClose) return nothing;
     return html4`<button
       type="button"
       aria-label="${i18n._({
@@ -2407,7 +2178,7 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
       message: "Close",
       comment: "Aria label for the close button in modal"
     })}"
-      class="${modalElement.headerButton} ${this._hasTopContent ? modalElement.headerCloseButtonOnImage : modalElement.headerCloseButton}"
+      class="header-button ${this._hasTopContent ? "header-close-button-on-image" : "header-close-button"}"
       @click="${this.close}">
       <w-icon-close-16></w-icon-close-16>
     </button>`;
@@ -2420,18 +2191,136 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
     this._hasTopContent = !!topContent.length;
   }
 };
-__publicField(ModalHeader, "properties", {
-  title: { type: String },
-  back: { type: Boolean },
-  [NO_CLOSE_BUTTON]: { type: Boolean },
-  _hasTopContent: { state: true }
-});
-__publicField(ModalHeader, "styles", [WarpElement2.styles]);
+ModalHeader.styles = css2`
+    .header {
+      position: relative;
+      padding-bottom: 0.8rem;
+    }
+    .header-title-bar {
+      display:grid;
+      flex-shrink:0 !important;
+      gap:1.2rem;
+      grid-template-columns:auto 1fr auto;
+      align-items:flex-start;
+      padding-left:1.6rem;
+      padding-right:1.6rem;
+      padding-top:1.6rem;
+    }
+    .header-title {
+      font-weight:700;
+      font-size:var(--w-font-size-l);
+      line-height:var(--w-line-height-l);
+      align-self:center;
+      margin: 0;
+    }
+    .header-title-with-back-button {
+      justify-self:center;
+    }
+    .header-title-without-back-button {
+      grid-column:span 2/span 2;
+    }
+    .header-title-with-top-area {
+      padding-left:1.6rem;
+      padding-right:1.6rem;
+      padding-top:1.6rem;
+    }
+    .header-button:hover {
+      -webkit-background-clip:padding-box;
+      background-clip:padding-box;
+    }
+    .header-button:focus, .header-button:focus-visible {
+      outline:2px solid var(--w-s-color-border-focus);
+      outline-offset:var(--w-outline-offset, 1px);
+    }
+    .header-button:not(:focus-visible){
+      outline:none;
+    }
+    .header-button {
+      border-width:0;
+      border-radius:9999px;
+      display:inline-flex;
+      align-items:center;
+      justify-content:center;
+      min-height:40px;
+      min-width:40px;
+      padding:0.4rem;
+      font-weight:700;
+      transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
+      transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration:150ms;
+      font-size:var(--w-font-size-m);line-height:var(--w-line-height-m);
+      line-height:2.4rem;
+    }
+    .header-button-left {
+      background-color:transparent;
+      color:var(--w-s-color-icon);
+      margin-left:-0.8rem;
+    }
+    .header-button-left:hover {
+      background-color:var(--w-color-button-pill-background-hover);
+    }
+    .header-button-left:active {
+      background-color:var(--w-color-button-pill-background-active);
+    }
+    .header-close-button {
+      background-color:transparent;
+      color:var(--w-s-color-icon);
+      margin-right:-0.8rem;
+    }
+    .header-close-button:hover {
+      background-color:var(--w-color-button-pill-background-hover);
+    }
+    .header-close-button:active {
+      background-color:var(--w-color-button-pill-background-active);
+    }
+    .header-close-button-on-image {
+      background-color:rgba(var(--w-rgb-black),0.7);
+      right:0.8rem;
+      top:0.8rem;
+      position:absolute;
+      z-index:10;
+      color:var(--w-s-color-text-inverted);
+    }
+    .header-close-button-on-image:hover {
+      background-color:rgba(var(--w-rgb-black),0.85);
+    }
+    .header-close-button-on-image:active {
+      background-color:var(--w-black);
+    }
+    @media (min-width: 480px){
+      .header-title-bar {
+        padding-left:3.2rem;
+        padding-right:3.2rem;
+        padding-top:2.4rem;
+      }
+      .header-title-with-top-area {
+        padding-left:3.2rem;
+        padding-right:3.2rem;
+      }
+      .header-button {
+        min-height:32px;
+        min-width:32px;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ModalHeader.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ModalHeader.prototype, "back", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-close" })
+], ModalHeader.prototype, "noClose", 2);
+__decorateClass([
+  state()
+], ModalHeader.prototype, "_hasTopContent", 2);
+__decorateClass([
+  query(".title-el")
+], ModalHeader.prototype, "titleEl", 2);
 
-// packages/modal/modal-main.js
-import { css, html as html5 } from "lit";
-import WarpElement3 from "@warp-ds/elements-core";
-import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
+// packages/modal/modal-main.ts
+import { css as css3, html as html5, LitElement as LitElement5 } from "lit";
 
 // node_modules/.pnpm/scroll-doctor@2.0.2/node_modules/scroll-doctor/dist/scroll-doctor.js
 var n = [];
@@ -2491,35 +2380,31 @@ function T() {
   n.forEach(p), g(), f(), n = [];
 }
 
-// packages/modal/modal-main.js
-var NO_BACKDROP_CLICKS = "ignore-backdrop-clicks";
-var CONTENT_ID = "content-id";
-var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
+// packages/modal/modal-main.ts
+import { property as property2, query as query2 } from "lit/decorators.js";
+var ModalMain = class extends ProvidesCanCloseToSlotsMixin(LitElement5) {
   constructor() {
     super();
-    __publicField(this, "dialogEl", createRef2());
-    __publicField(this, "dialogInnerEl", createRef2());
-    __publicField(this, "contentEl", createRef2());
     this.interceptEscape = this.interceptEscape.bind(this);
     this.closeOnBackdropClick = this.closeOnBackdropClick.bind(this);
     this.eventPreventer = this.eventPreventer.bind(this);
     this.modifyBorderRadius = this.modifyBorderRadius.bind(this);
   }
   async open() {
-    this.dialogEl.value.showModal();
+    this.dialogEl.showModal();
     this.handleListeners();
-    E(this.contentEl.value);
+    E(this.contentEl);
     await this.updateComplete;
     this.dispatchEvent(new CustomEvent("shown", { bubbles: true, composed: true }));
   }
   close() {
     this.handleListeners("removeEventListener");
-    this.dialogEl.value.classList.add("close");
-    this.dialogEl.value.addEventListener(
+    this.dialogEl.classList.add("close");
+    this.dialogEl.addEventListener(
       "animationend",
       async () => {
-        this.dialogEl.value.classList.remove("close");
-        this.dialogEl.value.close();
+        this.dialogEl.classList.remove("close");
+        this.dialogEl.close();
         T();
         await this.updateComplete;
         this.dispatchEvent(new CustomEvent("hidden", { bubbles: true, composed: true }));
@@ -2529,10 +2414,10 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
   }
   render() {
     return html5`
-      <dialog ${ref2(this.dialogEl)} class="w-modal ${modalElement.dialogEl}">
-        <div ${ref2(this.dialogInnerEl)} class="${modalElement.dialogInner}">
+      <dialog class="dialog-el">
+        <div class="dialog-inner-el">
           <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
-          <div ${ref2(this.contentEl)} class="${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
+          <div class="content-el" id=${this.contentId}>
             <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
           </div>
           <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
@@ -2540,25 +2425,22 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
       </dialog>
     `;
   }
-  willUpdate(changedProperties) {
+  updated(changedProperties) {
     if (changedProperties.has("show")) this[this.show ? "open" : "close"]();
   }
   handleListeners(verb = "addEventListener") {
     document[verb]("keydown", this.interceptEscape);
-    if (!this[NO_BACKDROP_CLICKS]) this.dialogEl.value[verb]("mousedown", this.closeOnBackdropClick);
-    this.dialogEl.value[verb]("close", this.eventPreventer);
-    this.dialogEl.value[verb]("cancel", this.eventPreventer);
-    this.dialogInnerEl.value[verb]("transitionend", this.modifyBorderRadius);
+    if (!this.ignoreBackdropClicks) this.dialogEl[verb]("mousedown", this.closeOnBackdropClick);
+    this.dialogEl[verb]("close", this.eventPreventer);
+    this.dialogEl[verb]("cancel", this.eventPreventer);
+    this.dialogInnerEl[verb]("transitionend", this.modifyBorderRadius);
   }
-  /** @param {Event} evt */
   eventPreventer(evt) {
     evt.preventDefault();
   }
-  /** @param {MouseEvent} evt */
   closeOnBackdropClick(evt) {
-    if (this.dialogEl.value === evt.target) this.close();
+    if (this.dialogEl === evt.target) this.close();
   }
-  /** @param {KeyboardEvent} evt */
   interceptEscape(evt) {
     if (evt.key === "Escape") {
       evt.preventDefault();
@@ -2566,36 +2448,93 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
     }
   }
   modifyBorderRadius() {
-    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.value.style.borderRadius = "0px";
-    else this.dialogInnerEl.value.style.borderRadius = null;
+    if (this.dialogInnerEl.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.style.borderRadius = "0px";
+    else this.dialogInnerEl.style.borderRadius = null;
   }
 };
-__publicField(ModalMain, "properties", {
-  show: { type: Boolean },
-  [CONTENT_ID]: { type: String },
-  [NO_BACKDROP_CLICKS]: { type: Boolean }
-});
-__publicField(ModalMain, "styles", [
-  WarpElement3.styles,
-  css`
-      .w-modal {
+ModalMain.styles = [
+  css3`
+      .dialog-el {
         --w-modal-translate-distance: 100%;
+        --w-modal-max-height:80%;
+        --w-modal-width:640px;
+        background-color:transparent;
+        border-width:0;
+        align-items:flex-end;
+        inset:0rem;
+        height:unset;
+        max-height:unset;
+        max-width:unset;
+        width:unset;
+        margin:auto;
+        padding:0rem;
+        backface-visibility:hidden;
+      }
+      .dialog-inner-el {
+        will-change:height;
+        border-radius:8px;
+        display:flex;
+        flex-direction:column;
+        overflow:hidden;
+        position:relative;
+        background-color:var(--w-s-color-background);
+        box-shadow:var(--w-shadow-m);
+        height:var(--w-modal-height);
+        max-height:var(--w-modal-max-height);
+        min-height:var(--w-modal-min-height);
+        width:var(--w-modal-width);
+        backface-visibility:hidden;
+        padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
+        transition-property:all;
+        transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration:150ms;
+        transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .content-el {
+        display:block;
+        flex-shrink:1;
+        flex-grow:1;
+        overflow-x:hidden;
+        overflow-y:auto;
+        position:relative;
+        margin-bottom:0rem;
+        padding-left:1.6rem;
+        padding-right:1.6rem;
       }
       @media (min-width: 480px) {
-        .w-modal {
+        .dialog-el {
           --w-modal-translate-distance: 50%;
+          place-content:center;
+          place-items:center;
+        }
+        .dialog-inner-el {
+          margin-left:1.6rem;
+          margin-right:1.6rem;
+          padding-bottom:3.2rem;
+        }
+        .content-el {
+          padding-left:3.2rem;
+          padding-right:3.2rem;
         }
       }
-      .w-modal[open] {
+      @media (max-width: 479.9px){
+        .dialog-inner-el {
+          border-bottom-left-radius:0;
+          border-bottom-right-radius:0;
+        }
+      }
+      .dialog-el[open] {
         animation: w-modal-in 0.3s ease-in-out forwards;
+        display:flex;
+        position:fixed;
       }
-      .w-modal.close {
+      .dialog-el.close {
         animation: w-modal-out 0.3s ease-in-out forwards;
       }
-      .w-modal[open]::backdrop {
+      .dialog-el[open]::backdrop {
         animation: backdrop-in 0.3s ease-in-out forwards;
       }
-      .w-modal.close::backdrop {
+      .dialog-el.close::backdrop {
         animation: backdrop-out 0.3s ease-in-out forwards;
       }
       /* shouldn't need two (in/out) animations declared here, but reversing is being weird */
@@ -2636,7 +2575,25 @@ __publicField(ModalMain, "styles", [
         }
       }
     `
-]);
+];
+__decorateClass([
+  property2({ type: Boolean })
+], ModalMain.prototype, "show", 2);
+__decorateClass([
+  property2({ type: String, attribute: "content-id" })
+], ModalMain.prototype, "contentId", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "ignore-backdrop-clicks" })
+], ModalMain.prototype, "ignoreBackdropClicks", 2);
+__decorateClass([
+  query2(".dialog-el")
+], ModalMain.prototype, "dialogEl", 2);
+__decorateClass([
+  query2(".dialog-inner-el")
+], ModalMain.prototype, "dialogInnerEl", 2);
+__decorateClass([
+  query2(".content-el")
+], ModalMain.prototype, "contentEl", 2);
 
 // packages/modal/index.js
 if (!customElements.get("w-modal")) {