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

package/README.md

@@ -14,7 +14,7 @@ start by reviewing the [contributing guidelines](CONTRIBUTING.md).
 
 ### Installation
 
-Warp custom elements are supplied by the Eik CDN. 
+Warp custom elements are supplied by the Eik CDN.
 In addition, you can install the `@warp-ds/elements` package to get intellisense
 in your editor.
 
@@ -138,34 +138,19 @@ Add `@warp-ds/elements` to tsconfig types in compilerOptions.
 
 #### Visual Studio Code
 
-This module includes [Custom HTML and CSS data for Visual Studio Code](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
+Install the [Web Components Language Server](https://wc-toolkit.com/integrations/web-components-language-server/) extension. The extension automatically picks up the [Custom Element Manifest](https://wc-toolkit.com/getting-started/) that we ship with `@warp-ds/elements`.
 
 ##### Using Warp Elements in a plain HTML page
 
-When developing, install Warp Elements locally using npm
+Install Warp Elements locally using npm:
 
 ```
 npm install @warp-ds/elements
 ```
 
-Add the following snippet to settings.json in vscode to tell it about Warp components
+Install the [Web Components Language Server](https://wc-toolkit.com/integrations/web-components-language-server/) extension.
 
-.vscode/settings.json
-
-```json
-{
-  "html.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
-  ],
-  "css.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
-  ]
-}
-```
-
-restart vscode
-
-Now, inside any .html files, you will get intellisense when using Warp Elements
+Now, inside any `.html` files, you will get IntelliSense when using Warp Elements:
 
 ```html
 <w-button variant=""><w-button>
@@ -177,28 +162,15 @@ IntelliSense in JavaScript strings is not supported without additional plugins a
 
 ##### Using Warp Elements in Lit html tagged template literals
 
-When developing, install Warp Elements locally using npm
+Install Warp Elements locally using npm:
 
 ```
 npm install @warp-ds/elements
 ```
 
-Add the following snippet to settings.json in vscode to tell it about Warp components
+Install the [Web Components Language Server](https://wc-toolkit.com/integrations/web-components-language-server/) extension.
 
-.vscode/settings.json
-
-```json
-{
-  "html.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
-  ],
-  "css.customData": [
-    "./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
-  ]
-}
-```
-
-Install the lit-plugin vscode extension and restart vscode
+Install the [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) extension.
 
 Now, inside any html`` tagged template literals, you will get intellisense when using Warp Elements.
 
@@ -222,7 +194,7 @@ Now, inside your react components, you will get intellisense when using Warp Ele
 
 React 18 and earlier do not support custom elements.
 
-If you are on React 18 or early, we strongly urge you to please consider upgrading to React v19. 
+If you are on React 18 or early, we strongly urge you to please consider upgrading to React v19.
 
 If you cannot upgrade right away, Warp supplies custom element wrappers to add backwards compatibility. Use them like so:
 
@@ -244,6 +216,23 @@ and use the component
 
 you should get intellisense when using Warp Elements.
 
+#### CustomData fallback
+
+`@warp-ds/elements` also includes [Custom HTML and CSS data for Visual Studio Code](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
+
+If you can't get the Web Components Language Server to work, add the following snippet to `.vscode/settings.json`, then restart VS Code.
+
+```json
+{
+  "html.customData": [
+    "./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
+  ],
+  "css.customData": [
+    "./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
+  ]
+}
+```
+
 #### JetBrains products
 
 We ship `web-types.json` which should get picked up automatically by JetBrains IDEA and similar products.

package/dist/custom-elements.json

@@ -2,107 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "packages/alert/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
-          "name": "WarpAlert",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "AlertVariants"
-              },
-              "default": "'info'",
-              "attribute": "variant",
-              "reflects": true,
-              "parsedType": {
-                "text": "'negative' | 'positive' | 'warning' | 'info'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "show",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "'alert'",
-              "attribute": "role",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "AlertVariants"
-              },
-              "default": "'info'",
-              "fieldName": "variant",
-              "parsedType": {
-                "text": "'negative' | 'positive' | 'warning' | 'info'"
-              }
-            },
-            {
-              "name": "show",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "show"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "string"
-              },
-              "default": "'alert'",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "w-alert",
-          "customElement": true,
-          "modulePath": "packages/alert/index.ts",
-          "definitionPath": "packages/alert/index.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "w-alert",
-          "declaration": {
-            "name": "WarpAlert",
-            "module": "packages/alert/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WarpAlert",
-          "declaration": {
-            "name": "WarpAlert",
-            "module": "packages/alert/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "packages/affix/index.ts",
@@ -244,6 +143,107 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "packages/alert/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Alert is an inline component used for displaying different types of messages.\n\nFor accessibility reasons, alert should appear close to the element that triggered it.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)",
+          "name": "WarpAlert",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "AlertVariants"
+              },
+              "default": "'info'",
+              "attribute": "variant",
+              "reflects": true,
+              "parsedType": {
+                "text": "'negative' | 'positive' | 'warning' | 'info'"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "show",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'alert'",
+              "attribute": "role",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "AlertVariants"
+              },
+              "default": "'info'",
+              "fieldName": "variant",
+              "parsedType": {
+                "text": "'negative' | 'positive' | 'warning' | 'info'"
+              }
+            },
+            {
+              "name": "show",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "show"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'alert'",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "w-alert",
+          "customElement": true,
+          "modulePath": "packages/alert/index.ts",
+          "definitionPath": "packages/alert/index.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "w-alert",
+          "declaration": {
+            "name": "WarpAlert",
+            "module": "packages/alert/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WarpAlert",
+          "declaration": {
+            "name": "WarpAlert",
+            "module": "packages/alert/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "packages/utils/index.js",
@@ -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

@@ -1,6 +1,6 @@
 
-import type { WarpAlert } from "./packages/alert/index.ts";
 import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
+import type { WarpAlert } from "./packages/alert/index.ts";
 import type { WarpLink } from "./packages/link/index.ts";
 import type { ccButton, WarpButton } from "./packages/button/index.ts";
 import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
@@ -111,18 +111,6 @@ type BaseEvents = {
 
 
 
-export type WarpAlertProps = {
-  /**  */
-  "variant"?: WarpAlert['variant'];
-  /**  */
-  "show"?: WarpAlert['show'];
-  /**  */
-  "role"?: WarpAlert['role'];
-
-
-}
-
-
 export type WarpAffixProps = {
   /**  */
   "aria-label"?: WarpAffix['ariaLabel'];
@@ -143,6 +131,18 @@ Set an `aria-label` that explains the action when using this. */
 }
 
 
+export type WarpAlertProps = {
+  /**  */
+  "variant"?: WarpAlert['variant'];
+  /**  */
+  "show"?: WarpAlert['show'];
+  /**  */
+  "role"?: WarpAlert['role'];
+
+
+}
+
+
 export type WarpLinkProps = {
   /**  */
   "autofocus"?: WarpLink['autofocus'];
@@ -434,6 +434,8 @@ export type WarpDeadToggleProps = {
   "indeterminate"?: WarpDeadToggle['indeterminate'];
   /**  */
   "invalid"?: WarpDeadToggle['invalid'];
+  /**  */
+  "disabled"?: WarpDeadToggle['disabled'];
 
 
 }
@@ -921,24 +923,6 @@ export type WarpToastContainerProps = {
   export type CustomElements = {
 
 
-  /**
-     * Alert is an inline component used for displaying different types of messages.
- * 
- * For accessibility reasons, alert should appear close to the element that triggered it.
- * 
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `variant`: undefined 
- * - `show`: undefined 
- * - `role`: undefined 
-  */
-    "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
-
-
   /**
      * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
  * 
@@ -960,6 +944,24 @@ export type WarpToastContainerProps = {
     "w-affix": Partial<WarpAffixProps & BaseProps<WarpAffix> & BaseEvents>;
 
 
+  /**
+     * Alert is an inline component used for displaying different types of messages.
+ * 
+ * For accessibility reasons, alert should appear close to the element that triggered it.
+ * 
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `variant`: undefined 
+ * - `show`: undefined 
+ * - `role`: undefined 
+  */
+    "w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
+
+
   /**
      * Buttons are used to perform actions, with different visuals for different needs.
  * 
@@ -1209,6 +1211,7 @@ export type WarpToastContainerProps = {
  * - `checked`: undefined 
  * - `indeterminate`: undefined 
  * - `invalid`: undefined 
+ * - `disabled`: undefined 
   */
     "w-dead-toggle": Partial<WarpDeadToggleProps & BaseProps<WarpDeadToggle> & BaseEvents>;