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

package/dist/packages/expandable/index.js

@@ -6,6 +6,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 = {}))
@@ -49,10 +52,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+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({
@@ -225,8 +228,7 @@ var require_moo = __commonJS({
         return "(" + s + ")";
       }
       function reUnion(regexps) {
-        if (!regexps.length)
-          return "(?!)";
+        if (!regexps.length) return "(?!)";
         var source = regexps.map(function(s) {
           return "(?:" + s + ")";
         }).join("|");
@@ -236,14 +238,10 @@ var require_moo = __commonJS({
         if (typeof obj === "string") {
           return "(?:" + reEscape(obj) + ")";
         } else if (isRegExp(obj)) {
-          if (obj.ignoreCase)
-            throw new Error("RegExp /i flag not allowed");
-          if (obj.global)
-            throw new Error("RegExp /g flag is implied");
-          if (obj.sticky)
-            throw new Error("RegExp /y flag is implied");
-          if (obj.multiline)
-            throw new Error("RegExp /m flag is implied");
+          if (obj.ignoreCase) throw new Error("RegExp /i flag not allowed");
+          if (obj.global) throw new Error("RegExp /g flag is implied");
+          if (obj.sticky) throw new Error("RegExp /y flag is implied");
+          if (obj.multiline) throw new Error("RegExp /m flag is implied");
           return obj.source;
         } else {
           throw new Error("Not a pattern: " + obj);
@@ -292,16 +290,14 @@ var require_moo = __commonJS({
           var match = [];
           rules.forEach(function(rule) {
             if (isObject(rule)) {
-              if (match.length)
-                result.push(ruleOptions(key, match));
+              if (match.length) result.push(ruleOptions(key, match));
               result.push(ruleOptions(key, rule));
               match = [];
             } else {
               match.push(rule);
             }
           });
-          if (match.length)
-            result.push(ruleOptions(key, match));
+          if (match.length) result.push(ruleOptions(key, match));
         }
         return result;
       }
@@ -436,8 +432,7 @@ var require_moo = __commonJS({
         var fallbackRule = errorRule && errorRule.fallback;
         var flags = hasSticky && !fallbackRule ? "ym" : "gm";
         var suffix2 = hasSticky || fallbackRule ? "" : "|";
-        if (unicodeFlag === true)
-          flags += "u";
+        if (unicodeFlag === true) flags += "u";
         var combined = new RegExp(reUnion(parts) + suffix2, flags);
         return { regexp: combined, groups, fast, error: errorRule || defaultErrorRule };
       }
@@ -458,8 +453,7 @@ var require_moo = __commonJS({
         var all = states.$all ? toRules(states.$all) : [];
         delete states.$all;
         var keys = Object.getOwnPropertyNames(states);
-        if (!start)
-          start = keys[0];
+        if (!start) start = keys[0];
         var ruleMap = /* @__PURE__ */ Object.create(null);
         for (var i = 0; i < keys.length; i++) {
           var key = keys[i];
@@ -471,8 +465,7 @@ var require_moo = __commonJS({
           var included = /* @__PURE__ */ Object.create(null);
           for (var j = 0; j < rules.length; j++) {
             var rule = rules[j];
-            if (!rule.include)
-              continue;
+            if (!rule.include) continue;
             var splice = [j, 1];
             if (rule.include !== key && !included[rule.include]) {
               included[rule.include] = true;
@@ -482,8 +475,7 @@ var require_moo = __commonJS({
               }
               for (var k = 0; k < newRules.length; k++) {
                 var newRule = newRules[k];
-                if (rules.indexOf(newRule) !== -1)
-                  continue;
+                if (rules.indexOf(newRule) !== -1) continue;
                 splice.push(newRule);
               }
             }
@@ -564,8 +556,7 @@ var require_moo = __commonJS({
         };
       };
       Lexer.prototype.setState = function(state) {
-        if (!state || this.state === state)
-          return;
+        if (!state || this.state === state) return;
         this.state = state;
         var info = this.states[state];
         this.groups = info.groups;
@@ -669,12 +660,9 @@ var require_moo = __commonJS({
           var err = new Error(this.formatError(token, "invalid syntax"));
           throw err;
         }
-        if (group.pop)
-          this.popState();
-        else if (group.push)
-          this.pushState(group.push);
-        else if (group.next)
-          this.setState(group.next);
+        if (group.pop) this.popState();
+        else if (group.push) this.pushState(group.push);
+        else if (group.next) this.setState(group.next);
         return token;
       };
       if (typeof Symbol !== "undefined" && Symbol.iterator) {
@@ -1027,9 +1015,19 @@ var require_parser = __commonJS({
 // packages/expandable/index.js
 import { css, html as html3 } from "lit";
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0-next.4_@warp-ds+uno@2.0.0_unocss@0.58.5_postcss@8.4.38_rollup@4.18.0_vite@_d2fzbudswaxjysaqn4v4imsdwy/node_modules/@warp-ds/css/component-classes/index.js
+// 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/@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 box = {
-  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
+  base: "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
@@ -1037,30 +1035,27 @@ var box = {
   neutral: "s-surface-sunken",
   bordered: "border-2 s-border s-bg"
 };
-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,
+  wrapper: "will-change-height s-text",
+  box: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8",
+  bleed: "-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8",
   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",
+  // These are web component specific classes, using the ::part-selector:
+  elementsChevronDownTransform: "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",
+  elementsChevronUpTransform: "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",
+  elementsChevronExpand: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsChevronCollapse: "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",
+  button: "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8",
+  contentWithTitle: "pt-0",
   title: "flex w-full justify-between items-center",
-  titleType: "h4"
+  titleType: "t4"
 };
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
@@ -1179,7 +1174,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",
@@ -1193,19 +1188,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"
@@ -1262,15 +1253,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",
@@ -1320,24 +1305,15 @@ function kebabCaseAttributes(constructor) {
     }
   };
 }
-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);
-}
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
-// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.7.1/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@4.11.2/node_modules/@lingui/message-utils/dist/compileMessage.mjs
 var import_parser = __toESM(require_parser(), 1);
 function processTokens(tokens, mapText) {
   if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1361,11 +1337,9 @@ function processTokens(tokens, mapText) {
     }
     const offset = token.pluralOffset;
     const formatProps = {};
-    token.cases.forEach((item) => {
-      formatProps[item.key.replace(/^=(.)+/, "$1")] = processTokens(
-        item.tokens,
-        mapText
-      );
+    token.cases.forEach(({ key, tokens: tokens2 }) => {
+      const prop = key[0] === "=" ? key.slice(1) : key;
+      formatProps[prop] = processTokens(tokens2, mapText);
     });
     return [
       token.arg,
@@ -1387,7 +1361,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1473,11 +1447,11 @@ var selectFormatter = (value, rules) => {
 function interpolate(translation, locale, locales) {
   return (values = {}, formats) => {
     const formatters = getDefaultFormats(locale, locales, formats);
-    const formatMessage = (tokens) => {
+    const formatMessage = (tokens, replaceOctothorpe = false) => {
       if (!Array.isArray(tokens))
         return tokens;
       return tokens.reduce((message, token) => {
-        if (token === "#") {
+        if (token === "#" && replaceOctothorpe) {
           return message + OCTOTHORPE_PH;
         }
         if (isString(token)) {
@@ -1488,7 +1462,10 @@ function interpolate(translation, locale, locales) {
         if (type === "plural" || type === "selectordinal" || type === "select") {
           Object.entries(format).forEach(
             ([key, value2]) => {
-              interpolatedFormat[key] = formatMessage(value2);
+              interpolatedFormat[key] = formatMessage(
+                value2,
+                type === "plural" || type === "selectordinal"
+              );
             }
           );
         } else {
@@ -1656,6 +1633,9 @@ var I18n = class extends EventEmitter {
   }
   _(id, values, options) {
     let message = options == null ? void 0 : options.message;
+    if (!id) {
+      id = "";
+    }
     if (!isString(id)) {
       values = id.values || values;
       message = id.message;
@@ -1696,7 +1676,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
 var messages = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
 var messages2 = JSON.parse('{"icon.title.chevron-down":"Downward arrow"}');
 var messages3 = JSON.parse('{"icon.title.chevron-down":"Nuoli alasp\xE4in"}');
@@ -1785,7 +1765,7 @@ if (!customElements.get("w-icon-chevron-down-16")) {
   customElements.define("w-icon-chevron-down-16", IconChevronDown16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.0.1/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.0.2/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
 import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
 var messages4 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
@@ -1877,12 +1857,13 @@ if (!customElements.get("w-icon-chevron-up-16")) {
 }
 
 // packages/expandable/index.js
+var _WarpExpandable_instances, wrapperClasses_get, buttonClasses_get, chevronClasses_get, chevronIcon_get, contentClasses_get, expansionClasses_get;
 var WarpExpandable = class extends kebabCaseAttributes(WarpElement) {
   constructor() {
     super();
+    __privateAdd(this, _WarpExpandable_instances);
     this.expanded = false;
     this.animated = false;
-    this.info = false;
     this.box = false;
     this.bleed = false;
     this.noChevron = false;
@@ -1900,72 +1881,60 @@ var WarpExpandable = class extends kebabCaseAttributes(WarpElement) {
     this._hasTitle = !!this.title || this.renderRoot.querySelector("slot[name='title']").assignedNodes().length > 0;
   }
   get _expandableSlot() {
-    return html3`<div
-      class=${fclasses({
-      [this.contentClass || ""]: true,
-      [box.box]: this.box,
-      [expandable.paddingTop]: this._hasTitle && this.box
-    })}>
+    return html3`<div class="${__privateGet(this, _WarpExpandable_instances, contentClasses_get)}">
       <slot></slot>
     </div>`;
   }
-  get _chevronUpClasses() {
-    return fclasses({
-      [expandable.elementsTransformChevronUpPart]: true,
-      [expandable.elementsChevronUpCollapsePart]: !this.expanded && this._showChevronUp
-    });
-  }
-  get _chevronDownClasses() {
-    return fclasses({
-      [expandable.elementsTransformChevronDownPart]: true,
-      [expandable.elementsChevronDownExpandPart]: this.expanded && !this._showChevronUp
-    });
-  }
   render() {
-    return html3` <div
-      class=${fclasses({
-      [expandable.expandable]: true,
-      [expandable.expandableBox]: this.box,
-      [expandable.expandableBleed]: this.bleed
-    })}>
+    return html3` <div class="${__privateGet(this, _WarpExpandable_instances, wrapperClasses_get)}">
       ${this._hasTitle ? html3`<w-unstyled-heading level=${this.headingLevel}>
             <button
               type="button"
               aria-expanded="${this.expanded}"
-              class=${fclasses({
-      [this.buttonClass || ""]: true,
-      [expandable.button]: true,
-      [expandable.buttonBox]: this.box
-    })}
+              class="${__privateGet(this, _WarpExpandable_instances, buttonClasses_get)}"
               @click=${() => this.expanded = !this.expanded}>
               <div class="${expandable.title}">
                 ${this.title ? html3`<span class="${expandable.titleType}">${this.title}</span>` : html3`<slot name="title"></slot>`}
-                ${this.noChevron ? "" : html3`<div
-                      class=${fclasses({
-      [expandable.chevron]: true,
-      [expandable.chevronBox]: this.box,
-      [expandable.chevronNonBox]: !this.box
-    })}>
-                      ${this._showChevronUp ? html3`<w-icon-chevron-up-16 class="${this._chevronUpClasses}"></w-icon-chevron-up-16>` : html3`<w-icon-chevron-down-16 class="${this._chevronDownClasses}"></w-icon-chevron-down-16>`}
-                    </div>`}
+                ${this.noChevron ? "" : html3`<div class="${__privateGet(this, _WarpExpandable_instances, chevronClasses_get)}">${__privateGet(this, _WarpExpandable_instances, chevronIcon_get)}</div>`}
               </div>
             </button>
           </w-unstyled-heading>` : ""}
-      ${this.animated ? html3`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html3`<div
-            class=${fclasses({
-      [expandable.expansion]: true,
-      [expandable.expansionNotExpanded]: !this.expanded
-    })}
-            aria-hidden=${ifDefined(!this.expanded ? true : void 0)}>
+      ${this.animated ? html3`<w-expand-transition ?show=${this.expanded}> ${this._expandableSlot} </w-expand-transition>` : html3`<div class="${__privateGet(this, _WarpExpandable_instances, expansionClasses_get)}" aria-hidden=${ifDefined(!this.expanded ? true : void 0)}>
             ${this._expandableSlot}
           </div>`}
     </div>`;
   }
 };
+_WarpExpandable_instances = new WeakSet();
+wrapperClasses_get = function() {
+  return r([expandable.wrapper, this.box && expandable.box, this.bleed && expandable.bleed]);
+};
+buttonClasses_get = function() {
+  return r(this.buttonClass, [expandable.button, this.box && expandable.buttonBox]);
+};
+chevronClasses_get = function() {
+  return r([expandable.chevron, !this.box && expandable.chevronNonBox]);
+};
+chevronIcon_get = function() {
+  const upClasses = r([
+    expandable.elementsChevronUpTransform,
+    !this.expanded && this._showChevronUp && expandable.elementsChevronCollapse
+  ]);
+  const downClasses = r([
+    expandable.elementsChevronDownTransform,
+    this.expanded && !this._showChevronUp && expandable.elementsChevronExpand
+  ]);
+  return this._showChevronUp ? html3`<w-icon-chevron-up-16 class="${upClasses}"></w-icon-chevron-up-16>` : html3`<w-icon-chevron-down-16 class="${downClasses}"></w-icon-chevron-down-16>`;
+};
+contentClasses_get = function() {
+  return r(this.contentClass, [this.box && box.base, this._hasTitle && this.box && expandable.contentWithTitle]);
+};
+expansionClasses_get = function() {
+  return r([expandable.expansion, !this.expanded && expandable.expansionNotExpanded]);
+};
 __publicField(WarpExpandable, "properties", {
   expanded: { type: Boolean, reflect: true },
   title: { type: String },
-  info: { type: Boolean },
   box: { type: Boolean },
   bleed: { type: Boolean },
   buttonClass: { type: String },