@godxjp/ui 20.0.0 → 20.2.0

package/dist/styles/data-display-layout.css

@@ -272,12 +272,8 @@
     background: var(--tree-item-active-background, hsl(var(--primary) / 0.05));
   }
 
-  .ui-tree-item[data-depth="1"] {
-    margin-inline-start: 1.375rem;
-  }
-
-  .ui-tree-item[data-depth="2"] {
-    margin-inline-start: 2.75rem;
+  .ui-tree-item {
+    margin-inline-start: calc(var(--tree-item-depth, 0) * var(--tree-item-indent-width));
   }
 
   .ui-tree-item > svg {
@@ -623,6 +619,14 @@
   [data-slot="list-row"]:not(:last-child) {
     border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
   }
+
+  [data-slot="list-row-item"] {
+    display: block;
+    list-style: none;
+  }
+  [data-slot="list-row-item"]:not(:last-child) {
+    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
+  }
   [data-slot="list-row-indicator"] {
     position: relative;
     display: block;
@@ -643,6 +647,11 @@
     justify-content: center;
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="list-row-leading"] > svg:not([class*="size-"]) {
+    width: var(--list-row-leading-icon-size, var(--control-icon-size));
+    height: var(--list-row-leading-icon-size, var(--control-icon-size));
+  }
   [data-slot="list-row-body"] {
     display: flex;
     min-inline-size: min(var(--list-row-body-min-width, 12rem), 100%);
@@ -1082,7 +1091,8 @@
     );
     color: hsl(var(--foreground));
     font-size: var(--timeline-grid-event-font-size);
-    line-height: var(--line-height-tight);
+
+    line-height: var(--line-height-normal);
     text-align: start;
   }
 
@@ -1158,3 +1168,234 @@
     box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
   }
 }
+
+@layer components {
+  .ui-range-timeline {
+    overflow: auto;
+    border: 1px solid hsl(var(--range-timeline-border-color));
+    border-radius: var(--radius-md);
+  }
+  .ui-range-timeline-canvas {
+    min-inline-size: calc(
+      var(--range-timeline-label-width) + var(--range-timeline-columns, 1) *
+        var(--range-timeline-unit-width)
+    );
+  }
+  .ui-range-timeline-header,
+  .ui-range-timeline-row {
+    display: grid;
+    grid-template-columns: var(--range-timeline-label-width) minmax(0, 1fr);
+    min-block-size: var(--range-timeline-row-height);
+  }
+  .ui-range-timeline-header {
+    background: hsl(var(--muted));
+  }
+  .ui-range-timeline-label {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background: hsl(var(--card));
+    padding: var(--space-2);
+    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+  }
+  .ui-range-timeline-columns {
+    display: flex;
+  }
+  .ui-range-timeline-column {
+    min-inline-size: 0;
+    overflow: hidden;
+    padding: var(--space-2);
+    border-inline-end: 1px solid hsl(var(--range-timeline-border-color));
+  }
+  .ui-range-timeline-track {
+    position: relative;
+    min-inline-size: 0;
+  }
+  .ui-range-timeline-bar {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    block-size: var(--range-timeline-bar-height);
+    border-radius: var(--radius-sm);
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+  .ui-range-timeline-handle {
+    position: absolute;
+    inset-block: 0;
+    min-inline-size: 0;
+    inline-size: var(--control-height-sm);
+    block-size: 100%;
+    padding: 0;
+    color: inherit;
+    touch-action: none;
+    cursor: ew-resize;
+  }
+  .ui-range-timeline-handle[data-edge="start"] {
+    inset-inline-start: 0;
+  }
+  .ui-range-timeline-handle[data-edge="end"] {
+    inset-inline-end: 0;
+  }
+  .ui-range-timeline-today {
+    position: absolute;
+    inset-block: 0;
+    border-inline-start: 1px solid hsl(var(--primary));
+  }
+}
+
+@layer components {
+
+  [data-slot="descriptions"][data-columns-responsive] {
+    --descriptions-column-count: var(--descriptions-column-count-base, 1);
+    grid-template-columns: repeat(var(--descriptions-column-count), minmax(0, 1fr));
+  }
+
+  [data-slot="descriptions-item"][data-span-responsive] {
+    --descriptions-item-span: var(--descriptions-item-span-base, 1);
+    grid-column: span var(--descriptions-item-span) / span var(--descriptions-item-span);
+  }
+
+  [data-slot="descriptions-item"][data-span="filled"] {
+    grid-column: 1 / -1;
+  }
+
+  [data-slot="descriptions"]:not([data-bordered]) [data-slot="descriptions-item"] {
+    border-block-end: var(--descriptions-row-border);
+    min-block-size: var(--descriptions-row-min-height);
+
+    align-content: center;
+  }
+
+  [data-slot="descriptions"][data-bordered] {
+    gap: 0;
+    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
+    border-block-end: var(--descriptions-border-width) solid hsl(var(--border));
+    border-radius: var(--descriptions-border-radius);
+    overflow: hidden;
+  }
+
+  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-item"] {
+    gap: 0;
+    border-block-start: var(--descriptions-border-width) solid hsl(var(--border));
+    border-inline-start: var(--descriptions-border-width) solid hsl(var(--border));
+  }
+
+  [data-slot="descriptions"][data-bordered]
+    :is([data-slot="descriptions-label"], [data-slot="descriptions-value"]) {
+    padding: var(--descriptions-cell-padding-y) var(--descriptions-cell-padding-x);
+  }
+
+  [data-slot="descriptions"][data-bordered] [data-slot="descriptions-label"] {
+    background-color: var(--descriptions-label-background, hsl(var(--muted)));
+  }
+
+  [data-slot="descriptions"][data-bordered]
+    [data-slot="descriptions-item"][data-layout="horizontal"]
+    [data-slot="descriptions-label"] {
+    border-inline-end: var(--descriptions-border-width) solid hsl(var(--border));
+  }
+}
+
+@layer godxjp-ui-responsive {
+
+  @media (min-width: 640px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-sm,
+        var(--descriptions-column-count-base, 1)
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-sm,
+        var(--descriptions-item-span-base, 1)
+      );
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-md,
+        var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-md,
+        var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+      );
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-lg,
+        var(
+          --descriptions-column-count-md,
+          var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+        )
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-lg,
+        var(
+          --descriptions-item-span-md,
+          var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+        )
+      );
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-slot="descriptions"][data-columns-responsive] {
+      --descriptions-column-count: var(
+        --descriptions-column-count-xl,
+        var(
+          --descriptions-column-count-lg,
+          var(
+            --descriptions-column-count-md,
+            var(--descriptions-column-count-sm, var(--descriptions-column-count-base, 1))
+          )
+        )
+      );
+    }
+
+    [data-slot="descriptions-item"][data-span-responsive] {
+      --descriptions-item-span: var(
+        --descriptions-item-span-xl,
+        var(
+          --descriptions-item-span-lg,
+          var(
+            --descriptions-item-span-md,
+            var(--descriptions-item-span-sm, var(--descriptions-item-span-base, 1))
+          )
+        )
+      );
+    }
+  }
+}
+
+@layer components {
+  .ui-text[data-decoration="line-through"] {
+    text-decoration: line-through;
+  }
+  .ui-text[data-decoration="underline"] {
+    text-decoration: underline;
+  }
+  .ui-text[data-decoration="none"] {
+    text-decoration: none;
+  }
+  .ui-text[data-chip] {
+    background: hsl(var(--muted));
+    border-radius: var(--prose-code-radius);
+    padding-inline: var(--prose-code-space-inline);
+    font-size: var(--prose-code-font-size);
+  }
+}

package/dist/styles/data-entry-layout.css

@@ -186,6 +186,19 @@
     gap: var(--upload-tile-space-gap);
   }
 
+  .ui-upload-list-thumb {
+    inline-size: var(--control-height-lg);
+    block-size: var(--control-height-lg);
+    object-fit: cover;
+    border-radius: var(--radius);
+    flex-shrink: 0;
+  }
+
+  .ui-upload-picture-item {
+    inline-size: var(--upload-tile-size);
+    overflow-wrap: anywhere;
+  }
+
   .ui-upload-tile {
     position: relative;
     inline-size: var(--upload-tile-size);

package/dist/styles/layout.css

@@ -296,6 +296,13 @@
     grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
   }
 
+  .ui-responsive-grid[data-flow="columns"] {
+    grid-template-columns: none;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--responsive-grid-column-width);
+    align-items: start;
+  }
+
   .ui-responsive-grid[data-gap="none"] {
     gap: 0;
   }
@@ -1408,25 +1415,29 @@
 @layer components {
 
   @media (width < 40rem) {
-    .ui-flex[data-hide-below="sm"] {
+    .ui-flex[data-hide-below="sm"],
+    .ui-topbar-item[data-hide-below="sm"] {
       display: none;
     }
   }
 
   @media (width < 48rem) {
-    .ui-flex[data-hide-below="md"] {
+    .ui-flex[data-hide-below="md"],
+    .ui-topbar-item[data-hide-below="md"] {
       display: none;
     }
   }
 
   @media (width < 64rem) {
-    .ui-flex[data-hide-below="lg"] {
+    .ui-flex[data-hide-below="lg"],
+    .ui-topbar-item[data-hide-below="lg"] {
       display: none;
     }
   }
 
   @media (width < 80rem) {
-    .ui-flex[data-hide-below="xl"] {
+    .ui-flex[data-hide-below="xl"],
+    .ui-topbar-item[data-hide-below="xl"] {
       display: none;
     }
   }
@@ -1490,3 +1501,209 @@
     margin-block-end: var(--space-3);
   }
 }
+
+@layer components {
+  .ui-flex[data-grow] {
+    flex-grow: 1;
+  }
+  .ui-flex[data-shrink="false"] {
+    flex-shrink: 0;
+  }
+  .ui-flex[data-direction="responsive"] {
+    flex-direction: var(--flex-direction-base, row);
+  }
+  .ui-flex[data-list] {
+    list-style-position: outside;
+    padding-inline-start: var(--space-5);
+  }
+  .ui-flex[data-list="disc"] {
+    list-style-type: disc;
+  }
+  .ui-flex[data-list="decimal"] {
+    list-style-type: decimal;
+  }
+  .ui-flex[data-list] > li {
+    display: list-item;
+  }
+  .ui-flex[data-surface] {
+    border-radius: var(--flex-surface-radius, var(--radius-md));
+  }
+  .ui-flex[data-surface="muted"] {
+    background: var(--flex-surface-background, hsl(var(--muted)));
+  }
+  .ui-flex[data-surface="warning"] {
+    background: var(
+      --flex-surface-background,
+      hsl(var(--warning) / var(--flex-surface-warning-alpha))
+    );
+  }
+  .ui-flex[data-surface="popover"] {
+    background: var(--flex-surface-background, hsl(var(--popover)));
+    border: var(--stroke-hairline) solid hsl(var(--border));
+    box-shadow: var(--shadow-sm);
+  }
+  .ui-flex:has(> .ui-flex[data-reveal="hover"]) {
+    position: relative;
+  }
+  .ui-flex[data-reveal="hover"] {
+    position: absolute;
+    inset-block-start: var(--flex-actions-offset-block, 0);
+    inset-inline-end: var(--flex-actions-offset-inline, 0);
+    opacity: 0;
+    pointer-events: none;
+  }
+  .ui-flex:hover > .ui-flex[data-reveal="hover"],
+  .ui-flex:focus-within > .ui-flex[data-reveal="hover"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  @media (hover: none) {
+    .ui-flex[data-reveal="hover"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  .ui-master-detail[data-rail-width="narrow"] {
+    --master-detail-rail-size: var(--master-detail-rail-narrow);
+  }
+  .ui-master-detail[data-rail-width="wide"] {
+    --master-detail-rail-size: var(--master-detail-rail-wide);
+  }
+  .ui-responsive-grid-item {
+    grid-column: span min(var(--responsive-grid-base, 1), var(--responsive-grid-item-base, 1));
+  }
+  @container responsive-grid (min-width: 40rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-sm, 1), var(--responsive-grid-item-sm, 1));
+    }
+  }
+  @container responsive-grid (min-width: 48rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-md, 1), var(--responsive-grid-item-md, 1));
+    }
+  }
+  @container responsive-grid (min-width: 64rem) {
+    .ui-responsive-grid-item {
+      grid-column: span min(var(--responsive-grid-lg, 1), var(--responsive-grid-item-lg, 1));
+    }
+  }
+  .ui-separator[data-label-size="2xs"] .ui-separator-label {
+    font-size: var(--font-size-2xs);
+  }
+  .ui-separator[data-label-size="xs"] .ui-separator-label {
+    font-size: var(--font-size-xs);
+  }
+  .ui-separator[data-label-size="sm"] .ui-separator-label {
+    font-size: var(--font-size-sm);
+  }
+  .ui-separator[data-label-size="md"] .ui-separator-label {
+    font-size: var(--font-size-base);
+  }
+}
+@layer components {
+  @media (min-width: 40rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(--flex-direction-sm, var(--flex-direction-base, row));
+    }
+    .ui-separator[data-hide-from="sm"] {
+      display: none;
+    }
+  }
+  @media (width < 40rem) {
+    .ui-separator[data-hide-below="sm"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 48rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-md,
+        var(--flex-direction-sm, var(--flex-direction-base, row))
+      );
+    }
+    .ui-separator[data-hide-from="md"] {
+      display: none;
+    }
+  }
+  @media (width < 48rem) {
+    .ui-separator[data-hide-below="md"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 64rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-lg,
+        var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
+      );
+    }
+    .ui-separator[data-hide-from="lg"] {
+      display: none;
+    }
+  }
+  @media (width < 64rem) {
+    .ui-separator[data-hide-below="lg"] {
+      display: none;
+    }
+  }
+}
+@layer components {
+  @media (min-width: 80rem) {
+    .ui-flex[data-direction="responsive"] {
+      flex-direction: var(
+        --flex-direction-xl,
+        var(
+          --flex-direction-lg,
+          var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
+        )
+      );
+    }
+    .ui-separator[data-hide-from="xl"] {
+      display: none;
+    }
+  }
+  @media (width < 80rem) {
+    .ui-separator[data-hide-below="xl"] {
+      display: none;
+    }
+  }
+}
+
+@layer components {
+  .ui-topbar[data-height="bar"] {
+    min-block-size: var(--app-shell-bar-height);
+    padding-inline: var(--app-shell-bar-inset);
+  }
+}
+
+@layer components {
+  .ui-flex[data-direction="responsive"].ui-flex-gap-xs,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xs {
+    row-gap: var(--space-stack-xs);
+    column-gap: var(--space-inline-xs);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-sm,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-sm {
+    row-gap: var(--space-stack-sm);
+    column-gap: var(--space-inline-sm);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-md,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-md {
+    row-gap: var(--space-stack-md);
+    column-gap: var(--space-inline-md);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-lg,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-lg {
+    row-gap: var(--space-stack-lg);
+    column-gap: var(--space-inline-lg);
+  }
+  .ui-flex[data-direction="responsive"].ui-flex-gap-xl,
+  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xl {
+    row-gap: var(--space-stack-xl);
+    column-gap: var(--space-inline-xl);
+  }
+}