@warp-ds/elements 2.4.0-next.7 → 2.4.0-next.9

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

@@ -1,13 +1,14 @@
+import '@warp-ds/components/icon';
 import React from 'react';
-import { Tabs, Tab, TabPanel } from './react';
+import { Tab, TabPanel, Tabs } from './react';
 export default {
     title: 'Components/Tabs',
     component: Tabs,
 };
 export const Default = () => (React.createElement(Tabs, { active: "tab1" },
-    React.createElement(Tab, { for: "tab1", label: "First Tab" }),
-    React.createElement(Tab, { for: "tab2", label: "Second Tab" }),
-    React.createElement(Tab, { for: "tab3", label: "Third Tab" }),
+    React.createElement(Tab, { for: "tab1" }, "First Tab"),
+    React.createElement(Tab, { for: "tab2" }, "Second Tab"),
+    React.createElement(Tab, { for: "tab3" }, "Third Tab"),
     React.createElement(TabPanel, { id: "tab1" },
         React.createElement("p", null, "Content for the first tab. This panel is visible when the first tab is active.")),
     React.createElement(TabPanel, { id: "tab2", hidden: true },
@@ -15,27 +16,47 @@ export const Default = () => (React.createElement(Tabs, { active: "tab1" },
     React.createElement(TabPanel, { id: "tab3", hidden: true },
         React.createElement("p", null, "Content for the third tab. This panel is visible when the third tab is active."))));
 export const WithIcons = () => (React.createElement(React.Fragment, null,
-    React.createElement(Tabs, { active: "home" },
-        React.createElement(Tab, { for: "home", label: "Home" },
-            React.createElement("span", { slot: "icon" }, "\uD83C\uDFE0")),
-        React.createElement(Tab, { for: "search", label: "Search" },
-            React.createElement("span", { slot: "icon" }, "\uD83D\uDD0D")),
-        React.createElement(Tab, { for: "profile", label: "Profile" },
-            React.createElement("span", { slot: "icon" }, "\uD83D\uDC64"))),
-    React.createElement(TabPanel, { id: "home" },
-        React.createElement("p", null, "Welcome to the home page!")),
-    React.createElement(TabPanel, { id: "search", hidden: true },
-        React.createElement("p", null, "Search functionality goes here.")),
-    React.createElement(TabPanel, { id: "profile", hidden: true },
-        React.createElement("p", null, "User profile information."))));
+    React.createElement(Tabs, { active: "info" },
+        React.createElement(Tab, { for: "info" },
+            React.createElement("w-icon", { name: "info-16", slot: "icon" }),
+            "Info"),
+        React.createElement(Tab, { for: "done" },
+            React.createElement("w-icon", { name: "success-16", slot: "icon" }),
+            "Done"),
+        React.createElement(Tab, { for: "error" },
+            React.createElement("w-icon", { name: "error-16", slot: "icon" }),
+            "Failures")),
+    React.createElement(TabPanel, { id: "info" },
+        React.createElement("p", null, "Info content.")),
+    React.createElement(TabPanel, { id: "done", hidden: true },
+        React.createElement("p", null, "Done content.")),
+    React.createElement(TabPanel, { id: "error", hidden: true },
+        React.createElement("p", null, "Error content."))));
+export const WithIconsOver = () => (React.createElement(React.Fragment, null,
+    React.createElement(Tabs, { active: "info" },
+        React.createElement(Tab, { for: "info", over: true },
+            React.createElement("w-icon", { name: "info-16", slot: "icon" }),
+            "Info"),
+        React.createElement(Tab, { for: "done", over: true },
+            React.createElement("w-icon", { name: "success-16", slot: "icon" }),
+            "Done"),
+        React.createElement(Tab, { for: "error", over: true },
+            React.createElement("w-icon", { name: "error-16", slot: "icon" }),
+            "Failures")),
+    React.createElement(TabPanel, { id: "info" },
+        React.createElement("p", null, "Info content.")),
+    React.createElement(TabPanel, { id: "done", hidden: true },
+        React.createElement("p", null, "Done content.")),
+    React.createElement(TabPanel, { id: "error", hidden: true },
+        React.createElement("p", null, "Error content."))));
 export const ManyTabs = () => (React.createElement(React.Fragment, null,
-    React.createElement(Tabs, { active: "tab1", id: 'tabs-many' },
-        React.createElement(Tab, { for: "tab1", label: "Tab 1" }),
-        React.createElement(Tab, { for: "tab2", label: "Tab 2" }),
-        React.createElement(Tab, { for: "tab3", label: "Tab 3" }),
-        React.createElement(Tab, { for: "tab4", label: "Tab 4" }),
-        React.createElement(Tab, { for: "tab5", label: "Tab 5" }),
-        React.createElement(Tab, { for: "tab6", label: "Tab 6" })),
+    React.createElement(Tabs, { active: "tab1", id: "tabs-many" },
+        React.createElement(Tab, { for: "tab1" }, "Tab 1"),
+        React.createElement(Tab, { for: "tab2" }, "Tab 2"),
+        React.createElement(Tab, { for: "tab3" }, "Tab 3"),
+        React.createElement(Tab, { for: "tab4" }, "Tab 4"),
+        React.createElement(Tab, { for: "tab5" }, "Tab 5"),
+        React.createElement(Tab, { for: "tab6" }, "Tab 6")),
     React.createElement(TabPanel, { id: "tab1" },
         React.createElement("p", null, "Content for tab 1")),
     React.createElement(TabPanel, { id: "tab2", hidden: true },

package/dist/packages/tabs/tabs.stories.d.ts

@@ -1,13 +1,12 @@
-import '@warp-ds/icons/elements/info-16';
-import '@warp-ds/icons/elements/success-16';
-import '@warp-ds/icons/elements/error-16';
-import './tabs.js';
-import '../tab/tab.js';
+import '@warp-ds/components/icon';
 import '../tab-panel/tab-panel.js';
+import '../tab/tab.js';
+import './tabs.js';
 declare const meta: {
     title: string;
 };
 export default meta;
 export declare const Default: () => import("lit").TemplateResult<1>;
 export declare const WithIcons: () => import("lit").TemplateResult<1>;
+export declare const WithIconsOver: () => import("lit").TemplateResult<1>;
 export declare const ManyTabs: () => import("lit").TemplateResult<1>;

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

@@ -1,59 +1,81 @@
+import '@warp-ds/components/icon';
 import { html } from 'lit';
-import '@warp-ds/icons/elements/info-16';
-import '@warp-ds/icons/elements/success-16';
-import '@warp-ds/icons/elements/error-16';
-import './tabs.js';
-import '../tab/tab.js';
 import '../tab-panel/tab-panel.js';
+import '../tab/tab.js';
+import './tabs.js';
 const meta = {
     title: 'Components/Tabs',
 };
 export default meta;
 export const Default = () => html `
   <w-tabs active="tab1">
-  
-    <w-tab for="tab1" label="First Tab"></w-tab>
+
+    <w-tab for="tab1">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 for="tab2">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 for="tab3" label="Third Tab"></w-tab>
+    <w-tab for="tab3">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-tabs>
-  
+
 `;
 export const WithIcons = () => html `
   <w-tabs active="info">
-    <w-tab for="info" label="Info">
-      <span slot="icon">
-        <w-icon-info-16></w-icon-info-16>
-      </span>
+    <w-tab for="info">
+      <w-icon name="Info" slot="icon"></w-icon>
+      Info
+    </w-tab>
+    <w-tab-panel id="info">
+      <p>Info content.</p>
+    </w-tab-panel>
+
+    <w-tab for="done">
+      <w-icon name="Success" slot="icon"></w-icon>
+      Done
+    </w-tab>
+    <w-tab-panel id="done" hidden>
+      <p>Done content.</p>
+    </w-tab-panel>
+
+    <w-tab for="error">
+      <w-icon name="Error" slot="icon"></w-icon>
+      Failures
+    </w-tab>
+    <w-tab-panel id="error" hidden>
+      <p>Error content.</p>
+    </w-tab-panel>
+  </w-tabs>
+`;
+export const WithIconsOver = () => html `
+  <w-tabs active="info">
+    <w-tab for="info" over>
+      <w-icon name="Info" slot="icon"></w-icon>
+      Info
     </w-tab>
     <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>
-      </span>
+    <w-tab for="done" over>
+      <w-icon name="Success" slot="icon"></w-icon>
+      Done
     </w-tab>
     <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>
-      </span>
+    <w-tab for="error" over>
+      <w-icon name="Error" slot="icon"></w-icon>
+      Failures
     </w-tab>
     <w-tab-panel id="error" hidden>
       <p>Error content.</p>
@@ -62,32 +84,32 @@ export const WithIcons = () => html `
 `;
 export const ManyTabs = () => html `
   <w-tabs active="tab1">
-    <w-tab for="tab1" label="Tab 1"></w-tab>
+    <w-tab for="tab1">Tab 1</w-tab>
     <w-tab-panel id="tab1">
       <p>Content for tab 1</p>
     </w-tab-panel>
 
-    <w-tab for="tab2" label="Tab 2"></w-tab>
+    <w-tab for="tab2">Tab 2</w-tab>
     <w-tab-panel id="tab2" hidden>
       <p>Content for tab 2</p>
     </w-tab-panel>
 
-    <w-tab for="tab3" label="Tab 3"></w-tab>
+    <w-tab for="tab3">Tab 3</w-tab>
     <w-tab-panel id="tab3" hidden>
       <p>Content for tab 3</p>
     </w-tab-panel>
 
-    <w-tab for="tab4" label="Tab 4"></w-tab>
+    <w-tab for="tab4">Tab 4</w-tab>
     <w-tab-panel id="tab4" hidden>
       <p>Content for tab 4</p>
     </w-tab-panel>
 
-    <w-tab for="tab5" label="Tab 5"></w-tab>
+    <w-tab for="tab5">Tab 5</w-tab>
     <w-tab-panel id="tab5" hidden>
       <p>Content for tab 5</p>
     </w-tab-panel>
 
-    <w-tab for="tab6" label="Tab 6"></w-tab>
+    <w-tab for="tab6">Tab 6</w-tab>
     <w-tab-panel id="tab6" hidden>
       <p>Content for tab 6</p>
     </w-tab-panel>

package/dist/packages/textarea/react.js

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
 import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {

package/dist/packages/textarea/textarea.react.stories.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { StoryObj } from '@storybook/react';
+import React from 'react';
 import { Textarea } from './react';
 declare const _default: {
     title: string;

package/dist/packages/textfield/react.js

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
 import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { StoryObj } from '@storybook/react';
+import React from 'react';
 import { TextField } from './react';
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
 import './toast.js';
 import '../toast-container/toast-container.js';
+export { WarpToastContainer } from '../toast-container/toast-container.js';
 export { removeToast, toast, updateToast } from './api.js';
 export { WarpToast } from './toast.js';
-export { WarpToastContainer } from '../toast-container/toast-container.js';

package/dist/packages/toast/index.js

@@ -1,7 +1,7 @@
 // Side-effect imports to register custom elements
 import './toast.js';
 import '../toast-container/toast-container.js';
+export { WarpToastContainer } from '../toast-container/toast-container.js';
 // Re-exports for backward compatibility
 export { removeToast, toast, updateToast } from './api.js';
 export { WarpToast } from './toast.js';
-export { WarpToastContainer } from '../toast-container/toast-container.js';

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.6",
+  "version": "2.4.0-next.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1683,29 +1683,12 @@
             "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": "hidden",
-              "value": { "type": "boolean", "default": "true" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "hidden", "type": "boolean" }],
-            "events": []
-          }
-        },
         {
           "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": "for", "value": { "type": "string", "default": "''" } },
-            { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "active",
               "value": { "type": "boolean", "default": "false" }
@@ -1713,43 +1696,45 @@
             {
               "name": "over",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "tab-class",
-              "value": { "type": "string", "default": "''" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               { "name": "for", "type": "string" },
-              { "name": "label", "type": "string" },
               { "name": "active", "type": "boolean" },
-              { "name": "over", "type": "boolean" },
-              { "name": "tabClass", "type": "string" }
+              { "name": "over", "type": "boolean" }
             ],
             "events": []
           }
         },
         {
-          "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**",
+          "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": "active",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "tab-class",
-              "value": { "type": "string", "default": "''" }
+              "name": "hidden",
+              "value": { "type": "boolean", "default": "true" }
             }
           ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "hidden", "type": "boolean" }],
+            "events": []
+          }
+        },
+        {
+          "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": "''" } }
+          ],
           "events": [{ "name": "change", "type": "CustomEvent" }],
           "js": {
             "properties": [
               { "name": "active", "type": "string" },
-              { "name": "tabClass", "type": "string" },
               { "name": "tabs" },
               { "name": "activeTab" }
             ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.4.0-next.7",
+  "version": "2.4.0-next.9",
   "packageManager": "pnpm@10.20.0",
   "description": "Custom elements for Warp",
   "exports": {
@@ -339,8 +339,15 @@
     "@itsy/animate": "0.0.9",
     "@lingui/cli": "5.2.0",
     "@lingui/conf": "5.2.0",
+    "@lingui/core": "5.2.0",
+    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
     "@oddbird/css-anchor-positioning": "^0.7.0",
+    "@open-wc/form-control": "^1.0.0",
     "@open-wc/lit-helpers": "^0.7.0",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "^9.1.4",
@@ -359,6 +366,9 @@
     "@vitejs/plugin-react": "^5.0.2",
     "@vitest/browser": "^3.2.4",
     "@vitest/utils": "^3.2.4",
+    "@warp-ds/core": "1.1.8",
+    "@warp-ds/css": "2.1.1",
+    "@warp-ds/icons": "2.5.0",
     "@warp-ds/uno": "2.1.0",
     "@wc-toolkit/cem-validator": "^1.0.3",
     "@wc-toolkit/jsx-types": "^1.4.2",
@@ -366,6 +376,7 @@
     "@wc-toolkit/type-parser": "^1.2.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "cz-conventional-changelog": "3.3.0",
+    "date-fns": "^4.1.0",
     "element-collapse": "1.1.0",
     "esbuild": "0.25.10",
     "express": "4.19.2",
@@ -380,32 +391,22 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "6.0.1",
+    "rollup": "^4.52.3",
+    "scroll-doctor": "2.0.2",
     "semantic-release": "24.0.0",
     "storybook": "^9.1.4",
+    "tslib": "^2.8.1",
     "typescript": "5.5.3",
     "unocss": "0.x",
     "vite": "^6.0.0",
     "vitest": "^3.2.4",
     "vitest-browser-lit": "^0.1.0",
-    "vitest-browser-react": "^1.0.1",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
-    "@rollup/plugin-terser": "^0.4.4",
-    "tslib": "^2.8.1",
-    "rollup": "^4.52.3",
-    "@lit-labs/rollup-plugin-minify-html-literals": "^0.1.0",
-    "@lingui/core": "5.2.0",
-    "@warp-ds/core": "1.1.8",
-    "@warp-ds/css": "2.1.1",
-    "@warp-ds/icons": "2.5.0",
-    "date-fns": "^4.1.0",
-    "scroll-doctor": "2.0.2",
-    "@open-wc/form-control": "^1.0.0"
+    "vitest-browser-react": "^1.0.1"
   },
   "dependencies": {
-    "lit": "3.x",
-    "@lit/react": "^1.0.8"
+    "@lit/react": "^1.0.8",
+    "@warp-ds/components": "1.0.0-beta.2",
+    "lit": "3.x"
   },
   "publishConfig": {
     "access": "public"