@rcarls/rc-theme-win31 0.0.0 → 0.7.0

package/defaults.css

@@ -0,0 +1,169 @@
+@layer rc-base, rc-theme-win31.defaults, rc-theme-win31.bridge, rc-theme-win31.native, rc-theme-win31.components, rc-theme-win31.css-components,
+  rc-theme-win31.overrides;
+
+@layer rc-theme-win31.defaults {
+  /*
+   * Windows 3.1 reference tokens.
+   *
+   * Scoped so applications can place the theme at any app boundary. Import
+   * bridge.css alone when providing your own --win31-* tokens.
+   *
+   * Values are the stock "Windows Default" scheme. Windows 3.1 shipped around
+   * twenty further named Control Panel schemes. A color scheme overrides the
+   * --win31-color-* roles; image assets may need matching replacements.
+   */
+  .rc-theme-win31,
+  :host(.rc-theme-win31) {
+    /*
+     * Windows 3.1 had no dark mode. Declaring the scheme keeps browser-painted
+     * UI (form controls, scrollbars, the canvas behind a dialog) from fighting
+     * a palette that is light by construction.
+     */
+    color-scheme: light;
+
+    /*
+     * The scaling unit. Every metric below is authored as a multiple of it, so
+     * setting --win31-unit: 2px doubles the whole theme for a high-density
+     * display or a low-vision consumer without changing a single ratio. This is
+     * the bitmap-interface answer to responsive sizing.
+     */
+    --win31-unit: 1px;
+
+    /* Palette */
+    --win31-color-surface: #c0c0c0;
+    --win31-color-highlight: #ffffff;
+    --win31-color-shadow: #808080;
+    --win31-color-shadow-dark: #404040;
+    --win31-color-frame: #000000;
+    --win31-color-field: #ffffff;
+    --win31-color-field-text: #000000;
+    --win31-color-menu: #c0c0c0;
+    --win31-color-menu-text: #000000;
+    --win31-color-selection: #000080;
+    --win31-color-selection-text: #ffffff;
+    --win31-color-title-active: #000080;
+    --win31-color-title-active-text: #ffffff;
+    --win31-color-title-inactive: #808080;
+    --win31-color-title-inactive-text: #c0c0c0;
+    --win31-color-desktop: #008080;
+
+    /*
+     * Disabled is embossed rather than faded: Windows 3.1 had no alpha, so it
+     * drew gray text with a one-pixel highlight offset underneath it.
+     */
+    --win31-color-disabled-text: var(--win31-color-shadow);
+    --win31-color-disabled-emboss: var(--win31-color-highlight);
+
+    /* Typography */
+    --win31-font-family: 'Microsoft Sans Serif', 'MS Sans Serif', Tahoma, 'Segoe UI', sans-serif;
+    --win31-font-size: calc(13 * var(--win31-unit));
+    --win31-menu-font-size: calc(16 * var(--win31-unit));
+    --win31-title-font-size: calc(16 * var(--win31-unit));
+    --win31-line-height: 1.1;
+    --win31-font-weight: 400;
+
+    /*
+     * Metrics, derived from the MS Sans Serif 8pt cell of 6 by 13 pixels at
+     * 96 DPI. One horizontal dialog unit is 1.5px, one vertical unit 1.625px,
+     * which puts the standard 50 by 14 DLU push button at 75 by 23 pixels.
+     */
+    --win31-control-height: calc(23 * var(--win31-unit));
+    --win31-title-height: calc(24 * var(--win31-unit));
+    --win31-menu-height: calc(27 * var(--win31-unit));
+    --win31-toolbar-height: calc(31 * var(--win31-unit));
+    --win31-toolbar-button-size: calc(27 * var(--win31-unit));
+    --win31-listbox-row-height: calc(17 * var(--win31-unit));
+    --win31-scrollbar-size: calc(16 * var(--win31-unit));
+    --win31-check-size: calc(13 * var(--win31-unit));
+    --win31-hairline: var(--win31-unit);
+    --win31-gap: calc(4 * var(--win31-unit));
+    --win31-gap-tight: calc(2 * var(--win31-unit));
+    --win31-gap-panel: calc(6 * var(--win31-unit));
+    --win31-padding-block: var(--win31-unit);
+    --win31-padding-inline: calc(4 * var(--win31-unit));
+
+    /* Geometry. Nothing in Windows 3.1 was rounded, and nothing was blurred. */
+    --win31-radius: 0;
+    --win31-border: var(--win31-hairline) solid var(--win31-color-frame);
+
+    /*
+     * Focus is a dotted rectangle drawn inside the control, never a ring
+     * around it, and it coexists with selection rather than replacing it.
+     */
+    --win31-focus-ring: var(--win31-hairline) dotted var(--win31-color-frame);
+    --win31-focus-ring-offset: calc(-3 * var(--win31-unit));
+    --win31-focus-ring-selected: var(--win31-hairline) dotted var(--win31-color-highlight);
+
+    --win31-bevel-outset-1:
+      inset var(--win31-hairline) var(--win31-hairline) 0 var(--win31-color-highlight),
+      inset calc(-1 * var(--win31-hairline)) calc(-1 * var(--win31-hairline)) 0
+        var(--win31-color-shadow);
+    --win31-bevel-inset-1:
+      inset var(--win31-hairline) var(--win31-hairline) 0 var(--win31-color-shadow),
+      inset calc(-1 * var(--win31-hairline)) calc(-1 * var(--win31-hairline)) 0
+        var(--win31-color-highlight);
+    --win31-bevel-outset-2:
+      inset calc(2 * var(--win31-hairline)) calc(2 * var(--win31-hairline)) 0
+        var(--win31-color-highlight),
+      inset calc(-2 * var(--win31-hairline)) calc(-2 * var(--win31-hairline)) 0
+        var(--win31-color-shadow);
+    --win31-bevel-inset-2:
+      inset calc(2 * var(--win31-hairline)) calc(2 * var(--win31-hairline)) 0
+        var(--win31-color-shadow),
+      inset calc(-2 * var(--win31-hairline)) calc(-2 * var(--win31-hairline)) 0
+        var(--win31-color-highlight);
+
+    /*
+     * The four-value border-color shorthands are the other way to draw a bevel.
+     * They survive a background-image where an inset box-shadow would sit on
+     * top of it, so listboxes and fields use these and buttons use the shadows.
+     */
+    --win31-inset-border-color: var(--win31-color-shadow) var(--win31-color-highlight)
+      var(--win31-color-highlight) var(--win31-color-shadow);
+    --win31-outset-border-color: var(--win31-color-highlight) var(--win31-color-shadow)
+      var(--win31-color-shadow) var(--win31-color-highlight);
+
+    --win31-window-frame: 0 0 0 var(--win31-hairline) var(--win31-color-frame);
+    --win31-dialog-frame:
+      inset 0 0 0 calc(3 * var(--win31-hairline)) var(--win31-color-title-active),
+      inset 0 0 0 calc(4 * var(--win31-hairline)) var(--win31-color-highlight);
+
+    /* A menu casts a hard one-pixel shadow, never a blur. */
+    --win31-drop-shadow: var(--win31-hairline) var(--win31-hairline) 0 var(--win31-color-shadow);
+
+    /*
+     * One-bit dither, the period way to say "less" without an alpha channel.
+     * Used for scrollbar tracks and latched toggle faces.
+     */
+    --win31-dither-track: conic-gradient(
+      var(--win31-color-highlight) 0 25%,
+      var(--win31-color-surface) 0 50%,
+      var(--win31-color-highlight) 0 75%,
+      var(--win31-color-surface) 0
+    );
+    --win31-dither-size: calc(2 * var(--win31-unit));
+
+    /*
+     * The latched face, as a complete background shorthand. Components expose
+     * their selected background as a shorthand token, so handing them this
+     * paints the dither through their own contract instead of fighting a
+     * shorthand with a longhand override.
+     */
+    --win31-dither-surface: var(--win31-color-surface) var(--win31-dither-track) repeat 0 0 /
+      var(--win31-dither-size);
+
+    /*
+     * Glyphs are 1-bit bitmaps, not an icon font. Each is an SVG path drawn on
+     * the pixel grid with shape-rendering="crispEdges" so it stays sharp when
+     * --win31-unit scales it up.
+     */
+    --win31-glyph-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M8 5h1v1h1v1h1v1h1v1H4V8h1V7h1V6h1V5z'/%3E%3C/svg%3E");
+    --win31-glyph-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 6h8v1h-1v1h-1v1H9v1H8v1H7v-1H6V9H5V8H4z'/%3E%3C/svg%3E");
+    --win31-glyph-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 8h1V7h1V6h1V5h1V4h1v8H9v-1H8v-1H7V9H6V8z'/%3E%3C/svg%3E");
+    --win31-glyph-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 4h1v1h1v1h1v1h1v1h1v1h-1v1H9v1H8v1H7v1H6z'/%3E%3C/svg%3E");
+    --win31-glyph-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 4h1v1h1v1h1v1h1v1H3V7h1V6h1V5h1V4z'/%3E%3C/svg%3E");
+    --win31-glyph-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 3h1v1h1v1h1v1h1v1H7v1H6v1H5v1H4z'/%3E%3C/svg%3E");
+    --win31-glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M10 3h2v2h-1v1h-1v1H9v1H8v1H7v1H6v1H4v-1H3V9H2V8H1V7h2v1h1v1h1V8h1V7h1V6h1V5h1V4h1z'/%3E%3C/svg%3E");
+    --win31-glyph-submenu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 3h1v1h1v1h1v1h1v1H7v1H6v1H5v1H4z'/%3E%3C/svg%3E");
+  }
+}

package/native.css

@@ -0,0 +1,271 @@
+@layer rc-base, rc-theme-win31.defaults, rc-theme-win31.bridge, rc-theme-win31.native, rc-theme-win31.components, rc-theme-win31.css-components,
+  rc-theme-win31.overrides;
+
+/* Import defaults.css and bridge.css first when theme tokens are desired. */
+@layer rc-theme-win31.native {
+  /*
+   * Native styles stop at native controls that are part of an RC-owned
+   * presentation, and at subtrees the consumer opts out with
+   * data-rc-native="off". These are element-level ownership contracts rather
+   * than host boundaries, so ordinary controls remain themed in layout
+   * components such as rc-toolbar, rc-card, rc-dialog, and rc-popover.
+   */
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    :where(button, input, select, textarea, progress):not(
+      :where(
+        [data-rc-native='off'],
+        [data-rc-native='off'] *,
+        rc-button > :is(button, a[href]),
+        rc-chip > :is(button, a[href], label),
+        rc-chip > label > input:is([type='checkbox'], [type='radio']),
+        rc-combobox > select,
+        rc-fab > button,
+        rc-fab-menu > [slot='trigger'],
+        rc-field > :is(input, select, textarea),
+        rc-field > [data-rc-field-control] > :is(input, select, textarea),
+        rc-field > fieldset > :is(input, select, textarea),
+        rc-listbox > select,
+        rc-markdown-editor > textarea,
+        rc-navigation-rail > [slot='toggle'],
+        rc-menu-button > [slot='trigger'],
+        rc-progress > progress,
+        rc-range-slider > input[type='range'],
+        rc-search-bar > input[type='search'],
+        rc-segmented-button > fieldset input[type='radio'],
+        rc-select > select,
+        rc-slider > input[type='range'],
+        rc-switch > input[type='checkbox'],
+        rc-textarea > textarea,
+        rc-transfer-list > select
+      )
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    :where(button, input, select, textarea, progress):not(
+      :where(
+        [data-rc-native='off'],
+        [data-rc-native='off'] *,
+        rc-button > :is(button, a[href]),
+        rc-chip > :is(button, a[href], label),
+        rc-chip > label > input:is([type='checkbox'], [type='radio']),
+        rc-combobox > select,
+        rc-fab > button,
+        rc-fab-menu > [slot='trigger'],
+        rc-field > :is(input, select, textarea),
+        rc-field > [data-rc-field-control] > :is(input, select, textarea),
+        rc-field > fieldset > :is(input, select, textarea),
+        rc-listbox > select,
+        rc-markdown-editor > textarea,
+        rc-navigation-rail > [slot='toggle'],
+        rc-menu-button > [slot='trigger'],
+        rc-progress > progress,
+        rc-range-slider > input[type='range'],
+        rc-search-bar > input[type='search'],
+        rc-segmented-button > fieldset input[type='radio'],
+        rc-select > select,
+        rc-slider > input[type='range'],
+        rc-switch > input[type='checkbox'],
+        rc-textarea > textarea,
+        rc-transfer-list > select
+      )
+    ) {
+    &:where(button):not(:where(.rc-button, .rc-chip)) {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--rc-button-gap, var(--rc-control-gap, 0.5rem));
+      min-block-size: var(--rc-button-block-size, var(--rc-control-block-size, 2.5rem));
+      padding-block: var(--rc-button-padding-block, var(--rc-control-padding-block, 0.5rem));
+      padding-inline: var(--rc-button-padding-inline, var(--rc-control-padding-inline, 1rem));
+      border: var(--rc-button-border, var(--rc-border, 1px solid ButtonBorder));
+      border-radius: var(--rc-button-radius, var(--rc-control-radius, 999px));
+      background: var(--rc-button-bg, ButtonFace);
+      color: var(--rc-button-color, var(--rc-button-text, ButtonText));
+      font-family: var(--rc-font-family, sans-serif);
+      font-size: var(--rc-font-size, 1rem);
+      font-weight: var(--rc-font-weight, 400);
+      line-height: var(--rc-line-height, normal);
+      cursor: pointer;
+    }
+
+    &:where(
+      input:is(
+        [type='text'],
+        [type='search'],
+        [type='email'],
+        [type='url'],
+        [type='tel'],
+        [type='number'],
+        [type='password'],
+        :where(:not([type]))
+      ),
+      select,
+      textarea
+    ) {
+      box-sizing: border-box;
+      min-block-size: var(--rc-control-block-size, 2.5rem);
+      padding-block: var(--rc-control-padding-block, 0.5rem);
+      padding-inline: var(--rc-control-padding-inline, 1rem);
+      border: var(--rc-border, 1px solid ButtonBorder);
+      border-radius: var(--rc-control-radius, 0.5rem);
+      background: var(--rc-field, Field);
+      color: var(--rc-field-text, FieldText);
+      font-family: var(--rc-font-family, sans-serif);
+      font-size: var(--rc-font-size, 1rem);
+      font-weight: var(--rc-font-weight, 400);
+      line-height: var(--rc-line-height, normal);
+    }
+
+    &:where(select):not(:where(.rc-select)) {
+      cursor: pointer;
+    }
+
+    &:not(:where(.rc-button, .rc-chip, .rc-select, .rc-textarea)):focus-visible {
+      outline: var(--rc-focus-ring, 2px solid Highlight);
+      outline-offset: var(--rc-focus-ring-offset, 2px);
+    }
+
+    &:where(input[type='checkbox'], input[type='radio'], input[type='range']) {
+      min-block-size: auto;
+      padding: 0;
+      accent-color: var(--rc-accent, AccentColor);
+    }
+
+    &:where(input[type='range'], progress) {
+      inline-size: 100%;
+    }
+
+    &:where(progress) {
+      accent-color: var(--rc-accent, AccentColor);
+    }
+
+    &:not(:where(.rc-button, .rc-chip)):where(:disabled) {
+      color: var(--rc-text-disabled, GrayText);
+      cursor: not-allowed;
+    }
+
+    &:where(button):not(:where(.rc-button, .rc-chip)) {
+      background: var(--rc-button-bg, var(--win31-color-surface));
+      color: var(--rc-button-color, var(--win31-color-frame));
+      border: var(--rc-button-border, var(--win31-border));
+      border-radius: var(--win31-radius);
+      box-shadow: var(--win31-bevel-outset-1);
+      cursor: default;
+      transition: none;
+    }
+
+    &:where(button):not(:where(.rc-button, .rc-chip)):active:not(:disabled) {
+      box-shadow: var(--win31-bevel-inset-1);
+    }
+
+    &:where(button):not(:where(.rc-button, .rc-chip)):disabled {
+      color: var(--win31-color-disabled-text);
+      text-shadow: var(--win31-unit) var(--win31-unit) 0 var(--win31-color-disabled-emboss);
+      opacity: 1;
+    }
+  }
+}
+
+/* Reassert rc-base light-DOM row geometry after generic native presentation. */
+@layer rc-theme-win31.components {
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    :where(rc-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])):not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    :where(rc-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])):not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    display: flex;
+    gap: var(--rc-menu-item-gap, var(--rc-item-gap, 0.5em));
+    min-block-size: var(--rc-menu-item-min-block-size, 0px);
+    justify-content: normal;
+    padding: var(--rc-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+    border: none;
+    border-radius: var(--win31-radius);
+    box-shadow: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+    outline: none;
+  }
+
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):hover:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):hover:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    background: var(--rc-menu-hover-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-hover-color, inherit);
+  }
+
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-active]:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    rc-menu
+    :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio'])[data-active]:not(
+      :where([data-rc-native='off'], [data-rc-native='off'] *)
+    ) {
+    background: var(--rc-menu-active-bg, color-mix(in srgb, Highlight 8%, transparent));
+    color: var(--rc-menu-active-color, inherit);
+  }
+
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    rc-menu
+    :is(
+      button:disabled,
+      [role='menuitem'][aria-disabled='true'],
+      [role='menuitemcheckbox'][aria-disabled='true'],
+      [role='menuitemradio'][aria-disabled='true']
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    rc-menu
+    :is(
+      button:disabled,
+      [role='menuitem'][aria-disabled='true'],
+      [role='menuitemcheckbox'][aria-disabled='true'],
+      [role='menuitemradio'][aria-disabled='true']
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)) {
+    color: var(--rc-menu-disabled-color, var(--rc-text-disabled, GrayText));
+    opacity: var(--rc-menu-disabled-opacity, var(--rc-disabled-opacity, 0.55));
+    pointer-events: none;
+  }
+}
+
+@layer rc-theme-win31.overrides {
+  :where(.rc-theme-win31:not([data-rc-native='off']))
+    :where(
+      rc-adaptive-menu > [data-rc-action-overflowed] > :is(button, a[href]),
+      rc-adaptive-menu > :is(button, a[href])[data-rc-action-overflowed]
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)),
+  :host(:not([data-rc-native='off']).rc-theme-win31)
+    :where(
+      rc-adaptive-menu > [data-rc-action-overflowed] > :is(button, a[href]),
+      rc-adaptive-menu > :is(button, a[href])[data-rc-action-overflowed]
+    ):not(:where([data-rc-native='off'], [data-rc-native='off'] *)) {
+    display: flex;
+    gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    min-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    padding: var(--rc-adaptive-menu-item-padding-block, var(--rc-item-padding-block, 0.3em))
+      var(--rc-adaptive-menu-item-padding-inline, var(--rc-item-padding-inline, 0.75em));
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    justify-content: normal;
+    text-decoration: none;
+  }
+}

package/package.json

@@ -1,14 +1,58 @@
 {
   "name": "@rcarls/rc-theme-win31",
-  "version": "0.0.0",
-  "description": "Placeholder published only to register this package name on npm before configuring Trusted Publishing. Contains no code. Do not install or depend on this version.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.7.0",
+  "description": "Windows 3.1 era CSS theme and token bridge for rc-webcomponents.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/richardcarls/rc-webcomponents.git"
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-theme-win31"
   },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/guide/theme-previews",
   "license": "MIT",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./bridge.css",
+    "./bridge.css": "./bridge.css",
+    "./defaults.css": "./defaults.css",
+    "./components.css": "./components.css",
+    "./components/*.css": "./components/*.css",
+    "./css-components.css": "./css-components.css",
+    "./css-components/*.css": "./css-components/*.css",
+    "./native.css": "./native.css",
+    "./theme.css": "./theme.css",
+    "./DESIGN.md": "./DESIGN.md"
+  },
+  "files": [
+    "*.css",
+    "components",
+    "css-components",
+    "README.md",
+    "DESIGN.md"
+  ],
+  "scripts": {
+    "build": "echo 'CSS-only package, no build step'",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@rcarls/rc-button": "0.7.0",
+    "@rcarls/rc-dialog": "0.7.0",
+    "@rcarls/rc-disclosure": "0.7.0",
+    "@rcarls/rc-listbox": "0.7.0",
+    "@rcarls/rc-progress": "0.7.0",
+    "@rcarls/rc-segmented-button": "0.7.0",
+    "@rcarls/rc-toolbar": "0.7.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "vite": "^7.1.7",
+    "vitest": "^4.0.6"
   }
-}
+}

package/theme.css

@@ -0,0 +1,3 @@
+@import './defaults.css';
+@import './bridge.css';
+@import './components.css';