@warp-ds/elements 2.0.0-next.3 → 2.0.0-next.5

package/dist/packages/toast/index.js

@@ -8,6 +8,9 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
@@ -53,6 +56,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 
 // node_modules/.pnpm/unraw@3.0.0/node_modules/unraw/dist/errors.js
 var require_errors = __commonJS({
@@ -1012,6 +1018,16 @@ var require_parser = __commonJS({
 // packages/toast/toast.js
 import { css, html as html5 } from "lit";
 
+// node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js
+var r = function() {
+  for (var t = [], n = arguments.length; n--; ) t[n] = arguments[n];
+  return t.reduce(function(t2, n2) {
+    return t2.concat("string" == typeof n2 ? n2 : Array.isArray(n2) ? r.apply(void 0, n2) : "object" == typeof n2 && n2 ? Object.keys(n2).map(function(r2) {
+      return n2[r2] ? r2 : "";
+    }) : "");
+  }, []).join(" ");
+};
+
 // node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
@@ -1378,28 +1394,19 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0-next.4_@warp-ds+uno@2.0.0_unocss@0.61.3_postcss@8.4.39_rollup@4.18.1_vite@_fn7nbuinwdlc4yeboswpxt5lie/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: "s-bg-info-subtle",
-  neutral: "s-surface-sunken",
-  bordered: "border-2 s-border s-bg"
-};
+// node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js
 var toaster = {
-  container: "fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",
-  content: "w-full",
-  toaster: "grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none"
+  wrapper: "fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",
+  base: "grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none",
+  content: "w-full"
 };
 var toast = {
   wrapper: "relative overflow-hidden w-full",
-  toast: "flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all",
+  base: "flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all",
   positive: "s-bg-positive-subtle s-border-positive-subtle s-text",
   warning: "s-bg-warning-subtle s-border-warning-subtle s-text",
   negative: "s-bg-negative-subtle s-border-negative-subtle s-text",
-  icon: "shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",
+  iconBase: "shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",
   iconPositive: "s-icon-positive",
   iconWarning: "s-icon-warning",
   iconNegative: "s-icon-negative",
@@ -1407,31 +1414,6 @@ var toast = {
   content: "self-center mr-8 py-4 last-child:mb-0",
   close: "bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active"
 };
-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 s-text",
-  expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 " + box.box,
-  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
-  expandableBleed: box.bleed,
-  chevron: "inline-block align-middle s-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: "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]",
@@ -1549,7 +1531,7 @@ var button = {
 };
 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]",
-  modal: "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",
+  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",
@@ -1563,19 +1545,15 @@ var modal = {
   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 s-text",
-  optional: "pl-8 font-normal text-s s-text-subtle"
-};
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
+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: prefixSuffixWrapperBase + "right-0",
+  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: prefixSuffixWrapperBase + "left-0",
+  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"
@@ -1632,15 +1610,9 @@ 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}`,
-  labelVue: "-mt-2"
-};
-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"
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`
 };
 var attention = {
   base: "border-2 relative flex items-start",
@@ -1703,8 +1675,8 @@ var getAfterCollapseCallback = (done) => () => {
 };
 var expand = (el, done) => {
   const returnPromise = (() => {
-    if (!done) return new Promise((r) => {
-      done = r;
+    if (!done) return new Promise((r2) => {
+      done = r2;
     });
   })();
   const afterExpandCallback = getAfterExpandCallback(el, done);
@@ -1722,8 +1694,8 @@ var expand = (el, done) => {
 };
 var collapse = (el, done) => {
   const returnPromise = (() => {
-    if (!done) return new Promise((r) => {
-      done = r;
+    if (!done) return new Promise((r2) => {
+      done = r2;
     });
   })();
   const afterCollapseCallback = getAfterCollapseCallback(done);
@@ -1740,7 +1712,6 @@ var collapse = (el, done) => {
 };
 
 // packages/toast/toast.js
-import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
 
 // node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/warning-16.js
@@ -2154,23 +2125,16 @@ var messages9 = JSON.parse('{"toast.aria.error":"Virhe","toast.aria.successful":
 var messages10 = JSON.parse('{"toast.aria.error":"Feil","toast.aria.successful":"Vellykket","toast.aria.warning":"Advarsel"}');
 
 // packages/toast/toast.js
-var classes = (definition) => {
-  const defn = {};
-  for (const [key, value] of Object.entries(definition)) {
-    for (const className of key.split(" ")) {
-      defn[className] = value;
-    }
-  }
-  return classMap(defn);
-};
 var toastType = {
   success: "success",
   error: "error",
   warning: "warning"
 };
+var _WarpToast_instances, primaryClasses_get, iconClasses_get;
 var WarpToast = class extends WarpElement {
   constructor() {
     super();
+    __privateAdd(this, _WarpToast_instances);
     activateI18n5(messages8, messages10, messages9, messages7);
     this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);
     this.type = "success";
@@ -2186,22 +2150,6 @@ var WarpToast = class extends WarpElement {
   updated() {
     if (!this._expanded && this._wrapper) expand(this._wrapper, () => this._expanded = true);
   }
-  get _primaryClasses() {
-    return classes({
-      [toast.toast]: true,
-      [toast.positive]: this.type === toastType.success,
-      [toast.warning]: this.type === toastType.warning,
-      [toast.negative]: this.type === toastType.error
-    });
-  }
-  get _iconClasses() {
-    return classes({
-      [toast.icon]: true,
-      [toast.iconPositive]: this.type === toastType.success,
-      [toast.iconWarning]: this.type === toastType.warning,
-      [toast.iconNegative]: this.type === toastType.error
-    });
-  }
   get _wrapper() {
     var _a, _b;
     return (_b = (_a = this.renderRoot) == null ? void 0 : _a.querySelector(`section`)) != null ? _b : null;
@@ -2259,8 +2207,8 @@ var WarpToast = class extends WarpElement {
   render() {
     if (!this.text) return html5``;
     return html5` <section class="${toast.wrapper}" aria-label="${this._typeLabel}">
-      <div class="${this._primaryClasses}">
-        <div class="${this._iconClasses}">${this._iconMarkup}</div>
+      <div class="${__privateGet(this, _WarpToast_instances, primaryClasses_get)}">
+        <div class="${__privateGet(this, _WarpToast_instances, iconClasses_get)}">${this._iconMarkup}</div>
         <div role="${this._role}" class="${toast.content}">
           <p>${this.text}</p>
         </div>
@@ -2276,6 +2224,23 @@ var WarpToast = class extends WarpElement {
     </section>`;
   }
 };
+_WarpToast_instances = new WeakSet();
+primaryClasses_get = function() {
+  return r([
+    toast.base,
+    this.type === toastType.success && toast.positive,
+    this.type === toastType.warning && toast.warning,
+    this.type === toastType.error && toast.negative
+  ]);
+};
+iconClasses_get = function() {
+  return r([
+    toast.iconBase,
+    this.type === toastType.success && toast.iconPositive,
+    this.type === toastType.warning && toast.iconWarning,
+    this.type === toastType.error && toast.iconNegative
+  ]);
+};
 __publicField(WarpToast, "styles", [
   WarpElement.styles,
   css`
@@ -2381,8 +2346,8 @@ var WarpToastContainer = class extends WarpElement2 {
   }
   render() {
     return html6`
-      <aside class="${toaster.container}">
-        <div class="${toaster.toaster}" id="w-toast-container-list">
+      <aside class="${toaster.wrapper}">
+        <div class="${toaster.base}" id="w-toast-container-list">
           ${repeat(
       this._toastsArray,
       (toast3) => toast3.id,