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

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

@@ -1,9 +1,14 @@
-export class WarpAffix {
-    static styles: any[];
+declare const WarpAffix_base: {
+    new (): {
+        [x: string]: any;
+    };
+    [x: string]: any;
+    createProperty(name: any, options: any): void;
+};
+export class WarpAffix extends WarpAffix_base {
     static properties: {
         ariaLabel: {
             type: StringConstructor;
-            attribute: string;
         };
         clear: {
             type: BooleanConstructor;
@@ -15,12 +20,14 @@ export class WarpAffix {
             type: StringConstructor;
         };
     };
-    get _classBase(): typeof suffix;
-    get _classes(): import(".pnpm/lit-html@3.1.4/node_modules/lit-html/directive").DirectiveResult<typeof import("lit/directives/class-map").ClassMapDirective>;
+    static styles: any[];
+    get _classBase(): typeof ccSuffix;
+    get _classes(): string;
     get _searchButton(): import("lit").TemplateResult<1>;
     get _clearButton(): import("lit").TemplateResult<1>;
     get _text(): import("lit").TemplateResult<1>;
     get _markup(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
-import { suffix } from '@warp-ds/css/component-classes';
+import { suffix as ccSuffix } from '@warp-ds/css/component-classes';
+export {};

package/dist/packages/affix/index.js

@@ -1009,41 +1009,17 @@ var require_parser = __commonJS({
 // packages/affix/index.js
 import { html as html3 } from "lit";
 
-// 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"
-};
-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"
+// 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 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]",
@@ -1161,7 +1137,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",
@@ -1175,19 +1151,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"
@@ -1244,15 +1216,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",
@@ -1838,27 +1804,28 @@ if (!customElements.get("w-icon-close-16")) {
 
 // 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;
+var camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function kebabCaseAttributes(constructor) {
+  return class extends constructor {
+    static createProperty(name, options) {
+      let customOptions = options;
+      if (typeof (options == null ? void 0 : options.attribute) === "undefined" || (options == null ? void 0 : options.attribute) === true) {
+        customOptions = Object.assign({}, options, {
+          attribute: camelCaseToKebabCase(name.toString())
+        });
+      }
+      super.createProperty(name, customOptions);
     }
-  }
-  return classMap(defn);
+  };
 }
 
 // packages/affix/index.js
-var WarpAffix = class extends WarpElement {
+var WarpAffix = class extends kebabCaseAttributes(WarpElement) {
   get _classBase() {
     return this.slot === "suffix" ? suffix : prefix;
   }
   get _classes() {
-    return fclasses({
-      [this._classBase.wrapper]: true,
-      [this._classBase.wrapperWithLabel]: this.label,
-      [this._classBase.wrapperWithIcon]: !this.label
-    });
+    return r([this._classBase.wrapper, this.label ? this._classBase.wrapperWithLabel : this._classBase.wrapperWithIcon]);
   }
   get _searchButton() {
     return html3`
@@ -1894,13 +1861,13 @@ var WarpAffix = class extends WarpElement {
     return html3`${this._markup}`;
   }
 };
-__publicField(WarpAffix, "styles", [WarpElement.styles]);
 __publicField(WarpAffix, "properties", {
-  ariaLabel: { type: String, attribute: "aria-label" },
+  ariaLabel: { type: String },
   clear: { type: Boolean },
   search: { type: Boolean },
   label: { type: String }
 });
+__publicField(WarpAffix, "styles", [WarpElement.styles]);
 if (!customElements.get("w-affix")) {
   customElements.define("w-affix", WarpAffix);
 }