nitro_kit 2.0.0.alpha.2 → 2.0.0.alpha.3

data/src/stylesheets/nitro_kit/components/typeset.css

@@ -1,4 +1,126 @@
 @layer nitro-kit.base {
+  /*
+   * Reduced fallback for engines without @scope. Every selector is anchored
+   * explicitly at the Typeset root; only direct, non-Nitro/non-opted-out
+   * content is supported, so nested boundaries cannot inherit these rules.
+   */
+  :where([data-nk="typeset"]) {
+    font-family: var(--nk-typeset-font-body);
+    font-size: var(--nk-typeset-size);
+    line-height: var(--nk-typeset-leading);
+    color: var(--nk-color-foreground);
+    overflow-wrap: break-word;
+  }
+
+  :where([data-nk="typeset"])
+    > :where(p, ul, ol, dl, blockquote, pre, figure, table, details, hr):not(
+      [data-nk],
+      [data-typeset="off"]
+    ) {
+    margin-block: var(--nk-typeset-flow) 0;
+  }
+
+  :where([data-nk="typeset"])
+    > :where(h1, h2, h3, h4, h5, h6):not([data-nk], [data-typeset="off"]) {
+    margin-block: calc(var(--nk-typeset-flow) * 1.4) 0;
+    font-family: var(--nk-typeset-font-heading);
+    font-weight: var(--nk-font-weight-bold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="typeset"]) > h1:not([data-nk], [data-typeset="off"]) {
+    font-size: 2em;
+  }
+  :where([data-nk="typeset"]) > h2:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.5em;
+  }
+  :where([data-nk="typeset"]) > h3:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.25em;
+  }
+  :where([data-nk="typeset"]) > h4:not([data-nk], [data-typeset="off"]) {
+    font-size: 1.125em;
+  }
+  :where([data-nk="typeset"])
+    > :where(h5, h6):not([data-nk], [data-typeset="off"]) {
+    font-size: 1em;
+  }
+  :where([data-nk="typeset"]) > :where(a:not([data-nk], [data-typeset="off"])),
+  :where([data-nk="typeset"])
+    > :where(
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      ul,
+      ol,
+      dl,
+      blockquote,
+      figure,
+      details
+    ):not([data-nk], [data-typeset="off"])
+    :where(a) {
+    color: inherit;
+    font-weight: var(--nk-font-weight-medium);
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.15em;
+  }
+
+  :where([data-nk="typeset"])
+    > :where(ul, ol):not([data-nk], [data-typeset="off"]) {
+    padding-inline-start: 1.5em;
+  }
+  :where([data-nk="typeset"]) > ul:not([data-nk], [data-typeset="off"]) {
+    list-style-type: disc;
+  }
+  :where([data-nk="typeset"]) > ol:not([data-nk], [data-typeset="off"]) {
+    list-style-type: decimal;
+  }
+  :where([data-nk="typeset"]) > pre:not([data-nk], [data-typeset="off"]) {
+    overflow-x: auto;
+    padding: calc(var(--nk-space) * 4);
+    color: var(--nk-color-foreground);
+    font-family: var(--nk-typeset-font-mono);
+    font-size: 0.875em;
+    line-height: var(--nk-leading-relaxed);
+    background: var(--nk-color-muted);
+    border-radius: var(--nk-radius-md);
+  }
+  :where([data-nk="typeset"])
+    > pre:not([data-nk], [data-typeset="off"])
+    > code {
+    font: inherit;
+  }
+  :where([data-nk="typeset"])
+    > :not(pre, [data-nk], [data-typeset="off"])
+    > code {
+    padding: 0.15em 0.35em;
+    font-family: var(--nk-typeset-font-mono);
+    font-size: 0.875em;
+    background: var(--nk-color-muted);
+    border-radius: var(--nk-radius-sm);
+  }
+  :where([data-nk="typeset"]) > table:not([data-nk], [data-typeset="off"]) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.925em;
+  }
+  :where([data-nk="typeset"])
+    > table:not([data-nk], [data-typeset="off"])
+    > :where(thead, tbody, tfoot)
+    > tr
+    > :where(th, td) {
+    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    text-align: start;
+    vertical-align: top;
+    border-block-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
   @scope ([data-nk="typeset"]) to (
     [data-nk]:not([data-nk="typeset"]),
     [data-typeset="off"]
@@ -18,7 +140,7 @@
     :where(h1, h2, h3, h4, h5, h6) {
       margin-block: calc(var(--nk-typeset-flow) * 1.4) 0;
       font-family: var(--nk-typeset-font-heading);
-      font-weight: var(--nk-font-weight-semibold);
+      font-weight: var(--nk-font-weight-bold);
       line-height: var(--nk-leading-tight);
       text-wrap: balance;
     }
@@ -172,6 +294,30 @@
 }
 
 @layer nitro-kit.state {
+  :where([data-nk="typeset"])
+    > :where(a:not([data-nk], [data-typeset="off"])):focus-visible,
+  :where([data-nk="typeset"])
+    > :where(
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      ul,
+      ol,
+      dl,
+      blockquote,
+      figure,
+      details
+    ):not([data-nk], [data-typeset="off"])
+    :where(a):focus-visible {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+    border-radius: var(--nk-radius-xs);
+  }
+
   @scope ([data-nk="typeset"]) to (
     [data-nk]:not([data-nk="typeset"]),
     [data-typeset="off"]

data/src/stylesheets/nitro_kit/reset.css

@@ -97,10 +97,10 @@
   }
 
   :where(
-    button,
-    input:is([type="button"], [type="reset"], [type="submit"]),
-    label[for]
-  ),
+      button,
+      input:is([type="button"], [type="reset"], [type="submit"]),
+      label[for]
+    ),
   ::file-selector-button {
     cursor: pointer;
   }
@@ -144,11 +144,11 @@
   /* Only Nitro-owned lists lose their markers. Prose lists keep real markers,
      and `typeset` restores its own in the `nitro-kit.base` layer. */
   :where(
-    ol[data-nk],
-    ul[data-nk],
-    menu[data-nk],
-    [data-nk] :is(ol, ul, menu)[data-slot]
-  ) {
+      ol[data-nk],
+      ul[data-nk],
+      menu[data-nk],
+      [data-nk] :is(ol, ul, menu)[data-slot]
+    ) {
     list-style: none;
   }
 

data/src/stylesheets/nitro_kit/tokens.css

@@ -1,11 +1,9 @@
 @layer nitro-kit.tokens {
   :where(:root) {
-    --nk-font-sans:
-      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    --nk-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --nk-font-mono:
-      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
+    --nk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
 
     --nk-text-xs: 0.75rem;
     --nk-text-sm: 0.875rem;
@@ -38,16 +36,17 @@
     --nk-radius-lg: 0.5rem;
     --nk-radius-xl: 0.75rem;
     --nk-radius-full: 9999px;
+    --nk-button-radius: initial;
 
     --nk-border-width: 1px;
     --nk-focus-width: 2px;
     --nk-focus-offset: 2px;
 
     --nk-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
-    --nk-shadow-md:
-      0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
-    --nk-shadow-lg:
-      0 10px 15px -3px oklch(0 0 0 / 0.12), 0 4px 6px -4px oklch(0 0 0 / 0.12);
+    --nk-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1),
+      0 2px 4px -2px oklch(0 0 0 / 0.1);
+    --nk-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.12),
+      0 4px 6px -4px oklch(0 0 0 / 0.12);
 
     --nk-duration-fast: 100ms;
     --nk-duration-normal: 150ms;

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nitro_kit
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.2
+  version: 2.0.0.alpha.3
 platform: ruby
 authors:
 - Mikkel Malmberg
@@ -128,7 +128,6 @@ files:
 - app/components/nitro_kit/fieldset.rb
 - app/components/nitro_kit/flex.rb
 - app/components/nitro_kit/form_builder.rb
-- app/components/nitro_kit/form_section.rb
 - app/components/nitro_kit/grid.rb
 - app/components/nitro_kit/icon.rb
 - app/components/nitro_kit/input.rb
@@ -144,6 +143,7 @@ files:
 - app/components/nitro_kit/rich_text_area.rb
 - app/components/nitro_kit/select.rb
 - app/components/nitro_kit/settings_layout.rb
+- app/components/nitro_kit/settings_section.rb
 - app/components/nitro_kit/sheet.rb
 - app/components/nitro_kit/stat_grid.rb
 - app/components/nitro_kit/switch.rb
@@ -176,6 +176,7 @@ files:
 - config/locales/en.yml
 - docs/agent_guide.md
 - docs/agent_native_spec.md
+- docs/browser_support.md
 - docs/component_contracts.md
 - docs/customization.md
 - docs/hotwire.md
@@ -238,7 +239,6 @@ files:
 - src/stylesheets/nitro_kit/components/field_group.css
 - src/stylesheets/nitro_kit/components/fieldset.css
 - src/stylesheets/nitro_kit/components/flex.css
-- src/stylesheets/nitro_kit/components/form_section.css
 - src/stylesheets/nitro_kit/components/grid.css
 - src/stylesheets/nitro_kit/components/icon.css
 - src/stylesheets/nitro_kit/components/input.css
@@ -254,6 +254,7 @@ files:
 - src/stylesheets/nitro_kit/components/rich_text_area.css
 - src/stylesheets/nitro_kit/components/select.css
 - src/stylesheets/nitro_kit/components/settings_layout.css
+- src/stylesheets/nitro_kit/components/settings_section.css
 - src/stylesheets/nitro_kit/components/sheet.css
 - src/stylesheets/nitro_kit/components/stat_grid.css
 - src/stylesheets/nitro_kit/components/switch.css

data/src/stylesheets/nitro_kit/components/form_section.css

@@ -1,71 +0,0 @@
-@layer nitro-kit.base {
-  :where([data-nk="form-section"]) {
-    display: grid;
-    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
-    column-gap: calc(var(--nk-space) * 8);
-    row-gap: calc(var(--nk-space) * 5);
-    align-items: start;
-    min-width: 0;
-    color: var(--nk-color-foreground);
-  }
-
-  :where([data-nk="form-section"] > [data-slot="form-section-header"]) {
-    display: grid;
-    gap: calc(var(--nk-space) * 2);
-  }
-
-  :where([data-nk="form-section"] [data-slot="form-section-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-semibold);
-    line-height: var(--nk-leading-tight);
-    text-wrap: balance;
-  }
-
-  :where([data-nk="form-section"] [data-slot="form-section-description"]) {
-    max-width: var(--nk-content-lg);
-    color: var(--nk-color-muted-foreground);
-    font-size: var(--nk-text-sm);
-    line-height: var(--nk-leading-relaxed);
-    text-wrap: pretty;
-  }
-
-  :where([data-nk="form-section"] > [data-slot="form-section-form"]) {
-    display: grid;
-    grid-column: 2;
-    gap: calc(var(--nk-space) * 4);
-    width: 100%;
-    max-width: var(--nk-content-lg);
-  }
-
-  :where([data-nk="form-section"] > [data-slot="form-section-status"]) {
-    grid-column: 2;
-    width: 100%;
-    max-width: var(--nk-content-lg);
-  }
-
-  :where([data-nk="form-section"] > [data-slot="form-section-form"] > form) {
-    display: grid;
-    gap: calc(var(--nk-space) * 5);
-  }
-
-  :where([data-nk="form-section"] + [data-nk="form-section"]) {
-    padding-block-start: calc(var(--nk-space) * 8);
-    border-block-start: var(--nk-border-width) solid var(--nk-color-border);
-  }
-}
-
-@layer nitro-kit.state {
-  @media (max-width: 48rem) {
-    :where([data-nk="form-section"]) {
-      grid-template-columns: minmax(0, 1fr);
-      row-gap: calc(var(--nk-space) * 4);
-    }
-
-    :where(
-      [data-nk="form-section"] > [data-slot="form-section-status"],
-      [data-nk="form-section"] > [data-slot="form-section-form"]
-    ) {
-      grid-column: 1;
-    }
-  }
-}