use-wc 1.0.0-pre.40 → 1.0.0-pre.41

package/custom-elements.json

@@ -396,6 +396,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-calendarday/use-calendarday.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
+          "name": "UseCalendarday",
+          "slots": [
+            {
+              "description": "slot for custom day content (replaces the day number)",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "date"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-calendarday",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseCalendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-calendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-input/use-date-input.ts",
@@ -522,71 +587,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-calendarday/use-calendarday.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
-          "name": "UseCalendarday",
-          "slots": [
-            {
-              "description": "slot for custom day content (replaces the day number)",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "date"
-            },
-            {
-              "kind": "field",
-              "name": "day",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "date"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-calendarday",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseCalendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-calendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
@@ -1233,6 +1233,95 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-dropdown/use-dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)",
+          "name": "UseDropdown",
+          "slots": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "trigger-content"
+            },
+            {
+              "name": "trigger-label"
+            },
+            {
+              "name": "trigger-arrow"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLButtonElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getId"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-dropdown",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseDropdown",
+          "declaration": {
+            "name": "UseDropdown",
+            "module": "src/elements/use-dropdown/use-dropdown.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-dropdown",
+          "declaration": {
+            "name": "UseDropdown",
+            "module": "src/elements/use-dropdown/use-dropdown.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-datetime-input/use-datetime-input.ts",
@@ -1448,95 +1537,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-dropdown/use-dropdown.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)",
-          "name": "UseDropdown",
-          "slots": [
-            {
-              "name": "default"
-            },
-            {
-              "name": "trigger-content"
-            },
-            {
-              "name": "trigger-label"
-            },
-            {
-              "name": "trigger-arrow"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "HTMLButtonElement | null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "attribute": "disabled"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "label"
-            },
-            {
-              "kind": "method",
-              "name": "getId"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "label"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-dropdown",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseDropdown",
-          "declaration": {
-            "name": "UseDropdown",
-            "module": "src/elements/use-dropdown/use-dropdown.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-dropdown",
-          "declaration": {
-            "name": "UseDropdown",
-            "module": "src/elements/use-dropdown/use-dropdown.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-duration-input/use-duration-input.ts",

package/dist/design-system.css

@@ -14,29 +14,29 @@
     font-size: var(--usewc-font-document-size);
   }
 
-  :is(button, a, details summary, use-widget):not([data-appear-as="native"]):focus-visible,
+  :is(button, a, details summary, use-widget):not(.appearance-native):focus-visible,
   :is(input, textarea, select, use-date-input, use-time-input, use-datetime-input, use-duration-input):not(
-      [data-appear-as="native"]
+      .appearance-native
     ):focus,
-  input[type="file"]:not([data-appear-as="native"]):focus-visible,
-  use-dropdown:not([data-appear-as="native"])::part(trigger):focus-visible,
-  [data-appear-as="input"]:has(input:focus) {
+  input[type="file"]:not(.appearance-native):focus-visible,
+  use-dropdown:not(.appearance-native)::part(trigger):focus-visible,
+  .appearance-input:has(input:focus) {
     outline: var(--usewc-effect-outline-size) var(--usewc-effect-outline-style) var(--usewc-color-outline);
     outline-offset: var(--usewc-effect-outline-offset);
     transition: var(--usewc-effect-outline-transition);
   }
 
   :is(
-    input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [data-appear-as])),
+    input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [class*="appearance-"])),
     select,
     textarea,
-    [data-appear-as="input"],
+    .appearance-input,
     use-date-input,
     use-time-input,
     use-datetime-input,
     use-duration-input
-  ):not([data-appear-as="native"]),
-  use-listbox-input:not([data-appear-as="native"])::part(listbox) {
+  ):not(.appearance-native),
+  use-listbox-input:not(.appearance-native)::part(listbox) {
     border: var(--usewc-layout-input-border) var(--usewc-effect-input-border-style)
       var(--usewc-color-input-border-static);
     line-height: var(--usewc-layout-input-line-height);
@@ -49,7 +49,7 @@
     color: var(--usewc-color-input-text-static);
     border-radius: var(--usewc-effect-input-border-radius);
 
-    &:not(:is(:disabled, [aria-disabled="true"], [data-appear-as="input"])):hover,
+    &:not(:is(:disabled, [aria-disabled="true"], .appearance-input)):hover,
     &:has(input:not(:is(:disabled, [aria-disabled="true"])):hover) {
       border-color: var(--usewc-color-input-border-hover);
     }
@@ -75,15 +75,15 @@
     }
   }
 
-  use-listbox-input:not([data-appear-as="native"])::part(listbox) {
+  use-listbox-input:not(.appearance-native)::part(listbox) {
     padding: var(--usewc-layout-popover-menu-padding);
   }
 
-  select:not([data-appear-as="native"]) {
+  select:not(.appearance-native) {
     appearance: none;
   }
 
-  [data-appear-as="input"] {
+  .appearance-input {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -190,11 +190,11 @@
    * - https://codepen.io/ShadowShahriar/pen/zYPPYrQ
    * - https://open-ui.org/components/enhanced-range-input.explainer/
    */
-  input[type="range"]:not([data-appear-as="native"]) {
+  input[type="range"]:not(.appearance-native) {
     accent-color: var(--usewc-color-range-thumb-background-static);
   }
 
-  :is(a:not([data-appear-as]), [data-appear-as="a"]) {
+  :is(a:not([class*="appearance-"]), .appearance-a) {
     &:where(:not(a)) {
       all: unset;
     }
@@ -212,9 +212,9 @@
     }
   }
 
-  :is(button:not([data-appear-as]), [data-appear-as="button"]),
+  :is(button:not([class*="appearance-"]), .appearance-button),
   use-dropdown,
-  input[type="file"]:not([data-appear-as]) {
+  input[type="file"]:not([class*="appearance-"]) {
     &:where(:not(button)),
     &::file-selector-button {
       all: unset;
@@ -376,12 +376,12 @@
     }
   }
 
-  input[type="file"]:not([data-appear-as]) {
+  input[type="file"]:not([class*="appearance-"]) {
     border-radius: var(--usewc-effect-input-border-radius);
   }
 
   code,
-  [data-appear-as="code"] {
+  .appearance-code {
     display: inline-block;
     font-family: var(--usewc-font-code-family);
     font-size: var(--usewc-font-code-size);
@@ -453,7 +453,7 @@
     }
   }
 
-  details:not([data-appear-as="native"]) {
+  details:not(.appearance-native) {
     summary {
       all: unset;
 
@@ -485,7 +485,7 @@
      input styling block. The date and time sub-inputs live in shadow DOM and are reached via
      ::part(date) and ::part(time) to override their internal layout. Segment inputs are
      re-exported via exportparts so ::part(segment-input) reaches them too. */
-  use-datetime-input:not([data-appear-as="native"]) {
+  use-datetime-input:not(.appearance-native) {
     display: inline-flex;
     align-items: center;
     width: fit-content;
@@ -532,7 +532,7 @@
   }
 
   /* Segment based controls */
-  :is(use-date-input, use-time-input):not([data-appear-as="native"]) {
+  :is(use-date-input, use-time-input):not(.appearance-native) {
     display: inline-flex;
     align-items: center;
     width: fit-content;
@@ -571,7 +571,7 @@
     }
   }
 
-  use-duration-input:not([data-appear-as="native"]) {
+  use-duration-input:not(.appearance-native) {
     display: inline-flex;
     align-items: center;
     width: fit-content;
@@ -610,7 +610,7 @@
     }
   }
 
-  select:not([data-appear-as="native"]),
+  select:not(.appearance-native),
   use-dropdown::part(trigger),
   use-dropdown use-dropdown::part(trigger) {
     padding-inline-end: calc(var(--usewc-layout-input-padding-inline) * 2 + var(--usewc-layout-selector-width));
@@ -627,7 +627,7 @@
     background-position: right center;
   }
 
-  select:not([data-appear-as="native"]),
+  select:not(.appearance-native),
   use-dropdown::part(trigger),
   use-dropdown use-dropdown::part(trigger) {
     anchor-name: --use-popover-trigger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.40",
+  "version": "1.0.0-pre.41",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",
@@ -20,6 +20,8 @@
   "types": "./dist/use-wc.d.ts",
   "exports": {
     ".": "./dist/use-wc.mjs",
+    "./tokens.css": "./dist/tokens.css",
+    "./design-system.css": "./dist/design-system.css",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -45,7 +47,6 @@
     "@storybook/addon-docs": "^10.2.7",
     "@storybook/addon-links": "^10.2.7",
     "@storybook/web-components-vite": "^10.2.7",
-    "@tsdown/css": "0.21.4",
     "@types/node": "^25.5.0",
     "@typescript/native-preview": "7.0.0-dev.20260316.1",
     "@vitest/coverage-v8": "^4.0.18",
@@ -59,7 +60,6 @@
     "semantic-release": "^25.0.3",
     "storybook": "^10.2.7",
     "storybook-addon-tag-badges": "^1.4.0",
-    "tsdown": "0.21.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.29.1",
     "vite-plus": "^0.1.11",

package/vscode.html-custom-data.json

@@ -2,6 +2,12 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "name": "use-calendarday",
+      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
+      "attributes": [{ "name": "date", "values": [] }],
+      "references": []
+    },
     {
       "name": "use-date-input",
       "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
@@ -13,12 +19,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-calendarday",
-      "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
-      "attributes": [{ "name": "date", "values": [] }],
-      "references": []
-    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
@@ -52,6 +52,15 @@
       ],
       "references": []
     },
+    {
+      "name": "use-dropdown",
+      "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n---\n\n\n### **Slots:**\n - **default** - undefined\n- **trigger-content** - undefined\n- **trigger-label** - undefined\n- **trigger-arrow** - undefined",
+      "attributes": [
+        { "name": "disabled", "values": [] },
+        { "name": "label", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "use-datetime-input",
       "description": "Displays a date and time picker by combining `use-date` and `use-time`.\n\nThe value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.\n---\n",
@@ -72,15 +81,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-dropdown",
-      "description": "When the popover is opened the tabbable elements are found and indexed for\nkeyboard navigation. The first tabbable element is focused when the popover is opened. The\nfollowing selector is used to find tabbable elements:\n\n```css\n:is(\n  [role=\"menuitem\"],\n  [role=\"menuitemcheckbox\"],\n  [role=\"menuitemradio\"],\n  use-menu\n):not(:is(\n  [disabled],\n  [hidden],\n  [inert],\n  [aria-hidden=\"true\"]\n))\n```\n\nMenu items are not used for navigation, they are intended for related action\nitems that allows a user to manipulate a user interface or content. Read the\nWCAG guidance for more details:\n[https://www.w3.org/WAI/ARIA/apg/patterns/menubar/](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)\n---\n\n\n### **Slots:**\n - **default** - undefined\n- **trigger-content** - undefined\n- **trigger-label** - undefined\n- **trigger-arrow** - undefined",
-      "attributes": [
-        { "name": "disabled", "values": [] },
-        { "name": "label", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "use-duration-input",
       "description": "Displays the parts of an ISO 8601 duration string using [`Intl.DurationFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat).\n\nUses the [`duration-fns`](https://www.npmjs.com/package/duration-fns) library for parsing ISO 8601 values.\n\n<baseline-status featureId=\"intl-duration-format\"></baseline-status>\n---\n",