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

package/dist/packages/tabs/tabs.stories.js

@@ -9,85 +9,85 @@ const meta = {
 export default meta;
 export const Default = () => html `
   <w-tabs active="tab1">
-    <w-tab name="tab1" label="First Tab"></w-tab>
-    <w-tab name="tab2" label="Second Tab"></w-tab>
-    <w-tab name="tab3" label="Third Tab"></w-tab>
-  </w-tabs>
-
-  <w-tab-panel name="tab1">
-    <p>Content for the first tab. This panel is visible when the first tab is active.</p>
-  </w-tab-panel>
+  
+    <w-tab for="tab1" label="First Tab"></w-tab>
+    <w-tab-panel id="tab1">
+      <p>Content for the first tab. This panel is visible when the first tab is active.</p>
+    </w-tab-panel>
+  
+    <w-tab for="tab2" label="Second Tab"></w-tab>
+    <w-tab-panel id="tab2" hidden>
+      <p>Content for the second tab. This panel is visible when the second tab is active.</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab2" hidden>
-    <p>Content for the second tab. This panel is visible when the second tab is active.</p>
-  </w-tab-panel>
+    <w-tab for="tab3" label="Third Tab"></w-tab>
+    <w-tab-panel id="tab3" hidden>
+      <p>Content for the third tab. This panel is visible when the third tab is active.</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab3" hidden>
-    <p>Content for the third tab. This panel is visible when the third tab is active.</p>
-  </w-tab-panel>
+  </w-tabs>
+  
 `;
 export const WithIcons = () => html `
   <w-tabs active="info">
-    <w-tab name="info" label="Info">
+    <w-tab for="info" label="Info">
       <span slot="icon">
-          <w-icon-info-16></w-icon-info-16>
+        <w-icon-info-16></w-icon-info-16>
       </span>
     </w-tab>
-    <w-tab name="done" label="Done">
+    <w-tab-panel id="info">
+      <p>Info content.</p>
+    </w-tab-panel>
+
+    <w-tab for="done" label="Done">
       <span slot="icon">
-          <w-icon-success-16></w-icon-success-16>
+        <w-icon-success-16></w-icon-success-16>
       </span>
     </w-tab>
-    <w-tab name="error" label="Failures">
+    <w-tab-panel id="done" hidden>
+      <p>Done content.</p>
+    </w-tab-panel>
+
+    <w-tab for="error" label="Failures">
       <span slot="icon">
-          <w-icon-error-16></w-icon-error-16>
+        <w-icon-error-16></w-icon-error-16>
       </span>
     </w-tab>
+    <w-tab-panel id="error" hidden>
+      <p>Error content.</p>
+    </w-tab-panel>
   </w-tabs>
-
-  <w-tab-panel name="home">
-    <p>Welcome to the home page!</p>
-  </w-tab-panel>
-
-  <w-tab-panel name="search" hidden>
-    <p>Search functionality goes here.</p>
-  </w-tab-panel>
-
-  <w-tab-panel name="profile" hidden>
-    <p>User profile information.</p>
-  </w-tab-panel>
 `;
 export const ManyTabs = () => html `
   <w-tabs active="tab1">
-    <w-tab name="tab1" label="Tab 1"></w-tab>
-    <w-tab name="tab2" label="Tab 2"></w-tab>
-    <w-tab name="tab3" label="Tab 3"></w-tab>
-    <w-tab name="tab4" label="Tab 4"></w-tab>
-    <w-tab name="tab5" label="Tab 5"></w-tab>
-    <w-tab name="tab6" label="Tab 6"></w-tab>
-  </w-tabs>
+    <w-tab for="tab1" label="Tab 1"></w-tab>
+    <w-tab-panel id="tab1">
+      <p>Content for tab 1</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab1">
-    <p>Content for tab 1</p>
-  </w-tab-panel>
+    <w-tab for="tab2" label="Tab 2"></w-tab>
+    <w-tab-panel id="tab2" hidden>
+      <p>Content for tab 2</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab2" hidden>
-    <p>Content for tab 2</p>
-  </w-tab-panel>
+    <w-tab for="tab3" label="Tab 3"></w-tab>
+    <w-tab-panel id="tab3" hidden>
+      <p>Content for tab 3</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab3" hidden>
-    <p>Content for tab 3</p>
-  </w-tab-panel>
+    <w-tab for="tab4" label="Tab 4"></w-tab>
+    <w-tab-panel id="tab4" hidden>
+      <p>Content for tab 4</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab4" hidden>
-    <p>Content for tab 4</p>
-  </w-tab-panel>
+    <w-tab for="tab5" label="Tab 5"></w-tab>
+    <w-tab-panel id="tab5" hidden>
+      <p>Content for tab 5</p>
+    </w-tab-panel>
 
-  <w-tab-panel name="tab5" hidden>
-    <p>Content for tab 5</p>
-  </w-tab-panel>
-
-  <w-tab-panel name="tab6" hidden>
-    <p>Content for tab 6</p>
-  </w-tab-panel>
+    <w-tab for="tab6" label="Tab 6"></w-tab>
+    <w-tab-panel id="tab6" hidden>
+      <p>Content for tab 6</p>
+    </w-tab-panel>
+  </w-tabs>
 `;

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.4.0-next.2",
+  "version": "2.4.0-next.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -808,6 +808,33 @@
             "events": []
           }
         },
+        {
+          "name": "w-switch",
+          "description": "\n---\n\n\n### **Events:**\n - **change**",
+          "doc-url": "",
+          "attributes": [
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            { "name": "value", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "checked",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "change", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              { "name": "name", "type": "string" },
+              { "name": "value", "type": "string" },
+              { "name": "checked", "type": "boolean" },
+              { "name": "disabled", "type": "boolean" }
+            ],
+            "events": [{ "name": "change", "type": "CustomEvent" }]
+          }
+        },
         {
           "name": "w-combobox",
           "description": "A combobox element for text input with selectable options.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-combobox--docs)\n---\n",
@@ -1656,39 +1683,12 @@
             "events": []
           }
         },
-        {
-          "name": "w-switch",
-          "description": "\n---\n\n\n### **Events:**\n - **change**",
-          "doc-url": "",
-          "attributes": [
-            { "name": "name", "value": { "type": "string", "default": "''" } },
-            { "name": "value", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "checked",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [{ "name": "change", "type": "CustomEvent" }],
-          "js": {
-            "properties": [
-              { "name": "name", "type": "string" },
-              { "name": "value", "type": "string" },
-              { "name": "checked", "type": "boolean" },
-              { "name": "disabled", "type": "boolean" }
-            ],
-            "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": "for", "value": { "type": "string", "default": "''" } },
             { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "active",
@@ -1706,7 +1706,7 @@
           "events": [],
           "js": {
             "properties": [
-              { "name": "name", "type": "string" },
+              { "name": "for", "type": "string" },
               { "name": "label", "type": "string" },
               { "name": "active", "type": "boolean" },
               { "name": "over", "type": "boolean" },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.4.0-next.3",
+  "version": "2.4.0-next.5",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -65,10 +65,6 @@
       "types": "./dist/packages/datepicker/react.d.ts",
       "import": "./dist/packages/datepicker/react.js"
     },
-    "./react/deadtoggle": {
-      "types": "./dist/packages/dead-toggle/react.d.ts",
-      "import": "./dist/packages/deadtoggle/react.js"
-    },
     "./react/expandable": {
       "types": "./dist/packages/expandable/react.d.ts",
       "import": "./dist/packages/expandable/react.js"
@@ -81,50 +77,18 @@
       "types": "./dist/packages/modal/react.d.ts",
       "import": "./dist/packages/modal/react.js"
     },
-    "./react/pageindicator": {
-      "types": "./dist/packages/pageindicator/react.d.ts",
-      "import": "./dist/packages/pageindicator/react.js"
-    },
-    "./react/pagination": {
-      "types": "./dist/packages/pagination/react.d.ts",
-      "import": "./dist/packages/pagination/react.js"
-    },
     "./react/pill": {
       "types": "./dist/packages/pill/react.d.ts",
       "import": "./dist/packages/pill/react.js"
     },
-    "./react/checkbox": {
-      "types": "./dist/packages/checkbox/react.d.ts",
-      "import": "./dist/packages/checkbox/react.js"
-    },
-    "./react/radio": {
-      "types": "./dist/packages/radio/react.d.ts",
-      "import": "./dist/packages/radio/react.js"
-    },
     "./react/select": {
       "types": "./dist/packages/select/react.d.ts",
       "import": "./dist/packages/select/react.js"
     },
-    "./react/slider": {
-      "types": "./dist/packages/slider/react.d.ts",
-      "import": "./dist/packages/slider/react.js"
-    },
-    "./react/stepindicator": {
-      "types": "./dist/packages/stepindicator/react.d.ts",
-      "import": "./dist/packages/stepindicator/react.js"
-    },
     "./react/switch": {
       "types": "./dist/packages/switch/react.d.ts",
       "import": "./dist/packages/switch/react.js"
     },
-    "./react/tabs": {
-      "types": "./dist/packages/tabs/react.d.ts",
-      "import": "./dist/packages/tabs/react.js"
-    },
-    "./react/textarea": {
-      "types": "./dist/packages/textarea/react.d.ts",
-      "import": "./dist/packages/textarea/react.js"
-    },
     "./react/textfield": {
       "types": "./dist/packages/textfield/react.d.ts",
       "import": "./dist/packages/textfield/react.js"