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

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

@@ -31,12 +31,22 @@ export class WarpSelect extends WarpSelect_base {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+            relfect: boolean;
+        };
         _options: {
             state: boolean;
         };
     };
     static styles: any[];
     _options: any;
+    firstUpdated(): void;
+    handleKeyDown(event: any): void;
     render(): import("lit").TemplateResult<1>;
     #private;
 }

package/dist/packages/select/index.js

@@ -1391,41 +1391,7 @@ 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"
-};
-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/@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]",
@@ -1543,7 +1509,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",
@@ -1558,33 +1524,34 @@ var modal = {
   titleButtonIconRotated: "transform rotate-90"
 };
 var select = {
-  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current",
-  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none",
-  invalid: "s-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
-  readOnly: "pl-0 bg-transparent border-0 pointer-events-none before:hidden",
+  base: "block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",
+  default: "s-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active",
+  disabled: "s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",
+  invalid: "s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",
+  readOnly: "s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",
   wrapper: "relative",
   selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
-  chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",
+  chevron: "block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",
   chevronDisabled: "opacity-25"
 };
 var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
+  base: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
   optional: "pl-8 font-normal text-s s-text-subtle"
 };
 var helpText = {
-  helpText: "text-xs mt-4 block",
-  helpTextColor: "s-text-subtle",
-  helpTextColorInvalid: "s-text-negative"
+  base: "text-xs mt-4 block",
+  color: "s-text-subtle",
+  colorInvalid: "s-text-negative"
 };
-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"
@@ -1641,15 +1608,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",
@@ -1848,11 +1809,19 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement) {
     activateI18n(messages2, messages4, messages3, messages);
     this._options = this.innerHTML;
   }
+  firstUpdated() {
+    this.autoFocus && this.shadowRoot.querySelector("select").focus();
+  }
+  handleKeyDown(event) {
+    if (this.readOnly && (event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+    }
+  }
   render() {
     return html2`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html2`<label class="${label.label}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
+      () => html2`<label class="${label.base}" for="${__privateGet(this, _WarpSelect_instances, id_get)}">
             ${this.label}
             ${when(
         this.optional,
@@ -1870,10 +1839,11 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement) {
         <select
           class="${__privateGet(this, _WarpSelect_instances, classes_get)}"
           id="${__privateGet(this, _WarpSelect_instances, id_get)}"
-          ?autofocus=${this.autoFocus}
+          ?disabled=${this.disabled}
           aria-describedby="${ifDefined(__privateGet(this, _WarpSelect_instances, helpId_get))}"
           aria-invalid="${ifDefined(this.invalid)}"
-          aria-errormessage="${ifDefined(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}">
+          aria-errormessage="${ifDefined(this.invalid && __privateGet(this, _WarpSelect_instances, helpId_get))}"
+          @keydown=${this.handleKeyDown}>
           ${unsafeHTML(this._options)}
         </select>
         <div class="${__privateGet(this, _WarpSelect_instances, chevronClasses_get)}">
@@ -1886,23 +1856,19 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement) {
 };
 _WarpSelect_instances = new WeakSet();
 classes_get = function() {
-  return r({
-    [select.default]: true,
-    [select.invalid]: this.invalid
-  });
+  return r([
+    select.base,
+    !this.invalid && !this.disabled && !this.readOnly && select.default,
+    this.invalid && select.invalid,
+    this.disabled && select.disabled,
+    this.readOnly && select.readOnly
+  ]);
 };
 helpTextClasses_get = function() {
-  return r({
-    [helpText.helpText]: true,
-    [helpText.helpTextColor]: !this.invalid,
-    [helpText.helpTextColorInvalid]: this.invalid
-  });
+  return r([helpText.base, this.invalid ? helpText.colorInvalid : helpText.color]);
 };
 chevronClasses_get = function() {
-  return r({
-    [select.chevron]: true,
-    [select.chevronDisabled]: this.disabled
-  });
+  return r([select.chevron, this.disabled && select.chevronDisabled]);
 };
 id_get = function() {
   return "select_id";
@@ -1923,6 +1889,10 @@ __publicField(WarpSelect, "properties", {
   label: { type: String, reflect: true },
   // Whether to show optional text
   optional: { type: Boolean, reflect: true },
+  // Renders the field in a disabled state.
+  disabled: { type: Boolean, reflect: true },
+  // Renders the field in a readonly state.
+  readOnly: { type: Boolean, relfect: true },
   _options: { state: true }
 });
 __publicField(WarpSelect, "styles", [WarpElement.styles]);