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

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/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.7",
+  "version": "2.4.0-next.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1689,7 +1689,6 @@
           "doc-url": "",
           "attributes": [
             { "name": "for", "value": { "type": "string", "default": "''" } },
-            { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "active",
               "value": { "type": "boolean", "default": "false" }
@@ -1697,20 +1696,14 @@
             {
               "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": []
           }
@@ -1736,20 +1729,12 @@
           "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": "''" }
-            }
+            { "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.8",
+  "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"

package/dist/packages/slider-thumb/styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import("lit").CSSResult;

package/dist/packages/slider-thumb/styles.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;

package/dist/packages/toast-container/styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import("lit").CSSResult;

package/dist/packages/toast-container/styles.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const styles = css `*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.block{display:block}.grid{display:grid}.auto-rows-auto{grid-auto-rows:auto}.bottom-16{bottom:1.6rem}.left-0{left:0}.right-0{right:0}.justify-center{justify-content:center}.justify-items-center{justify-items:center}.fixed{position:fixed}.static{position:static}.z-50{z-index:50}.w-full{width:100%}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.pointer-events-none{pointer-events:none}.translate-z-0{--w-translate-z:0rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform{transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}@media (min-width:480px){.sm\\:mx-16{margin-left:1.6rem;margin-right:1.6rem}}`;