@0001-labs/design-system-1 0.3.0-alpha.27 → 0.3.0-alpha.28

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.27 */
+/* version 0.3.0-alpha.28 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.27 */
+/* version 0.3.0-alpha.28 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/library-tokens.ts

@@ -1,6 +1,5 @@
 // How a published design library reaches Design system 1's components. A library is a stylesheet
-// its owner edits in the libraries app, written in the classless sheet's `--one-*` tokens
-// (one.semantic.css) and its native selectors. DS1's components draw from `--ds-*` tokens
+// its owner edits in the libraries app, including older `--one-*` tokens and native selectors. DS1's components draw from `--ds-*` tokens
 // (component-tokens.css, component-metrics.css) and, in some faces, one.css's own names
 // (`--accent-color`). Publishing prepares the library
 // (packages/css-validate/src/library.ts): after each `--one-*` token below that the library

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.27 */
+/* version 0.3.0-alpha.28 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/palette.ts

@@ -1,5 +1,5 @@
 // Design system 1's palette: one list, named by colour. The Colours page (website/src/pages/colours.astro)
-// draws it and the CLASSless stylesheet (one.semantic.css) carries it as tokens, written by
+// draws it and the shared stylesheet (palette.css) carries it as tokens, written by
 // scripts/write-palette-css.ts. Change a colour here, then run that script.
 //
 // Every palette colour has a pastel (its hue and saturation at 90% lightness) and a dark-mode version
@@ -77,7 +77,7 @@ export function palette(): PaletteColour[] {
 export const paletteStart = '  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */';
 export const paletteEnd = '  /* Palette: end */';
 
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export function paletteCss(): string {
   const lines = [paletteStart];
   for (const c of palette()) {
@@ -91,7 +91,7 @@ export function paletteCss(): string {
 }
 
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export function paletteSheet(): string {

package/README.md

@@ -2,7 +2,7 @@
 
 A design system for building interfaces on a 20px grid. Typography, colour, spacing and components share the same rules.
 
-Use CSS to style ordinary HTML, or Lit web components for interactive controls. Change the design through CSS custom properties.
+Use Lit Web Components directly in HTML, or through the React adapters. Change the design through CSS custom properties.
 
 [Explore the system](https://designsystem1.com/) · [Try the workbench](https://designsystem1.com/app/) · [npm](https://www.npmjs.com/package/@0001-labs/design-system-1)
 
@@ -25,12 +25,16 @@ Then use the components in your HTML:
 <ds-button>Save</ds-button>
 ```
 
-For ordinary HTML without component JavaScript, import only the classless stylesheet:
+For a plain HTML page, load the stylesheet and component module:
 
-```js
-import "@0001-labs/design-system-1/DS1/1-root/one.semantic.css";
+```html
+<link rel="stylesheet" href="https://designsystem1.com/resources/design-system-1.css">
+<script type="module" src="https://designsystem1.com/resources/design-system-1.js"></script>
+<ds-button>Save</ds-button>
 ```
 
+The module includes Lit. No package install or build step is needed for this setup.
+
 The package is in alpha. APIs can change between releases.
 
 ## Four layers

package/dist/1-root/library-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"library-tokens.d.ts","sourceRoot":"","sources":["../../DS1/1-root/library-tokens.ts"],"names":[],"mappings":"AAYA,gGAAgG;AAChG,eAAO,MAAM,cAAc,8lEAyCoD,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,wHAAwH;AACxH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wBAAwB,yGAA4G,CAAC;AAElJ;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,GAAI,WAA+B,MAAM,WAA0D,CAAC;AAE7H,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE/D"}
+{"version":3,"file":"library-tokens.d.ts","sourceRoot":"","sources":["../../DS1/1-root/library-tokens.ts"],"names":[],"mappings":"AAWA,gGAAgG;AAChG,eAAO,MAAM,cAAc,8lEAyCoD,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,wHAAwH;AACxH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wBAAwB,yGAA4G,CAAC;AAElJ;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,GAAI,WAA+B,MAAM,WAA0D,CAAC;AAE7H,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE/D"}

package/dist/1-root/library-tokens.js

@@ -1,6 +1,5 @@
 // How a published design library reaches Design system 1's components. A library is a stylesheet
-// its owner edits in the libraries app, written in the classless sheet's `--one-*` tokens
-// (one.semantic.css) and its native selectors. DS1's components draw from `--ds-*` tokens
+// its owner edits in the libraries app, including older `--one-*` tokens and native selectors. DS1's components draw from `--ds-*` tokens
 // (component-tokens.css, component-metrics.css) and, in some faces, one.css's own names
 // (`--accent-color`). Publishing prepares the library
 // (packages/css-validate/src/library.ts): after each `--one-*` token below that the library

package/dist/1-root/palette.d.ts

@@ -25,10 +25,10 @@ export interface PaletteColour {
 export declare function palette(): PaletteColour[];
 export declare const paletteStart = "  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */";
 export declare const paletteEnd = "  /* Palette: end */";
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export declare function paletteCss(): string;
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export declare function paletteSheet(): string;

package/dist/1-root/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,wGAAwG;AACxG,wBAAgB,UAAU,IAAI,MAAM,CAUnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAarC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,qGAAqG;AACrG,wBAAgB,UAAU,IAAI,MAAM,CAUnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAarC"}

package/dist/1-root/palette.js

@@ -1,5 +1,5 @@
 // Design system 1's palette: one list, named by colour. The Colours page (website/src/pages/colours.astro)
-// draws it and the CLASSless stylesheet (one.semantic.css) carries it as tokens, written by
+// draws it and the shared stylesheet (palette.css) carries it as tokens, written by
 // scripts/write-palette-css.ts. Change a colour here, then run that script.
 //
 // Every palette colour has a pastel (its hue and saturation at 90% lightness) and a dark-mode version
@@ -67,7 +67,7 @@ export function palette() {
 }
 export const paletteStart = '  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */';
 export const paletteEnd = '  /* Palette: end */';
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export function paletteCss() {
     const lines = [paletteStart];
     for (const c of palette()) {
@@ -82,7 +82,7 @@ export function paletteCss() {
     return lines.join('\n');
 }
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export function paletteSheet() {

package/dist/design-system-1.bundle.js

@@ -1,4 +1,4 @@
-//#region node_modules/.pnpm/signal-polyfill@0.2.2/node_modules/signal-polyfill/dist/index.js
+//#region ../../../Design system 1/node_modules/.pnpm/signal-polyfill@0.2.2/node_modules/signal-polyfill/dist/index.js
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
 	enumerable: true,
@@ -494,7 +494,7 @@ new FinalizationRegistry((({ watcher: t, signal: i }) => {
 	t.unwatch(i);
 }));
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -528,7 +528,7 @@ var i$7 = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -847,7 +847,7 @@ var D = (t, i, s) => {
 	o._$AR(), o._$AA.remove();
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/async-directive.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/async-directive.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -3841,7 +3841,7 @@ function connectSidebar(tree) {
 	};
 }
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
 /**
 * @license
 * Copyright 2019 Google LLC
@@ -3890,7 +3890,7 @@ var c$2 = e$2 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
 	return r$3(e);
 })(t) : t;
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/reactive-element.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/reactive-element.js
 var _Symbol;
 /**
 * @license
@@ -4121,7 +4121,7 @@ var y = class extends HTMLElement {
 };
 y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.2");
 //#endregion
-//#region node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -4162,7 +4162,7 @@ function define(name, element) {
 	if (!customElements.get(name)) customElements.define(name, element);
 }
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -4760,7 +4760,7 @@ _Tag = Tag;
 _Tag.styles = r$3(ds_tag_default);
 define("ds-tag", Tag);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js
 /**
 * @license
 * Copyright 2018 Google LLC
@@ -5454,7 +5454,7 @@ var ds_menu_default = "/* Shape is a surface preference. Keep these base lengths
 //#region DS1/3-unit/styles/ds-select.css?inline
 var ds_select_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n/*\n * Select as a field, around a native <select> (`data-field`): the menu\n * engine's own rules (an action menu's) do not reach it. One square high and\n * eight wide by default; a list one square a visible row.\n */\n:host([data-field]) {\n  --ds-select-unit: calc(var(--ds-1) * var(--ds-sf));\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n  width: calc(8 * var(--ds-select-unit));\n  max-width: 100%;\n  min-width: 0;\n  max-height: none;\n  height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit));\n}\n:host([hidden]) { display: none !important; }\n::slotted(select) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  max-width: none !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 var(--ds-select-unit) 0 calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: var(--ds-radius) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-input-color) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  line-height: calc(var(--ds-select-unit) - 2px) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n.arrow {\n  position: absolute;\n  pointer-events: none;\n  inset-inline-end: calc(2px * var(--ds-sf));\n  top: 50%;\n  transform: translateY(-50%);\n  width: calc(.8 * var(--ds-select-unit));\n  height: calc(.8 * var(--ds-select-unit));\n  background: var(--ds-input-color);\n  mask: var(--ds-select-arrow) center / contain no-repeat;\n}\n::slotted(select:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(select:disabled) { cursor: default !important; opacity: .5 !important; }\n.arrow.disabled { opacity: .5; }\n.arrow[hidden] { display: none; }\n::slotted(select[multiple]),\n::slotted(select[size]:not([size=\"0\"]):not([size=\"1\"])) {\n  padding: 0 calc(4px * var(--ds-sf)) !important;\n}\n\n/* Intrinsic width uses the native option sizing, including translated labels. */\n:host([fit]:not([data-listbox])) { width: max-content; }\n:host([fit]:not([data-listbox])) ::slotted(select) { width: auto !important; max-width: 100% !important; }\n\n/* A settings chip keeps the same native picker, on the shared control height. */\n:host([chip]:not([data-listbox])) { height: var(--ds-control-height); }\n:host([chip]:not([data-listbox])) ::slotted(select) {\n  border: 0 !important;\n  background: var(--ds-button-background-color-secondary) !important;\n  color: var(--ds-button-text-color) !important;\n  line-height: var(--ds-control-height) !important;\n}\n:host([chip][primary]:not([data-listbox])) ::slotted(select) {\n  background: var(--ds-button-background-color-primary) !important;\n  color: var(--ds-button-text-color-on-accent) !important;\n}\n:host([chip]) .arrow { background: var(--ds-button-text-color); }\n:host([chip][primary]) .arrow { background: var(--ds-button-text-color-on-accent); }\n\n/* A colour choice uses the shared swatch; the native select remains the hit target. */\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) {\n  width: var(--ds-select-unit);\n  height: var(--ds-select-unit);\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) ::slotted(select) {\n  width: 100% !important;\n  opacity: 0 !important;\n  position: relative !important;\n  z-index: 1;\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox]):focus-within) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\nds-swatch { pointer-events: none; position: absolute; inset: 0; margin: auto; }\nds-swatch.disabled { opacity: .5; }\n\n/*\n * The field's list, in place of the platform's picker (`data-listed`). The\n * select takes no pointer, so a press on the field opens the list and no\n * platform picker; the keyboard still reaches the select, and its opening keys\n * open the list. The list is the menu engine's, as wide as its choices in whole\n * squares and at least the field (`--ds-select-list-width` sets one), each choice one\n * square on the sixteen: an icon on the first square, the name, muted details,\n * a shortcut at the end and the check on the last square for the chosen one.\n */\n:host([data-listed]) { cursor: pointer; }\n:host([data-listed]) ::slotted(select) { pointer-events: none !important; }\n/* The list fits its choices on whole squares, at least as wide as the field. */\n.list { --ds-menu-width: var(--ds-select-list-width); }\n.choice,\n.group-label {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  flex: 0 0 auto;\n  width: 100%;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  background: none;\n  color: var(--ds-text-color);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  white-space: nowrap;\n}\n.choice { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }\n.choice:hover:not(:disabled), .choice:focus-visible { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.choice:active:not(:disabled) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.choice:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus-ring); }\n.choice:disabled { cursor: default; opacity: .5; }\n.group { display: flex; flex-direction: column; }\n.group-label { color: var(--ds-text-color-muted); }\n/* A name is one line, fading over its last square where it is cut short. */\n.name { flex: 0 1 auto; min-width: 0; overflow: hidden; }\n.details { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ds-text-color-muted); }\n.shortcut { flex: none; margin-inline-start: auto; color: var(--ds-text-color-muted); }\n.mark { flex: none; width: calc(16px * var(--ds-sf)); height: calc(16px * var(--ds-sf)); }\n.check {\n  flex: none;\n  width: calc(16px * var(--ds-sf));\n  height: calc(16px * var(--ds-sf));\n  margin-inline-start: auto;\n  background: currentColor;\n  mask: var(--ds-select-check) center / contain no-repeat;\n  visibility: hidden;\n}\n.shortcut + .check { margin-inline-start: 0; }\n.choice[aria-selected=\"true\"] .check { visibility: visible; }\n.choice[aria-selected=\"true\"] .name { font-weight: var(--ds-row-current-weight, var(--ds-type-weight-bold)); }\n";
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
 /**
 * @license
 * Copyright 2018 Google LLC
@@ -7377,7 +7377,7 @@ _Gap.properties = { size: {
 _Gap.styles = r$3(ds_gap_default);
 define("ds-gap", Gap);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.js
 /**
 * @license
 * Copyright 2020 Google LLC
@@ -8203,7 +8203,7 @@ _Composer.properties = {
 _Composer.styles = r$3(ds_composer_default);
 define("ds-composer", Composer);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -10169,7 +10169,7 @@ _Accordion.properties = {
 _Accordion.styles = r$3(ds_accordion_default);
 define("ds-accordion", Accordion);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
 /**
 * @license
 * Copyright 2021 Google LLC
@@ -16269,7 +16269,7 @@ _Sidebar.properties = {
 _Sidebar.styles = r$3(ds_sidebar_default);
 define("ds-sidebar", Sidebar);
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -16312,7 +16312,7 @@ function n(t) {
 	})(t, e, o);
 }
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
 /**
 * @license
 * Copyright 2017 Google LLC