nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,149 @@
+@layer nitro-kit.compound {
+  :where([data-nk="control-group"]) {
+    --_nk-control-group-height: var(--nk-control-height-md);
+
+    display: flex;
+    align-items: stretch;
+    min-inline-size: 0;
+  }
+
+  :where(
+    [data-nk="control-group"]:has(> [data-nk="button"][data-size="lg"])
+  ) {
+    --_nk-control-group-height: var(--nk-control-height-lg);
+  }
+
+  :where(
+    [data-nk="control-group"]:has(> [data-nk="button"][data-size="xl"])
+  ) {
+    --_nk-control-group-height: var(--nk-control-height-xl);
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is(
+        [data-nk="input"],
+        [data-nk="select"],
+        [data-nk="button"],
+        span[data-slot="control-group-addon"]
+      )
+  ) {
+    position: relative;
+    block-size: var(--_nk-control-group-height);
+    min-block-size: var(--_nk-control-group-height);
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is([data-nk="input"], [data-nk="select"], [data-nk="button"]):focus-within
+  ) {
+    z-index: 1;
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is(
+        [data-nk="input"],
+        [data-nk="button"],
+        span[data-slot="control-group-addon"]
+      )
+  ) {
+    border-radius: 0;
+  }
+
+  :where([data-nk="control-group"] > [data-nk="select"] > select) {
+    height: 100%;
+    border-radius: 0;
+  }
+
+  /* Safari positions its native date editor from the line box's top edge.
+     Give the grouped editor the same explicit line-box treatment as a
+     standalone date Input, using the compound control's resolved height. */
+  :where(
+    [data-nk="control-group"] > [data-nk="input"][type="date"]
+  ) {
+    line-height: calc(
+      var(--_nk-control-group-height) - (var(--nk-border-width) * 2)
+    );
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is(
+        [data-nk="input"],
+        [data-nk="button"],
+        span[data-slot="control-group-addon"]
+      ):first-child
+  ) {
+    border-start-start-radius: var(--nk-radius-md);
+    border-end-start-radius: var(--nk-radius-md);
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is(
+        [data-nk="input"],
+        [data-nk="button"],
+        span[data-slot="control-group-addon"]
+      ):last-child
+  ) {
+    border-start-end-radius: var(--nk-radius-md);
+    border-end-end-radius: var(--nk-radius-md);
+  }
+
+  :where(
+    [data-nk="control-group"]
+      > :is(
+          [data-nk="input"],
+          [data-nk="select"],
+          [data-nk="button"],
+          span[data-slot="control-group-addon"]
+        )
+      + :is(
+        [data-nk="input"],
+        [data-nk="select"],
+        [data-nk="button"],
+        span[data-slot="control-group-addon"]
+      )
+  ) {
+    margin-inline-start: calc(var(--nk-border-width) * -1);
+  }
+
+  :where(
+    [data-nk="control-group"] > :is([data-nk="input"], [data-nk="select"])
+  ) {
+    min-inline-size: 0;
+    flex: 1 1 auto;
+  }
+
+  :where([data-nk="control-group"] > [data-nk="button"]) {
+    flex: none;
+    box-shadow: none;
+  }
+
+  :where([data-nk="control-group"] > [data-slot="control-group-addon"]) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding-inline: calc(var(--nk-space) * 3);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    white-space: nowrap;
+    background: var(--nk-color-muted);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where(
+    [data-nk="control-group"] > [data-nk="select"]:first-child > select
+  ) {
+    border-start-start-radius: var(--nk-radius-md);
+    border-end-start-radius: var(--nk-radius-md);
+  }
+
+  :where(
+    [data-nk="control-group"] > [data-nk="select"]:last-child > select
+  ) {
+    border-start-end-radius: var(--nk-radius-md);
+    border-end-end-radius: var(--nk-radius-md);
+  }
+}

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

@@ -0,0 +1,54 @@
+@layer nitro-kit.base {
+  :where([data-nk="danger-zone"]) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: calc(var(--nk-space) * 5);
+    padding: calc(var(--nk-space) * 6);
+    color: var(--nk-color-danger-content);
+    background: color-mix(
+      in oklab,
+      var(--nk-color-danger) 8%,
+      var(--nk-color-surface)
+    );
+    border: var(--nk-border-width) solid
+      color-mix(in oklab, var(--nk-color-danger) 50%, transparent);
+    border-radius: var(--nk-radius-lg);
+  }
+
+  :where([data-nk="danger-zone"] > [data-slot="danger-zone-header"]) {
+    display: grid;
+    grid-column: 1 / -1;
+    gap: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="danger-zone"] [data-slot="danger-zone-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="danger-zone"] [data-slot="danger-zone-description"]) {
+    max-width: var(--nk-content-lg);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-relaxed);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="danger-zone"] > [data-slot="danger-zone-confirmation"]) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.state {
+  @media (max-width: 48rem) {
+    :where([data-nk="danger-zone"]) {
+      grid-template-columns: minmax(0, 1fr);
+      align-items: stretch;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@layer nitro-kit.base {
+  :where([data-nk="data-section"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 5);
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="data-section"] > [data-slot="data-section-header"]) {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 4);
+  }
+
+  :where([data-nk="data-section"] [data-slot="data-section-heading"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="data-section"] [data-slot="data-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="data-section"] [data-slot="data-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="data-section"] > [data-slot="data-section-table"]),
+  :where([data-nk="data-section"] > [data-slot="data-section-empty-state"]) {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,53 @@
+@layer nitro-kit.base {
+  :where([data-nk="details-table"]) {
+    inline-size: 100%;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
+    inline-size: clamp(8rem, 28%, 16rem);
+    vertical-align: top;
+  }
+
+  :where([data-nk="details-table"] [data-slot="details-table-empty"]) {
+    color: var(--nk-color-muted-foreground);
+  }
+
+  :where(
+    [data-nk="details-table"] [data-slot="details-table-number"],
+    [data-nk="details-table"] [data-slot="details-table-time"]
+  ) {
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(
+    [data-nk="details-table"] [data-slot="details-table-link"],
+    [data-nk="details-table"] [data-slot="details-table-record"]
+  ) {
+    color: var(--nk-color-info-content);
+    text-decoration-line: underline;
+    text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
+    text-underline-offset: 0.16em;
+  }
+
+  :where(
+    [data-nk="details-table"] [data-slot="details-table-link"]:hover,
+    [data-nk="details-table"] [data-slot="details-table-record"]:hover
+  ) {
+    text-decoration-color: currentcolor;
+  }
+
+  :where([data-nk="details-table"] [data-slot="details-table-file"]) {
+    font-family: var(--nk-font-mono);
+    font-size: var(--nk-text-sm);
+    overflow-wrap: anywhere;
+  }
+}
+
+@media (max-width: 36rem) {
+  @layer nitro-kit.compound {
+    :where([data-nk="details-table"] [data-slot="table-header"][scope="row"]) {
+      inline-size: 40%;
+    }
+  }
+}

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

@@ -0,0 +1,80 @@
+@layer nitro-kit.base {
+  /* Dialog's structural root must not become an extra flex or grid item. */
+  :where([data-nk="dialog"]) {
+    display: contents;
+  }
+
+  :where([data-nk="dialog"] > [data-slot="dialog-panel"]) {
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), var(--nk-content-md));
+    max-block-size: calc(100dvh - (var(--nk-space) * 8));
+    margin: auto;
+    padding: calc(var(--nk-space) * 6);
+    overflow: auto;
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-xl);
+    box-shadow: var(--nk-shadow-lg);
+  }
+
+  :where([data-nk="dialog"] > [data-slot="dialog-panel"])::backdrop {
+    background: var(--nk-color-overlay);
+  }
+
+  /* A non-modal open panel is server-rendered inline content; the browser
+     default of position: absolute would lift it over surrounding layout. */
+  :where([data-nk="dialog"] > [data-slot="dialog-panel"][open]:not(:modal)) {
+    position: static;
+  }
+
+  :where([data-nk="dialog"] [data-slot="dialog-title"]) {
+    font-size: var(--nk-text-lg);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="dialog"] [data-slot="dialog-description"]) {
+    margin-block-start: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-relaxed);
+    text-wrap: pretty;
+  }
+
+  /* The close control precedes the panel content and sticks to the top of the
+     scrolling panel so long content never scrolls it out of reach. */
+  :where(
+    [data-nk="dialog"] > [data-slot="dialog-panel"] > [data-slot="dialog-close"]
+  ) {
+    position: sticky;
+    z-index: 1;
+    float: inline-end;
+    inset-block-start: 0;
+    margin-block-end: calc(var(--nk-space) * -2);
+    margin-inline-start: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="dialog"] > [data-slot="dialog-panel"][open]) {
+    animation: nk-dialog-enter var(--nk-duration-slow) var(--nk-ease);
+  }
+
+  @keyframes nk-dialog-enter {
+    from {
+      opacity: 0;
+      transform: translateY(0.5rem) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="dialog"] > [data-slot="dialog-panel"]) {
+      animation-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,152 @@
+@layer nitro-kit.base {
+  :where([data-nk="dropdown"]) {
+    position: relative;
+    display: inline-block;
+  }
+
+  :where([data-nk="dropdown"] > [data-slot="dropdown-content"]) {
+    position: fixed;
+    z-index: 50;
+    display: none;
+    min-inline-size: 12rem;
+    max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
+    max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
+    inset: var(--_nk-overlay-top, 50%) auto auto var(--_nk-overlay-left, 50%);
+    margin: 0;
+    padding: var(--nk-space);
+    overflow: auto;
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
+    box-shadow: var(--nk-shadow-md);
+    translate: none;
+  }
+
+  :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where([data-nk="dropdown"] [data-slot="dropdown-title"]) {
+    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-xs);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="dropdown"] [data-slot="dropdown-item"]) {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    padding-inline: calc(var(--nk-space) * 3);
+    overflow: hidden;
+    color: var(--nk-color-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+    line-height: var(--nk-leading-normal);
+    text-align: start;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--nk-radius-md);
+    transition:
+      color var(--nk-duration-normal) var(--nk-ease),
+      background-color var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where(
+    [data-nk="dropdown"]
+      [data-slot="dropdown-item"]
+      > [data-slot="dropdown-item-icon"]
+  ) {
+    display: inline-flex;
+    flex: none;
+    margin-inline-end: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+  }
+
+  :where([data-nk="dropdown"] [data-slot="dropdown-separator"]) {
+    block-size: var(--nk-border-width);
+    margin-block: var(--nk-space);
+    background: var(--nk-color-border);
+    border: 0;
+  }
+}
+
+@layer nitro-kit.variant {
+  :where(
+    [data-nk="dropdown"] [data-slot="dropdown-item"][data-variant="destructive"]
+  ) {
+    color: var(--nk-color-danger-content);
+  }
+
+  :where(
+    [data-nk="dropdown"]
+      [data-slot="dropdown-item"][data-variant="destructive"]
+      > [data-slot="dropdown-item-icon"]
+  ) {
+    color: inherit;
+  }
+}
+
+@layer nitro-kit.state {
+  @media (hover: hover) {
+    :where(
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"]:hover:not(:disabled, [aria-disabled="true"])
+    ) {
+      background: var(--nk-color-muted);
+    }
+
+    :where(
+      [data-nk="dropdown"]
+        [data-slot="dropdown-item"][data-variant="destructive"]:hover:not(
+          :disabled,
+          [aria-disabled="true"]
+        )
+    ) {
+      color: var(--nk-color-danger-foreground);
+      background: var(--nk-color-danger);
+    }
+  }
+
+  :where([data-nk="dropdown"] [data-slot="dropdown-item"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: calc(var(--nk-focus-offset) * -1);
+  }
+
+  :where(
+    [data-nk="dropdown"]
+      [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
+  ) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
+    animation: nk-dropdown-enter var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  @keyframes nk-dropdown-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="dropdown"] > [data-slot="dropdown-content"]) {
+      animation-duration: 0.01ms;
+    }
+  }
+}