@noodleseed/one 0.32.1 → 0.34.0

package/react/styles.source.css

@@ -1,7 +1,24 @@
-/* Tailwind/shadcn substrate: public app code uses semantic Noodle primitives, not utility classes. */
+/* Host-neutral semantic layer: public app code uses Noodle primitives, not utility classes. */
 @layer noodle-react-reset, noodle-react-components;
 
 @layer noodle-react-reset {
+  :root {
+    --surface-primary: var(--color-background-primary, var(--background, #ffffff));
+    --surface-secondary: var(--color-background-secondary, #f5f5f5);
+    --text-primary: var(--color-text-primary, var(--foreground, #171717));
+    --text-secondary: var(--color-text-secondary, #5f6368);
+    --border-subtle: var(
+      --color-border-secondary,
+      color-mix(in srgb, currentColor 13%, transparent)
+    );
+    --accent: var(--color-ring-primary, #2454d6);
+    --accent-foreground: var(--color-text-inverse, #ffffff);
+    --danger: var(--color-text-danger, #b4232c);
+    --success: var(--color-text-success, #126b30);
+    --warning: var(--color-text-warning, #8a5200);
+    --info: var(--color-text-info, #2454d6);
+  }
+
   :where(.nsr-shell, .nsr-frame, .nsr-fullscreen-shell, .nsr-inline-card) {
     box-sizing: border-box;
     color: var(--text-primary, var(--foreground, #171717));
@@ -73,6 +90,10 @@
     border: 0;
     border-radius: 0;
     box-shadow: none;
+    padding-top: max(14px, var(--nsr-safe-area-top, 0px));
+    padding-right: max(14px, var(--nsr-safe-area-right, 0px));
+    padding-bottom: max(14px, var(--nsr-safe-area-bottom, 0px));
+    padding-left: max(14px, var(--nsr-safe-area-left, 0px));
   }
 
   .nsr-frame-header,
@@ -221,10 +242,10 @@
   }
 
   .nsr-collection-item-selected,
-  .nsr-collection-item[aria-selected="true"] {
+  .nsr-collection-item[data-selected="true"] {
     border-color: var(--accent, #2454d6);
+    border-inline-start-width: 3px;
     background: color-mix(in srgb, var(--accent, #2454d6) 9%, var(--surface-primary, #ffffff));
-    box-shadow: inset 3px 0 0 var(--accent, #2454d6);
   }
 
   .nsr-collection-copy {
@@ -262,6 +283,7 @@
     border-radius: 8px;
     background: var(--surface-secondary, #f5f5f5);
     padding: 10px;
+    margin: 0;
   }
 
   .nsr-fact-label {
@@ -271,6 +293,8 @@
   }
 
   .nsr-fact-value {
+    display: grid;
+    gap: 3px;
     margin: 0;
     overflow-wrap: anywhere;
     color: var(--text-primary, #171717);
@@ -389,6 +413,7 @@
   }
 
   .nsr-action:disabled,
+  .nsr-action[aria-disabled="true"],
   .nsr-action[aria-busy="true"] {
     cursor: not-allowed;
     opacity: 0.62;
@@ -422,10 +447,10 @@
   }
 
   .nsr-view-nav-segmented {
-    width: max-content;
-    max-width: 100%;
+    width: 100%;
     gap: 0;
-    overflow: hidden;
+    overflow-x: auto;
+    flex-wrap: nowrap;
     border: 1px solid var(--border-subtle, color-mix(in srgb, currentColor 12%, transparent));
     border-radius: 8px;
     background: var(--surface-secondary, #f5f5f5);
@@ -454,6 +479,7 @@
   }
 
   .nsr-overlay {
+    position: relative;
     display: grid;
     gap: 12px;
     min-width: 0;
@@ -468,6 +494,51 @@
     border-radius: 8px 8px 0 0;
   }
 
+  .nsr-overlay-backdrop {
+    position: fixed;
+    z-index: 90;
+    inset: 0;
+    background: color-mix(in srgb, #000000 42%, transparent);
+  }
+
+  .nsr-overlay-modal,
+  .nsr-overlay-sheet {
+    position: fixed;
+    z-index: 100;
+    max-height: calc(100dvh - 32px);
+    overflow: auto;
+  }
+
+  .nsr-overlay-modal {
+    inset-block-start: 50%;
+    left: 50%;
+    width: min(440px, calc(100vw - 32px));
+    transform: translate(-50%, -50%);
+  }
+
+  .nsr-overlay-sheet {
+    inset-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
+    inset-block-end: max(0px, env(safe-area-inset-bottom));
+    max-height: min(80dvh, 720px);
+  }
+
+  .nsr-overlay-close {
+    position: absolute;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+    display: inline-grid;
+    width: 32px;
+    height: 32px;
+    place-items: center;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary, #5f6368);
+    font: inherit;
+    font-size: 1.25rem;
+    cursor: pointer;
+  }
+
   .nsr-overlay-header {
     display: flex;
     align-items: flex-start;
@@ -725,6 +796,10 @@
   .nsr-field {
     display: grid;
     gap: 5px;
+    min-width: 0;
+    margin: 0;
+    border: 0;
+    padding: 0;
   }
 
   .nsr-field-label {
@@ -741,7 +816,24 @@
     font-size: 0.8125rem;
   }
 
-  .nsr-field :where(input, select, textarea) {
+  .nsr-field
+    :where(
+      input:not([type]),
+      input[type="text"],
+      input[type="email"],
+      input[type="password"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="url"],
+      input[type="number"],
+      input[type="date"],
+      input[type="datetime-local"],
+      input[type="month"],
+      input[type="time"],
+      input[type="week"],
+      select,
+      textarea
+    ) {
     min-height: 34px;
     width: 100%;
     min-width: 0;
@@ -753,10 +845,6 @@
     padding: 7px 10px;
   }
 
-  .nsr-field[aria-invalid="true"] :where(input, select, textarea) {
-    border-color: color-mix(in srgb, var(--danger, #b4232c) 48%, transparent);
-  }
-
   .nsr-stepper {
     display: inline-grid;
     grid-template-columns: 32px minmax(32px, auto) 32px;
@@ -802,16 +890,478 @@
     color: var(--danger, #b4232c);
   }
 
+  /* Form-control atoms (Input / Textarea / Select). Native elements, host-adaptive tokens. */
+  .nsr-input,
+  .nsr-textarea,
+  .nsr-select {
+    box-sizing: border-box;
+    min-height: 34px;
+    width: 100%;
+    min-width: 0;
+    border: 1px solid var(--border-subtle, color-mix(in srgb, currentColor 14%, transparent));
+    border-radius: 8px;
+    background: var(--surface-primary, var(--background, #ffffff));
+    color: var(--text-primary, #171717);
+    font: inherit;
+    font-size: 0.875rem;
+    padding: 7px 10px;
+  }
+
+  .nsr-textarea {
+    min-height: 64px;
+    resize: vertical;
+  }
+
+  .nsr-select {
+    appearance: none;
+    padding-inline-end: 28px;
+    /* Chevron drawn with gradients so the control needs no external asset (CSP-safe). */
+    background-image:
+      linear-gradient(45deg, transparent 50%, currentColor 50%),
+      linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position:
+      calc(100% - 15px) calc(50% + 1px),
+      calc(100% - 10px) calc(50% + 1px);
+    background-size:
+      5px 5px,
+      5px 5px;
+    background-repeat: no-repeat;
+    color: var(--text-secondary, #5f6368);
+  }
+
+  .nsr-select:not([aria-invalid="true"]) {
+    color: var(--text-primary, #171717);
+  }
+
+  [dir="rtl"] .nsr-select {
+    padding-inline-start: 28px;
+    padding-inline-end: 10px;
+    background-position:
+      15px calc(50% + 1px),
+      10px calc(50% + 1px);
+  }
+
+  .nsr-input:focus-visible,
+  .nsr-textarea:focus-visible,
+  .nsr-select:focus-visible {
+    outline: 2px solid var(--accent, #2454d6);
+    outline-offset: 1px;
+    border-color: var(--accent, #2454d6);
+  }
+
+  .nsr-input[aria-invalid="true"],
+  .nsr-textarea[aria-invalid="true"],
+  .nsr-select[aria-invalid="true"] {
+    border-color: color-mix(in srgb, var(--danger, #b4232c) 55%, transparent);
+  }
+
+  .nsr-input:disabled,
+  .nsr-textarea:disabled,
+  .nsr-select:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* Checkbox + Radio — native inputs tinted with the host accent. */
+  .nsr-check,
+  .nsr-radio,
+  .nsr-switch-field {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+    color: var(--text-primary, #171717);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .nsr-checkbox,
+  .nsr-radio input {
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    flex: 0 0 auto;
+    accent-color: var(--accent, #2454d6);
+    cursor: pointer;
+  }
+
+  .nsr-radio-group {
+    display: grid;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .nsr-radio-group-row {
+    grid-auto-flow: column;
+    justify-content: start;
+    gap: 16px;
+  }
+
+  /* Switch — native checkbox semantics presented as a pill toggle. */
+  .nsr-switch {
+    appearance: none;
+    position: relative;
+    flex: 0 0 auto;
+    width: 38px;
+    height: 22px;
+    border: 0;
+    border-radius: 999px;
+    background: var(--border-subtle, color-mix(in srgb, currentColor 22%, transparent));
+    padding: 0;
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  .nsr-switch:checked {
+    background: var(--accent, #2454d6);
+  }
+
+  .nsr-switch::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 2px;
+    inset-inline-start: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 1px 2px color-mix(in srgb, #000000 20%, transparent);
+    transition: transform 0.15s ease;
+  }
+
+  .nsr-switch:checked::after {
+    transform: translateX(16px);
+  }
+
+  [dir="rtl"] .nsr-switch:checked::after {
+    transform: translateX(-16px);
+  }
+
+  .nsr-switch:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .nsr-switch:focus-visible {
+    outline: 2px solid var(--accent, #2454d6);
+    outline-offset: 2px;
+  }
+
+  /* Slider — native range tinted with the host accent. */
+  .nsr-slider {
+    width: 100%;
+    min-width: 0;
+    accent-color: var(--accent, #2454d6);
+    cursor: pointer;
+  }
+
+  .nsr-slider:focus-visible {
+    outline: 2px solid var(--accent, #2454d6);
+    outline-offset: 4px;
+  }
+
+  /* Spinner — indeterminate loading indicator. */
+  .nsr-spinner {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: 2px solid var(--border-subtle, color-mix(in srgb, currentColor 20%, transparent));
+    border-top-color: var(--accent, #2454d6);
+    animation: nsr-spin 0.7s linear infinite;
+    vertical-align: middle;
+  }
+
+  @keyframes nsr-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Portals stay inside the widget document and inherit host-provided document-level tokens. */
+  .nsr-portal-content {
+    box-sizing: border-box;
+    color: var(--text-primary, #171717);
+    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
+  }
+
+  .nsr-portal-content :where(button, input, select, textarea) {
+    font: inherit;
+  }
+
+  /* Tooltip — Radix owns focus, dismissal, and collision behavior. */
+
+  .nsr-tooltip-bubble {
+    z-index: 120;
+    width: max-content;
+    max-width: 220px;
+    border-radius: 6px;
+    background: var(--text-primary, #171717);
+    color: var(--surface-primary, #ffffff);
+    font-size: 0.75rem;
+    line-height: 1.35;
+    padding: 5px 8px;
+    pointer-events: auto;
+    box-shadow: 0 4px 12px color-mix(in srgb, #000000 22%, transparent);
+  }
+
+  .nsr-tooltip-arrow {
+    fill: var(--text-primary, #171717);
+  }
+
+  /* Popover/menu triggers render real buttons; Radix owns anchored positioning. */
+  .nsr-popover-trigger,
+  .nsr-menu-trigger {
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .nsr-popover-panel {
+    z-index: 130;
+    min-width: 180px;
+    max-width: min(320px, 90vw);
+    max-height: var(
+      --radix-dropdown-menu-content-available-height,
+      var(--radix-popover-content-available-height, calc(100dvh - 16px))
+    );
+    overflow: auto;
+    border: 1px solid var(--border-subtle, color-mix(in srgb, currentColor 14%, transparent));
+    border-radius: 8px;
+    background: var(--surface-primary, var(--background, #ffffff));
+    color: var(--text-primary, #171717);
+    box-shadow: 0 12px 32px color-mix(in srgb, #000000 18%, transparent);
+    padding: 8px;
+  }
+
+  /* Menu — dedicated menu semantics, roving focus, typeahead, and restoration. */
+  .nsr-menu-sep {
+    height: 1px;
+    margin: 5px 2px;
+    background: var(--border-subtle, color-mix(in srgb, currentColor 12%, transparent));
+  }
+
+  .nsr-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-size: 0.875rem;
+    padding: 7px 9px;
+    cursor: pointer;
+    text-align: start;
+  }
+
+  .nsr-menu-item[data-highlighted] {
+    background: var(--surface-secondary, #f5f5f5);
+    outline: none;
+  }
+
+  .nsr-menu-item[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nsr-menu-item-danger {
+    color: var(--danger, #b4232c);
+  }
+
+  /* Avatar — image or initials fallback; AvatarGroup overlaps them with a cut-out ring. */
+  .nsr-avatar {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 50%;
+    background: var(--surface-secondary, #ececec);
+    color: var(--text-secondary, #555555);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    object-fit: cover;
+    user-select: none;
+  }
+
+  .nsr-avatar-fallback {
+    text-transform: uppercase;
+  }
+
+  .nsr-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .nsr-avatar-group > .nsr-avatar {
+    margin-inline-start: -8px;
+    border: 2px solid var(--surface-primary, var(--background, #ffffff));
+  }
+
+  .nsr-avatar-group > .nsr-avatar:first-child {
+    margin-inline-start: 0;
+  }
+
+  /* SegmentedControl — a pill value picker (single-select). */
+  .nsr-segmented {
+    display: inline-flex;
+    align-items: stretch;
+    width: 100%;
+    gap: 2px;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 2px;
+    border: 1px solid var(--border-subtle, color-mix(in srgb, currentColor 12%, transparent));
+    border-radius: 8px;
+    background: var(--surface-secondary, #efefef);
+  }
+
+  .nsr-segmented-option {
+    position: relative;
+    display: inline-flex;
+    min-width: 0;
+    cursor: pointer;
+  }
+
+  .nsr-segmented-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .nsr-segmented-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    border: 0;
+    border-radius: 6px;
+    background: none;
+    color: var(--text-secondary, #555555);
+    font: inherit;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 5px 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease;
+  }
+
+  .nsr-segmented-option:hover .nsr-segmented-label {
+    color: var(--text-primary, #171717);
+  }
+
+  .nsr-segmented-input:checked + .nsr-segmented-label {
+    background: var(--surface-primary, var(--background, #ffffff));
+    color: var(--text-primary, #171717);
+    box-shadow: 0 1px 2px color-mix(in srgb, #000000 12%, transparent);
+  }
+
+  .nsr-segmented-input:disabled + .nsr-segmented-label {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nsr-segmented-input:focus-visible + .nsr-segmented-label {
+    outline: 2px solid var(--accent, #2454d6);
+    outline-offset: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nsr-switch,
+    .nsr-switch::after,
+    .nsr-segmented-label {
+      transition: none;
+    }
+
+    .nsr-spinner {
+      animation: none;
+    }
+  }
+
+  :root[data-theme="dark"],
+  :root.dark {
+    --background: #171717;
+    --surface-primary: var(--color-background-primary, #212121);
+    --surface-secondary: var(--color-background-secondary, #2f2f2f);
+    --text-primary: var(--color-text-primary, #f4f4f4);
+    --text-secondary: var(--color-text-secondary, #b4b4b4);
+    --border-subtle: var(--color-border-secondary, #3a3a3a);
+    --accent: var(--color-ring-primary, #8aa4ff);
+    --accent-foreground: var(--color-text-inverse, #111827);
+    --danger: var(--color-text-danger, #ff7b72);
+    --success: var(--color-text-success, #75e0a7);
+    --warning: var(--color-text-warning, #fec84b);
+    --info: var(--color-text-info, #8aa4ff);
+    color-scheme: dark;
+  }
+
+  @media (pointer: coarse) {
+    .nsr-action,
+    .nsr-menu-item,
+    .nsr-popover-trigger,
+    .nsr-menu-trigger,
+    .nsr-overlay-close,
+    .nsr-segmented-label {
+      min-height: 40px;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .nsr-action,
+    .nsr-input,
+    .nsr-textarea,
+    .nsr-select,
+    .nsr-popover-panel,
+    .nsr-overlay,
+    .nsr-segmented-label {
+      border-color: CanvasText;
+      forced-color-adjust: auto;
+    }
+
+    .nsr-action:focus-visible,
+    .nsr-input:focus-visible,
+    .nsr-textarea:focus-visible,
+    .nsr-select:focus-visible,
+    .nsr-switch:focus-visible,
+    .nsr-segmented-input:focus-visible + .nsr-segmented-label {
+      outline: 2px solid Highlight;
+    }
+
+    .nsr-switch:checked,
+    .nsr-segmented-input:checked + .nsr-segmented-label {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
   .dark :where(.nsr-shell, .nsr-frame, .nsr-fullscreen-shell, .nsr-inline-card),
   :where(.nsr-shell, .nsr-frame, .nsr-fullscreen-shell, .nsr-inline-card).dark {
     --background: #171717;
-    --surface-primary: #212121;
-    --surface-secondary: #2f2f2f;
-    --text-primary: #f4f4f4;
-    --text-secondary: #b4b4b4;
-    --border-subtle: #3a3a3a;
-    --accent: #8aa4ff;
-    --accent-foreground: #111827;
+    --surface-primary: var(--color-background-primary, #212121);
+    --surface-secondary: var(--color-background-secondary, #2f2f2f);
+    --text-primary: var(--color-text-primary, #f4f4f4);
+    --text-secondary: var(--color-text-secondary, #b4b4b4);
+    --border-subtle: var(--color-border-secondary, #3a3a3a);
+    --accent: var(--color-ring-primary, #8aa4ff);
+    --accent-foreground: var(--color-text-inverse, #111827);
+    --danger: var(--color-text-danger, #ff7b72);
+    --success: var(--color-text-success, #75e0a7);
+    --warning: var(--color-text-warning, #fec84b);
+    --info: var(--color-text-info, #8aa4ff);
   }
 
   @media (max-width: 520px) {