@warp-ds/elements 2.2.0-next.22 → 2.2.0-next.23

package/dist/custom-elements.json

@@ -2627,6 +2627,16 @@
               "default": "false",
               "attribute": "invalid",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -2661,6 +2671,14 @@
               },
               "default": "false",
               "fieldName": "invalid"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
@@ -3852,7 +3870,7 @@
                 "text": "array"
               },
               "static": true,
-              "default": "[styles]"
+              "default": "[reset, toggleStyles]"
             },
             {
               "kind": "field",
@@ -4003,6 +4021,11 @@
               "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
               "attribute": "hint"
             },
+            {
+              "kind": "method",
+              "name": "setInitialAttributes",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "handleClick",
@@ -4210,27 +4233,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "packages/rip-and-tear-radio/radio-styles.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "styles",
-          "default": "css` :host { color: var(--wa-form-control-value-color); display: inline-flex; flex-direction: row; align-items: top; font-family: inherit; font-weight: var(--wa-form-control-value-font-weight); line-height: var(--wa-form-control-value-line-height); cursor: pointer; user-select: none; -webkit-user-select: none; } :host(:focus) { outline: none; } [part~='label'] { display: inline; } [part~='hint'] { margin-block-start: 0.5em; } /* Default appearance */ :host([appearance='default']) .control { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--wa-form-control-toggle-size, 2rem); height: var(--wa-form-control-toggle-size, 2rem); border-color: var(--wa-form-control-border-color, gray); border-radius: 50%; border-style: var(--wa-form-control-border-style, solid); border-width: var(--wa-form-control-border-width, 1px); background-color: var(--wa-form-control-background-color, white); color: transparent; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; margin-inline-end: 0.5em; } :host([appearance='clickable']) .control { position: absolute; inset: 0; height: 100%; width: 100%; cursor: pointer; } /* Checked */ :host(:state(checked)):not(:host([appearance='clickable'])) .control { /* color: var(--checked-icon-color, white); */ border-color: var(--wa-form-control-activated-color, blue); background-color: var(--wa-form-control-background-color, white); border-width: 0.6rem; } /* Focus */ :host(:focus-visible) .control { outline: 2px solid var(--w-s-color-border-focus); outline-offset: var(--w-outline-offset, 1px); } :host([appearance='clickable']:focus-visible) .control { outline-offset: -4px; border-radius: 8px; } /* Disabled */ :host(:state(disabled)) { opacity: 0.5; cursor: not-allowed; } /* Button appearance */ :host([appearance='button']) { align-items: center; min-height: var(--wa-form-control-height); background-color: var(--wa-color-surface-default); border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color); border-radius: var(--wa-border-radius-m); padding: 0 var(--wa-form-control-padding-inline); transition: background-color var(--wa-transition-fast), border-color var(--wa-transition-fast); } :host([appearance='button']) .control { display: none; } /* Horizontal grouping - remove inner border radius */ :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-inner]) { border-radius: 0; } :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-first]) { border-start-end-radius: 0; border-end-end-radius: 0; } :host([appearance='button'][data-wa-radio-horizontal][data-wa-radio-last]) { border-start-start-radius: 0; border-end-start-radius: 0; } /* Vertical grouping - remove inner border radius */ :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-inner]) { border-radius: 0; } :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-first]) { border-end-start-radius: 0; border-end-end-radius: 0; } :host([appearance='button'][data-wa-radio-vertical][data-wa-radio-last]) { border-start-start-radius: 0; border-start-end-radius: 0; } @media (hover: hover) { :host([appearance='button']:hover:not(:state(disabled), :state(checked))) { background-color: color-mix(in srgb, var(--wa-color-surface-default) 95%, var(--wa-color-mix-hover)); } } :host([appearance='button']:focus-visible) { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); } :host([appearance='button']:state(checked)) { border-color: var(--wa-form-control-activated-color); background-color: var(--wa-color-brand-fill-quiet); } :host([appearance='button']:state(checked):focus-visible) { outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-brand-border-loud); outline-offset: var(--wa-focus-ring-offset); } /* Remove inner borders and handle overlap */ :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) { margin-inline-start: calc(-1 * var(--wa-form-control-border-width)); } :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) { margin-block-start: calc(-1 * var(--wa-form-control-border-width)); } /* Ensure interactive states are visible above adjacent buttons */ :host([appearance='button']:hover), :host([appearance='button']:state(checked)) { position: relative; z-index: 1; } :host([appearance='button']:focus-visible) { z-index: 2; } `"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "styles",
-          "declaration": {
-            "name": "styles",
-            "module": "packages/rip-and-tear-radio/radio-styles.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/rip-and-tear-radio/radio.ts",
@@ -4247,7 +4249,7 @@
                 "text": "array"
               },
               "static": true,
-              "default": "[styles]"
+              "default": "[reset, toggleStyles]"
             },
             {
               "kind": "field",
@@ -4407,7 +4409,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "css` :host { display: block; } .form-control { position: relative; border: none; padding: 0; margin: 0; } .label { font-size: var(--w-font-size-s); line-height: var(--w-line-height-s); font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: grayscale; cursor: pointer; padding-bottom: 0.4rem; color: var(--w-s-color-text); display: block; } .radio-group-required .label::after { content: var(--wa-form-control-required-content); margin-inline-start: var(--wa-form-control-required-content-offset); } .button-group { display: flex; } [part~='form-control-input'] { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.75em; } /* Horizontal */ :host([orientation='horizontal']) [part~='form-control-input'] { flex-direction: row; gap: 1em; } /* Help text */ [part~='hint'] { margin-block-start: 0.5em; } /* Radios have the \"button\" appearance */ :host fieldset.has-radio-buttons { [part~='form-control-input'] { gap: 0; } } `"
+          "default": "css` :host { display: block; } .form-control { position: relative; border: none; padding: 0; margin: 0; } .label { font-size: var(--w-font-size-s); line-height: var(--w-line-height-s); font-weight: 700; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: grayscale; cursor: pointer; padding-bottom: 0.4rem; color: var(--w-s-color-text); display: block; } .radio-group-required .label::after { content: var(--wa-form-control-required-content); margin-inline-start: var(--wa-form-control-required-content-offset); } .button-group { display: flex; } [part~='form-control-input'] { display: flex; flex-direction: column; flex-wrap: wrap; } /* Horizontal */ :host([orientation='horizontal']) [part~='form-control-input'] { flex-direction: row; gap: 1em; } /* Help text */ [part~='hint'] { margin-block-start: 0.5em; } /* Radios have the \"button\" appearance */ :host fieldset.has-radio-buttons { [part~='form-control-input'] { gap: 0; } } `"
         }
       ],
       "exports": [
@@ -7051,6 +7053,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/rip-and-tear-radio/radio-styles.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "packages/rip-and-tear-radio/radio.stories.ts",

package/dist/index.d.ts

@@ -434,6 +434,8 @@ export type WarpDeadToggleProps = {
   "indeterminate"?: WarpDeadToggle['indeterminate'];
   /**  */
   "invalid"?: WarpDeadToggle['invalid'];
+  /**  */
+  "disabled"?: WarpDeadToggle['disabled'];
 
 
 }
@@ -1209,6 +1211,7 @@ export type WarpToastContainerProps = {
  * - `checked`: undefined 
  * - `indeterminate`: undefined 
  * - `invalid`: undefined 
+ * - `disabled`: undefined 
   */
     "w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;
 

package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
 import { DeadToggle } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import(".").WarpDeadToggle>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "type" | "invalid" | "checked" | "indeterminate" | "indeterminateMarker"> & {} & Partial<Omit<import(".").WarpDeadToggle, keyof HTMLElement>> & React.RefAttributes<import(".").WarpDeadToggle>): React.JSX.Element;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpDeadToggle>, "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "disabled" | "type" | "invalid" | "checked" | "indeterminate" | "indeterminateMarker"> & {} & Partial<Omit<import(".").WarpDeadToggle, keyof HTMLElement>> & React.RefAttributes<import(".").WarpDeadToggle>): React.JSX.Element;
     component: import("@lit/react").ReactWebComponent<import(".").WarpDeadToggle, {}>;
 };
 export default _default;

package/dist/packages/dead-toggle/index.d.ts

@@ -9,6 +9,7 @@ export declare class WarpDeadToggle extends LitElement {
     checked: boolean;
     indeterminate: boolean;
     invalid: boolean;
+    disabled: boolean;
     /** @internal */
     get indeterminateMarker(): "" | "–";
     render(): import("lit").TemplateResult<1>;

package/dist/packages/dead-toggle/index.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var a=(d,o,t,i)=>{for(var e=i>1?void 0:i?g(o,t):o,c=d.length-1,l;c>=0;c--)(l=d[c])&&(e=(i?l(o,t,e):l(e))||e);return i&&e&&p(o,t,e),e};import{css as v,html as h,LitElement as u}from"lit";import{property as n}from"lit/decorators.js";import{classMap as w}from"lit/directives/class-map.js";import{css as s}from"lit";var b=s`
+var g=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(n,t,d,i)=>{for(var r=i>1?void 0:i?h(t,d):t,c=n.length-1,l;c>=0;c--)(l=n[c])&&(r=(i?l(t,d,r):l(r))||r);return i&&r&&g(t,d,r),r};import{html as u,LitElement as m}from"lit";import{property as a}from"lit/decorators.js";import{css as s}from"lit";var b=s`
   *,
   :before,
   :after {
@@ -2437,51 +2437,112 @@ var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var a=(d,o,t,i
                     display: none
                 }
             }
-        `;var r=class extends u{constructor(){super(...arguments);this.type="radio";this.checked=!1;this.indeterminate=!1;this.invalid=!1}get indeterminateMarker(){return!this.checked&&this.indeterminate?"\u2013":""}render(){let t=w({checkbox:this.type==="checkbox",radio:this.type==="radio",checked:this.checked});return h` <div class="${t}">${this.indeterminateMarker}</div> `}};r.styles=[b,v`
-      div {
-        display: block;
-        border-width: 1px;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        cursor: pointer;
-        appearance: none;
-        user-select: none;
-        flex-shrink: 0;
-        height: 2rem;
-        width: 2rem;
-        background-color: var(--w-s-color-background);
-        border-color: var(--w-s-color-border);
-        color: var(--w-s-color-icon-inverted);
-        font-weight: 700;
-        text-align: center;
-        line-height: var(--w-line-height-xs);
-        font-size: var(--w-font-size-m);
-      }
-      :host([type='checkbox']) div {
-        border-radius: 2px;
-      }
-      :host([type='checkbox'][checked]) div,
-      :host([type='checkbox'][indeterminate]) div {
-        background-color: var(--w-s-color-background-primary);
-        border-color: var(--w-s-color-border-primary);
-      }
-      :host([type='checkbox'][checked]) div {
-        background-image: var(--w-icon-toggle-checked);
-      }
-      :host([type='radio']) div {
-        border-radius: 50%;
-      }
-      :host([type='radio'][checked]) div {
-        border-color: var(--w-s-color-border-selected);
-        border-width: 0.6rem;
-      }
-      :host([invalid]) div {
-        border-color: var(--w-s-color-border-negative) !important;
-      }
-      :host([type='checkbox'][invalid][checked]) div,
-      :host([type='checkbox'][invalid][indeterminate]) div {
-        background-color: var(--w-s-color-background-negative);
-      }
-    `],a([n({type:String,reflect:!0})],r.prototype,"type",2),a([n({type:Boolean,reflect:!0})],r.prototype,"checked",2),a([n({type:Boolean,reflect:!0})],r.prototype,"indeterminate",2),a([n({type:Boolean,reflect:!0})],r.prototype,"invalid",2);customElements.get("w-dead-toggle")||customElements.define("w-dead-toggle",r);export{r as WarpDeadToggle};
+        `;import{css as v}from"lit";var p=v`
+  [part~='label'] {
+    display: block;
+    font-size: var(--w-font-size-m);
+    line-height: var(--w-line-height-m);
+    user-select: none;
+    cursor: pointer;
+  }
+  .wrapper {
+    display: grid;
+    grid-template-columns: 2rem max-content;
+    gap: 8px;
+    padding: 0.2rem 0;
+  }
+  .hide-toggle {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    pointer-events: none;
+    inset: 0;
+  }
+  .control {
+    display: block;
+    border-width: 1px;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    cursor: pointer;
+    appearance: none;
+    user-select: none;
+    flex-shrink: 0;
+    height: 2rem;
+    width: 2rem;
+    background-color: var(--w-s-color-background);
+    border-color: var(--w-s-color-border);
+    color: var(--w-s-color-icon-inverted);
+    font-weight: 700;
+    text-align: center;
+    line-height: var(--w-line-height-xs);
+    font-size: var(--w-font-size-m);
+  }
+  .checkbox {
+    position: relative;
+  }
+  :host([type='checkbox']) .control {
+    border-radius: 2px;
+  }
+  .checkbox:has(:checked, :indeterminate),
+  :host([type='checkbox'][checked]) .control,
+  :host([type='checkbox'][indeterminate]) .control {
+    background-color: var(--w-s-color-background-primary);
+    border-color: var(--w-s-color-border-primary);
+  }
+  .checkbox:has(:checked),
+  :host([type='checkbox'][checked]) .control {
+    background-image: var(--w-icon-toggle-checked);
+    background-position: center;
+  }
+  :host([type='radio']) .control,
+  :host([role='radio']) .control {
+    border-radius: 50%;
+  }
+  :host([type='radio'][checked]) .control,
+  /* :state is newly available, so we set an attribute in radio for compat */
+  :host([role='radio'][checked-ui]) .control,
+  :host([role='radio']:state(checked)) .control {
+    border-color: var(--w-s-color-border-selected);
+    border-width: 0.6rem;
+  }
+  .checkbox:has(:invalid),
+  :host([invalid]) .control {
+    border-color: var(--w-s-color-border-negative) !important;
+  }
+  /* handles invalid checkbox state inside w-checkbox */
+  .checkbox:has(:checked, :indeterminate):has(:invalid),
+  /* allows invalid to be set on the w-checkbox element */
+  :host([invalid]) .checkbox:has(:checked, :indeterminate),
+  :host([type='checkbox'][invalid][checked]) .control,
+  :host([type='checkbox'][invalid][indeterminate]) .control {
+    background-color: var(--w-s-color-background-negative);
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+  .checkbox:has(> input:focus-visible:not(:disabled)),
+  :host(:focus-visible) .control {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+  }
+
+  :host([type='radio'][disabled]) .control,
+  /* :state is newly available, so we set an attribute in radio for compat */
+  :host([role='radio'][disabled-ui]) .control,
+  :host([role='radio']:state(disabled)) .control,
+  :host([type='checkbox'][disabled]) .control,
+  .checkbox:has(> input:disabled) {
+    border-color: var(--w-s-color-border-disabled);
+    background-color: var(--w-s-color-background-disabled-subtle);
+  }
+
+  :host([type='checkbox'][disabled][checked]) .control,
+  :host([type='checkbox'][disabled][indeterminate]) .control,
+  .checkbox:has(:checked, :indeterminate):has(> input:disabled) {
+    background-color: var(--w-s-color-background-disabled);
+  }
+`;var e=class extends m{constructor(){super(...arguments);this.type="radio";this.checked=!1;this.indeterminate=!1;this.invalid=!1;this.disabled=!1}get indeterminateMarker(){return!this.checked&&this.indeterminate?"\u2013":""}render(){return u` <div class="control">${this.indeterminateMarker}</div> `}};e.styles=[b,p],o([a({type:String,reflect:!0})],e.prototype,"type",2),o([a({type:Boolean,reflect:!0})],e.prototype,"checked",2),o([a({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2),o([a({type:Boolean,reflect:!0})],e.prototype,"invalid",2),o([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2);customElements.get("w-dead-toggle")||customElements.define("w-dead-toggle",e);export{e as WarpDeadToggle};
 //# sourceMappingURL=index.js.map