@warp-ds/elements 2.2.0-next.17 → 2.2.0-next.19

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.2.0-next.16",
+  "version": "2.2.0-next.18",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -43,40 +43,6 @@
             "events": []
           }
         },
-        {
-          "name": "w-alert",
-          "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)\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "variant",
-              "value": {
-                "type": "'negative' | 'positive' | 'warning' | 'info'",
-                "default": "'info'"
-              }
-            },
-            {
-              "name": "show",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "role",
-              "value": { "type": "string", "default": "'alert'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "variant",
-                "type": "'negative' | 'positive' | 'warning' | 'info'"
-              },
-              { "name": "show", "type": "boolean" },
-              { "name": "role", "type": "string" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "w-attention",
           "description": "\n---\n",
@@ -157,6 +123,40 @@
             "events": []
           }
         },
+        {
+          "name": "w-alert",
+          "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)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "value": {
+                "type": "'negative' | 'positive' | 'warning' | 'info'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "show",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "role",
+              "value": { "type": "string", "default": "'alert'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "type": "'negative' | 'positive' | 'warning' | 'info'"
+              },
+              { "name": "show", "type": "boolean" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "w-badge",
           "description": "`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-badge--docs)\n---\n",
@@ -894,6 +894,331 @@
             ]
           }
         },
+        {
+          "name": "w-checkbox",
+          "description": "\n---\n\n\n### **Events:**\n - **change**\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string | null" }
+            },
+            {
+              "name": "size",
+              "description": "The checkbox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the checkbox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "form",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "value": { "type": "null", "default": "null" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the checkbox a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hint",
+              "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "Event" }],
+          "js": {
+            "properties": [
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string | null"
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "null"
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "The checkbox's hint. If you need to display HTML, use the `hint` slot instead.",
+                "type": "string"
+              }
+            ],
+            "events": [{ "name": "change", "type": "Event" }]
+          }
+        },
+        {
+          "name": "w-radio",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "form",
+              "description": "The string pointing to a form's id.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "value",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "appearance",
+              "description": "The radio's value. When selected, the radio group will receive this value.",
+              "value": {
+                "type": "'default' | 'button' | 'clickable'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "checked", "type": "boolean" },
+              {
+                "name": "form",
+                "description": "The string pointing to a form's id.",
+                "type": "string | null"
+              },
+              {
+                "name": "value",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "string"
+              },
+              {
+                "name": "appearance",
+                "description": "The radio's value. When selected, the radio group will receive this value.",
+                "type": "'default' | 'button' | 'clickable'"
+              },
+              {
+                "name": "size",
+                "description": "The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this\nattribute can typically be omitted.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-radio-group",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the radio group.\n\n### **Slots:**\n - **label** - Alternative to the `label` attribute should you need custom HTML.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "hint",
+              "description": "The radio groups's hint. If you need to display HTML, use the `hint` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the radio group, submitted as a name/value pair with form data.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the radio group and all child radios.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "orientation",
+              "description": "The orientation in which to show radio items.",
+              "value": {
+                "type": "'horizontal' | 'vertical'",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | null" }
+            },
+            {
+              "name": "size",
+              "description": "The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "required",
+              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "with-label",
+              "description": "Used for SSR. if true, will show slotted label on initial render.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "with-hint",
+              "description": "Used for SSR. if true, will show slotted hint on initial render.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "Alternative to the `label` attribute should you need custom HTML."
+            }
+          ],
+          "events": [
+            { "name": "input", "type": "InputEvent" },
+            { "name": "change", "type": "Event" }
+          ],
+          "js": {
+            "properties": [
+              { "name": "hasRadioButtons", "type": "boolean" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "label",
+                "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+                "type": "string"
+              },
+              {
+                "name": "hint",
+                "description": "The radio groups's hint. If you need to display HTML, use the `hint` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the radio group, submitted as a name/value pair with form data.",
+                "type": "string | null"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the radio group and all child radios.",
+                "type": "boolean"
+              },
+              {
+                "name": "orientation",
+                "description": "The orientation in which to show radio items.",
+                "type": "'horizontal' | 'vertical'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the radio group, submitted as a name/value pair with form data."
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | null"
+              },
+              {
+                "name": "size",
+                "description": "The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "required",
+                "description": "Ensures a child radio is checked before allowing the containing form to submit.",
+                "type": "boolean"
+              },
+              {
+                "name": "withLabel",
+                "description": "Used for SSR. if true, will show slotted label on initial render.",
+                "type": "boolean"
+              },
+              {
+                "name": "withHint",
+                "description": "Used for SSR. if true, will show slotted hint on initial render.",
+                "type": "boolean"
+              },
+              {
+                "name": "validationTarget",
+                "description": "We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on\nthe first radio element."
+              }
+            ],
+            "events": [
+              { "name": "input", "type": "InputEvent" },
+              { "name": "change", "type": "Event" }
+            ]
+          }
+        },
         {
           "name": "w-select",
           "description": "A dropdown component for selecting a single value.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)\n---\n",
@@ -1274,6 +1599,81 @@
             ],
             "events": [{ "name": "change", "type": "CustomEvent" }]
           }
+        },
+        {
+          "name": "w-tabs",
+          "description": "Tabs are used to organize content by grouping similar information on the same page.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "active",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "tab-class",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "active", "type": "string" },
+              { "name": "tabClass", "type": "string" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "w-tab",
+          "description": "Individual tab component used within w-tabs container.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            { "name": "label", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "over",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "tab-class",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "label", "type": "string" },
+              { "name": "active", "type": "boolean" },
+              { "name": "over", "type": "boolean" },
+              { "name": "tabClass", "type": "string" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "w-tab-panel",
+          "description": "Tab panel component that holds content for individual tabs.\nEach tab panel should have a name that matches a corresponding tab.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string" } },
+            {
+              "name": "hidden",
+              "value": { "type": "boolean", "default": "true" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "hidden", "type": "boolean" }
+            ],
+            "events": []
+          }
         }
       ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.2.0-next.17",
+  "version": "2.2.0-next.19",
   "packageManager": "pnpm@10.15.1",
   "description": "Custom elements for Warp",
   "exports": {
@@ -48,14 +48,13 @@
     "build:entrypoint": "node ./build/entrypoint.js",
     "build:storybook": "pnpm run messages:compile && tsc && pnpm run build:manifest && pnpm run build:entrypoint && storybook build && pnpm run build:polyfill && touch ./storybook-static/.nojekyll",
     "build:manifest": "custom-elements-manifest analyze --config .cem/custom-element-manifest.config.js",
-    "build": "rimraf dist && rimraf eik && pnpm messages:compile && tsc && pnpm build:manifest && pnpm build:editor && pnpm build:components && pnpm run build:cloak && pnpm build:bundle && pnpm build:types && pnpm run build:polyfill",
+    "build": "rimraf dist && rimraf eik && pnpm messages:compile && tsc && pnpm build:manifest && pnpm build:editor && pnpm build:components && pnpm run build:cloak && pnpm build:bundle && pnpm run build:polyfill",
     "build:cloak": "node ./build/cloak.js",
     "build:components": "node ./build/components.js",
     "build:editor": "node ./build/editor.js",
     "build:styles": "node ./build/styles.js",
     "build:polyfill": "node ./build/polyfill.js",
     "build:bundle": "tsc --project tsconfig.json --outDir .tmp --declaration false --sourceMap true && rollup -c ./build/bundle.js && rimraf .tmp",
-    "build:types": "cp ./index.d.ts ./dist/index.d.ts",
     "commit": "cz",
     "dev": "pnpm run storybook",
     "storybook": "storybook dev --port 63900",
@@ -100,6 +99,7 @@
     "@warp-ds/eslint-config": "1.1.0",
     "@warp-ds/uno": "2.1.0",
     "@wc-toolkit/cem-validator": "^1.0.3",
+    "@wc-toolkit/jsx-types": "^1.4.2",
     "@wc-toolkit/storybook-helpers": "^9.0.1",
     "@wc-toolkit/type-parser": "^1.2.0",
     "custom-element-jet-brains-integration": "^1.7.0",