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

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;
@@ -347,28 +347,36 @@
       border-color: var(--usewc-theme-color-button-border-static-auxiliary);
     }
 
-    &.extra-small {
+    &.extra-small::part(trigger),
+    &.extra-small:not([type="file"], use-dropdown),
+    &.extra-small::file-selector-button {
       padding-block: var(--usewc-layout-button-extra-small-padding-block);
       padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
       font-size: var(--usewc-layout-button-extra-small-font-size);
       line-height: var(--usewc-layout-button-extra-small-line-height);
     }
 
-    &.small {
+    &.small::part(trigger),
+    &.small:not([type="file"], use-dropdown),
+    &.small::file-selector-button {
       padding-block: var(--usewc-layout-button-small-padding-block);
       padding-inline: var(--usewc-layout-button-small-padding-inline);
       font-size: var(--usewc-layout-button-small-font-size);
       line-height: var(--usewc-layout-button-small-line-height);
     }
 
-    &.large {
+    &.large::part(trigger),
+    &.large:not([type="file"], use-dropdown),
+    &.large::file-selector-button {
       padding-block: var(--usewc-layout-button-large-padding-block);
       padding-inline: var(--usewc-layout-button-large-padding-inline);
       font-size: var(--usewc-layout-button-large-font-size);
       line-height: var(--usewc-layout-button-large-line-height);
     }
 
-    &.extra-large {
+    &.extra-large::part(trigger),
+    &.extra-large:not([type="file"], use-dropdown),
+    &.extra-large::file-selector-button {
       padding-block: var(--usewc-layout-button-extra-large-padding-block);
       padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
       font-size: var(--usewc-layout-button-extra-large-font-size);
@@ -376,12 +384,45 @@
     }
   }
 
-  input[type="file"]:not([data-appear-as]) {
+  /* Sizing-only: use-select-input's trigger looks like a button but is not a
+     member of the button group above (no color/base styling), so the size
+     classes are wired through to its trigger separately. */
+  use-select-input {
+    &.extra-small::part(trigger) {
+      padding-block: var(--usewc-layout-button-extra-small-padding-block);
+      padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
+      font-size: var(--usewc-layout-button-extra-small-font-size);
+      line-height: var(--usewc-layout-button-extra-small-line-height);
+    }
+
+    &.small::part(trigger) {
+      padding-block: var(--usewc-layout-button-small-padding-block);
+      padding-inline: var(--usewc-layout-button-small-padding-inline);
+      font-size: var(--usewc-layout-button-small-font-size);
+      line-height: var(--usewc-layout-button-small-line-height);
+    }
+
+    &.large::part(trigger) {
+      padding-block: var(--usewc-layout-button-large-padding-block);
+      padding-inline: var(--usewc-layout-button-large-padding-inline);
+      font-size: var(--usewc-layout-button-large-font-size);
+      line-height: var(--usewc-layout-button-large-line-height);
+    }
+
+    &.extra-large::part(trigger) {
+      padding-block: var(--usewc-layout-button-extra-large-padding-block);
+      padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
+      font-size: var(--usewc-layout-button-extra-large-font-size);
+      line-height: var(--usewc-layout-button-extra-large-line-height);
+    }
+  }
+
+  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 +494,7 @@
     }
   }
 
-  details:not([data-appear-as="native"]) {
+  details:not(.appearance-native) {
     summary {
       all: unset;
 
@@ -485,7 +526,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 +573,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 +612,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 +651,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,12 +668,16 @@
     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;
   }
 
+  use-dropdown {
+    anchor-scope: --use-popover-trigger;
+  }
+
   use-dropdown::part(trigger-icon-default),
   use-option::part(selected-indicator-default) {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.40",
+  "version": "1.0.0-pre.42",
   "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",