@adia-ai/web-components 0.0.11 → 0.0.13

package/styles/{styles.css → components.css}

@@ -1,5 +1,12 @@
 /**
- * Styles barrel — imports all component CSS + global reset.
+ * Components barrel — imports every component's CSS, in stamp order.
+ *
+ * This file is *only* the `packages/web-components/components/**`
+ * stylesheet set. Patterns (adia-chat, adia-editor, app-shell,
+ * app-nav, section-nav, gen-ui, etc.) are NOT imported here — each
+ * page links its own patterns explicitly. Global resets live in
+ * `resets.css` and must be linked separately.
+ *
  * All components use Light DOM — styles target tag names directly.
  */
 
@@ -41,6 +48,7 @@
 @import "../components/kbd/kbd.css";
 @import "../components/tag/tag.css";
 @import "../components/col/col.css";
+@import "../components/field/field.css";
 @import "../components/row/row.css";
 @import "../components/grid/grid.css";
 @import "../components/stack/stack.css";
@@ -81,113 +89,3 @@
 @import "../components/agent-suggestions/agent-suggestions.css";
 @import "../components/agent-questions/agent-questions.css";
 @import "../components/agent-artifact/agent-artifact.css";
-@import "../patterns/gen-ui/gen-ui.css";
-
-/* ── Reset ── */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  scrollbar-width: none;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-/* Kill default focus outline — components manage their own via --a-focus-ring */
-*:focus {
-  outline: none;
-}
-
-/* Prevent text selection on all interactive components */
-:is(button-ui, kbd-ui, tag-ui, input-ui, textarea-ui, select-ui, check-ui, radio-ui, switch-ui,
-    slider-ui, range-ui, segmented-ui, segment-ui) {
-  user-select: none;
-}
-
-html {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  hanging-punctuation: first last;
-  color-scheme: light dark;
-}
-
-body {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-
-  margin: 0;
-  font-family: var(--a-font-family);
-  font-size: var(--a-body-size);
-  font-style: normal;
-  font-variation-settings: 'slnt' 0, 'ital' 0;
-  line-height: 1.5;
-  color: var(--a-fg);
-  background: var(--a-bg);
-  min-block-size: 100dvb;
-}
-
-img,
-picture,
-svg,
-video,
-canvas {
-  display: block;
-  max-inline-size: 100%;
-  block-size: auto;
-}
-
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-  padding: 0;
-}
-
-/* ── Size-query provider utility ──────────────────────────────────
-   Opt any element into being a container-query size provider for
-   its descendants, without the nesting fragility of applying
-   container-type to every instance of a primitive. Use sparingly —
-   on panels, split-panes, cards that actually need responsive
-   children — and descendants query via bare `@container (width < Xrem)`
-   (matches nearest) or `@container container (...)` for clarity.
-
-   Why inline-size: block-direction height stays content-driven.
-   Why an attribute: explicit opt-in; avoids accidental containment
-   collapse when a primitive is composed inside another flex chain. */
-[provide-container-inline-size] {
-  container-type: inline-size;
-  container-name: container;
-}
-
-
-:focus-visible {
-  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
-  outline-offset: 2px;
-}
-
-::selection {
-  background: var(--a-selection-bg);
-  color: var(--a-selection-text);
-  border-radius: var(--a-selection-radius);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  text-wrap: balance;
-  line-height: 1.1;
-}
-
-p,
-li,
-figcaption {
-  text-wrap: pretty;
-}
-
-a:not([class]) {
-  text-underline-offset: 0.12em;
-}

package/styles/resets.css

@@ -0,0 +1,116 @@
+/**
+ * Global resets — box-sizing, scrollbar hiding, focus management,
+ * element defaults, and the size-query provider utility.
+ *
+ * Imported from styles.css (the barrel). Targets document-level
+ * defaults and universal selectors; component-scoped rules live in
+ * each component's own CSS under `@scope (component-n)`.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* Kill default focus outline — components manage their own via --a-focus-ring */
+*:focus {
+  outline: none;
+}
+
+/* Prevent text selection on all interactive components */
+:is(button-ui, kbd-ui, tag-ui, input-ui, textarea-ui, select-ui, check-ui, radio-ui, switch-ui,
+    slider-ui, range-ui, segmented-ui, segment-ui) {
+  user-select: none;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  hanging-punctuation: first last;
+  color-scheme: light dark;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+
+  margin: 0;
+  font-family: var(--a-font-family);
+  font-size: var(--a-body-size);
+  font-style: normal;
+  font-variation-settings: 'slnt' 0, 'ital' 0;
+  line-height: 1.5;
+  color: var(--a-fg);
+  background: var(--a-bg);
+  min-block-size: 100dvb;
+}
+
+img,
+picture,
+svg,
+video,
+canvas {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
+/* ── Size-query provider utility ──────────────────────────────────
+   Opt any element into being a container-query size provider for
+   its descendants, without the nesting fragility of applying
+   container-type to every instance of a primitive. Use sparingly —
+   on panels, split-panes, cards that actually need responsive
+   children — and descendants query via bare `@container (width < Xrem)`
+   (matches nearest) or `@container container (...)` for clarity.
+
+   Why inline-size: block-direction height stays content-driven.
+   Why an attribute: explicit opt-in; avoids accidental containment
+   collapse when a primitive is composed inside another flex chain. */
+[provide-container-inline-size] {
+  container-type: inline-size;
+  container-name: container;
+}
+
+
+:focus-visible {
+  outline: var(--ui-focus-width, 2px) solid var(--ui-focus, Highlight);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--a-selection-bg);
+  color: var(--a-selection-text);
+  border-radius: var(--a-selection-radius);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  line-height: 1.1;
+}
+
+p,
+li,
+figcaption {
+  text-wrap: pretty;
+}
+
+a:not([class]) {
+  text-underline-offset: 0.12em;
+}

package/styles/tokens.css

@@ -16,10 +16,16 @@
    · Monospace font is the default — data-confident, technical character
    ═══════════════════════════════════════════════════════════════ */
 
+/* Color ramps + semantic role aliases + typography scale are
+   primitive-layer — every component consumes `--a-fg`, `--a-bg-*`,
+   `--a-font-family`, `--a-body-size`, etc. Kept bundled. */
 @import "./colors/index.css";
 @import "./typography.css";
-@import "./prose.css";
-@import "./themes.css";
+
+/* NOT imported here:
+   - styles/prose.css   — opt-in per-page; [prose] attribute only
+   - styles/themes.css  — opt-in per-page; 8 named themes + schemes
+   Link separately from HTML when needed. */
 
 /* ═══════════════════════════════════════════════════════════════
    PARAMETRIC MULTIPLIERS — @property declarations