@godxjp/ui 20.0.0 → 20.2.0

package/dist/styles/control.css

@@ -92,6 +92,11 @@
     opacity: var(--disabled-opacity);
   }
 
+  .ui-button[data-fill] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
   .ui-button svg {
     width: var(--control-icon-size);
     height: var(--control-icon-size);
@@ -157,6 +162,26 @@
     text-decoration-line: underline;
   }
 
+  .ui-button.ui-button--bare {
+    position: relative;
+    height: auto;
+    min-height: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  .ui-button.ui-button--bare::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    min-inline-size: var(--button-bare-target-size);
+    min-block-size: var(--button-bare-target-size);
+    margin: auto;
+  }
+
   .ui-button--default-size {
     height: var(--control-height);
     padding-inline: var(--control-padding-x);
@@ -174,10 +199,17 @@
     height: var(--control-icon-size-sm);
   }
 
-  .ui-button [data-slot="badge"] {
-    padding-block: 0;
-    line-height: var(--line-height-tight);
-    border-radius: var(--radius-sm);
+  .ui-button:is(
+      .ui-button--default,
+      .ui-button--destructive,
+      .ui-button--outline,
+      .ui-button--dashed,
+      .ui-button--secondary
+    )
+    [data-slot="badge"] {
+    --badge-space-y: 0;
+    --badge-line-height: var(--line-height-tight);
+    --badge-radius: var(--radius-sm);
   }
 
   .ui-button--lg {
@@ -268,8 +300,13 @@
     overflow-wrap: break-word;
     font-size: var(--control-font-size);
     line-height: var(--textarea-autogrow-line-height, var(--line-height-normal));
-    padding-block: var(--control-multiline-padding-block);
-    padding-inline: var(--control-padding-x);
+    padding-block-start: var(
+      --textarea-padding-block-start,
+      var(--control-multiline-padding-block)
+    );
+    padding-block-end: var(--textarea-padding-block-end, var(--control-multiline-padding-block));
+    padding-inline-start: var(--textarea-padding-inline-start, var(--control-padding-x));
+    padding-inline-end: var(--textarea-padding-inline-end, var(--control-padding-x));
     border: var(--control-border-width) solid transparent;
 
     min-block-size: max(
@@ -627,6 +664,7 @@
     cursor: default;
     user-select: none;
     align-items: center;
+    gap: var(--command-item-gap);
     border-radius: calc(var(--control-radius) - 2px);
     padding: var(--command-item-padding-y) var(--command-item-padding-x);
     font-size: var(--font-size-base);
@@ -784,6 +822,42 @@
   .ui-otp-input:disabled {
     cursor: not-allowed;
   }
+
+  .ui-otp-container:has(.ui-otp-input[data-size="xs"]) {
+    --control-height: var(--control-height-xs);
+  }
+  .ui-otp-container:has(.ui-otp-input[data-size="sm"]) {
+    --control-height: var(--control-height-sm);
+  }
+  .ui-otp-container:has(.ui-otp-input[data-size="lg"]) {
+    --control-height: var(--control-height-lg);
+  }
+
+  .ui-otp-container:has(.ui-otp-input[data-variant="filled"]) .ui-otp-slot,
+  .ui-otp-container:has(.ui-otp-input[data-variant="filled"])
+    .ui-otp-group[data-appearance="grouped"] {
+    border-color: var(--control-filled-border-color);
+    background: var(--control-filled-background);
+  }
+  .ui-otp-container:has(.ui-otp-input[data-variant="borderless"]) .ui-otp-slot,
+  .ui-otp-container:has(.ui-otp-input[data-variant="borderless"])
+    .ui-otp-group[data-appearance="grouped"] {
+    border-color: var(--control-borderless-border-color);
+    background: var(--control-borderless-background);
+  }
+
+  .ui-otp-container:has(.ui-otp-input[data-status="warning"]) {
+    --focus-ring-color: var(--warning);
+  }
+  .ui-otp-container:has(.ui-otp-input[data-status="warning"]) .ui-otp-slot,
+  .ui-otp-container:has(.ui-otp-input[data-status="warning"])
+    .ui-otp-group[data-appearance="grouped"] {
+    border-color: var(--control-status-warning-border-color);
+  }
+
+  .ui-otp-container:has(.ui-otp-input[readonly]) .ui-otp-slot {
+    cursor: default;
+  }
   .ui-otp-group {
     display: flex;
     align-items: center;
@@ -987,9 +1061,10 @@
     gap: var(--space-2);
     min-height: var(--control-height);
     padding: var(--space-1) var(--control-padding-x);
-    border: var(--control-border-width) solid hsl(var(--input));
+
+    border: var(--control-border-width) solid var(--control-surface-border-color);
     border-radius: var(--control-radius);
-    background: hsl(var(--background));
+    background: var(--control-surface-background);
     box-shadow: var(--control-shadow);
   }
   .ui-tag-input-disabled {
@@ -1038,6 +1113,11 @@
     width: 0.75rem;
     height: 0.75rem;
   }
+
+  .ui-tag-input-clear {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
   .ui-tag-input-field {
     flex: 1;
     min-width: 6rem;
@@ -1076,14 +1156,50 @@
     max-inline-size: 100%;
   }
 
-  .ui-control[data-size="sm"] {
+  .ui-control[data-size="sm"],
+  .ui-control-surface[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }
 
-  .ui-control[data-size="lg"] {
+  .ui-control[data-size="lg"],
+  .ui-control-surface[data-size="lg"] {
     --control-height: var(--control-height-lg);
   }
 
+  .ui-control[data-size="xs"],
+  .ui-control-surface[data-size="xs"] {
+    --control-height: var(--control-height-xs);
+  }
+
+  .ui-control-surface {
+    border-color: var(--control-surface-border-color);
+    background: var(--control-surface-background);
+  }
+
+  .ui-control-surface[data-variant="filled"] {
+    --control-shadow: var(--control-filled-shadow);
+    border-color: var(--control-filled-border-color);
+    background: var(--control-filled-background);
+  }
+
+  .ui-control-surface[data-variant="borderless"] {
+    --control-shadow: var(--control-borderless-shadow);
+    border-color: var(--control-borderless-border-color);
+    background: var(--control-borderless-background);
+  }
+
+  .ui-control-surface[data-status="error"],
+  .ui-control-surface[aria-invalid="true"] {
+    border-color: var(--control-status-error-border-color);
+  }
+
+  .ui-control-surface[data-status="warning"] {
+    border-color: var(--control-status-warning-border-color);
+    --focus-ring-color: var(--warning);
+    --focus-outline-color: var(--warning);
+    --focus-ring-glow-color: var(--control-status-warning-outline-color);
+  }
+
   .ui-number-input[data-size="sm"] {
     --control-height: var(--control-height-sm);
   }
@@ -1192,6 +1308,22 @@
     min-inline-size: var(--radix-popover-trigger-width);
   }
 
+  .ui-search-select-panel[data-popup-match="content"] {
+    min-inline-size: auto;
+  }
+
+  .ui-search-select-panel[data-popup-match="fixed"] {
+    min-inline-size: var(--search-select-panel-inline-size);
+    inline-size: var(--search-select-panel-inline-size);
+  }
+
+  .ui-search-select-selected-icon {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+
   .ui-search-select-command {
     display: flex;
     min-block-size: 0;
@@ -1234,6 +1366,29 @@
     gap: var(--search-select-option-space-gap);
   }
 
+  .ui-search-select-values {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1 1 0%;
+    align-items: center;
+    gap: var(--search-select-option-space-gap);
+    overflow: hidden;
+  }
+
+  .ui-search-select-value {
+    display: inline-flex;
+    max-inline-size: 100%;
+    align-items: center;
+    overflow: hidden;
+    border-radius: var(--radius-sm);
+    background: hsl(var(--secondary));
+    padding: 0.0625rem var(--space-2);
+    color: hsl(var(--secondary-foreground));
+    font-size: var(--tag-input-chip-font-size);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .ui-search-select-option-text {
     display: flex;
     min-inline-size: 0;
@@ -1400,10 +1555,23 @@
     box-shadow: var(--shadow-md);
   }
 
+  .ui-select-content[data-popup-match="fixed"] {
+    min-width: var(--select-content-inline-size);
+    width: var(--select-content-inline-size);
+  }
+
   .ui-select-viewport {
     padding: var(--menu-content-space-inset);
   }
 
+  .ui-select-empty {
+    padding-inline: var(--select-item-space-inline);
+    padding-block: var(--select-empty-space-block);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--menu-item-font-size);
+    text-align: center;
+  }
+
   .ui-select-item,
   .ui-select-label {
     border-radius: var(--menu-item-radius);
@@ -1532,6 +1700,15 @@
     background: hsl(var(--accent));
   }
 
+  .ui-time-picker-option[data-disabled] {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-time-picker-option[data-disabled]:hover {
+    background: transparent;
+  }
+
   .ui-time-picker-option[data-selected="true"] {
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
@@ -1542,10 +1719,28 @@
   }
 
   .ui-time-picker-footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--time-picker-footer-space-gap);
     padding: var(--time-picker-footer-space-inset);
     border-block-start: 1px solid hsl(var(--border));
   }
 
+  .ui-time-picker-footer-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--time-picker-footer-space-gap);
+  }
+
+  .ui-time-picker-footer-actions > :only-child:last-child {
+    margin-inline-start: auto;
+  }
+
+  .ui-time-picker-footer-actions > :first-child:not(:only-child) {
+    margin-inline-end: auto;
+  }
+
   .ui-time-picker-popover {
     --popover-surface-inline-size: auto;
     --popover-space-inset: 0;
@@ -1556,10 +1751,6 @@
     --popover-space-inset: 0;
   }
 
-  .ui-control-inline-affix-pair-affixed {
-    padding-inline-end: var(--control-inline-affix-pair-space-inline-end);
-  }
-
   .ui-time-picker-affix {
     display: inline-flex;
     align-items: center;
@@ -2301,3 +2492,318 @@
     text-align: end;
   }
 }
+
+@layer components {
+
+  .ui-control--filled {
+    border-color: transparent;
+    background-color: hsl(var(--control-variant-filled-background));
+  }
+
+  .ui-control--filled:hover:not(:disabled):not([readonly]):not([data-disabled]) {
+    background-color: hsl(var(--control-variant-filled-hover-background));
+  }
+
+  .ui-control--borderless {
+    border-color: transparent;
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  .ui-control[data-status="warning"],
+  .ui-control-multiline[data-status="warning"] {
+    --focus-ring-color: var(--control-status-warning-border-color);
+    --focus-outline-color: var(--control-status-warning-border-color);
+    --focus-ring-glow-color: var(--control-status-warning-glow-color);
+    --focus-ring-glow-alpha: var(--control-status-warning-glow-alpha);
+  }
+
+  .ui-input[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+
+  .ui-control-multiline[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+
+  .ui-control-multiline[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+
+  .ui-control-count {
+    flex-shrink: 0;
+    font-size: var(--control-count-font-size);
+    color: hsl(var(--control-count-color));
+    font-variant-numeric: tabular-nums;
+    padding-inline-end: var(--control-count-space-inline);
+  }
+
+  .ui-control-count[data-exceeded="true"] {
+    color: hsl(var(--control-count-exceeded-color));
+  }
+
+  .ui-textarea-count {
+    position: absolute;
+    inset-block-end: var(--textarea-count-inset-block-end);
+    inset-inline-end: var(--textarea-count-inset-inline-end);
+    padding-inline-end: 0;
+  }
+
+  .ui-input-group {
+    display: inline-flex;
+    inline-size: 100%;
+    align-items: stretch;
+  }
+
+  .ui-input-addon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    block-size: var(--control-height);
+    padding-inline: var(--input-addon-padding-inline);
+    font-size: var(--control-font-size);
+    color: hsl(var(--input-addon-color));
+    background-color: hsl(var(--input-addon-background));
+    border: var(--control-border-width) solid hsl(var(--input));
+    white-space: nowrap;
+  }
+
+  .ui-input-group > [data-slot="input-addon-before"] {
+    border-start-start-radius: var(--control-radius);
+    border-end-start-radius: var(--control-radius);
+    border-inline-end: 0;
+  }
+
+  .ui-input-group > [data-slot="input-addon-after"] {
+    border-start-end-radius: var(--control-radius);
+    border-end-end-radius: var(--control-radius);
+    border-inline-start: 0;
+  }
+
+  .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input,
+  .ui-input-group:has(> [data-slot="input-addon-before"]) .ui-input-affix-wrapper {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input,
+  .ui-input-group:has(> [data-slot="input-addon-after"]) .ui-input-affix-wrapper {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .ui-input-group[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+
+  .ui-input-group[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+
+  .ui-number-input[data-controls="off"] .ui-number-input-field {
+    padding-inline-end: var(--control-padding-x);
+  }
+
+  .ui-switch[data-loading="true"] {
+    cursor: progress;
+  }
+
+  .ui-switch-spinner {
+    inline-size: var(--switch-spinner-size);
+    block-size: var(--switch-spinner-size);
+    color: hsl(var(--primary));
+    animation: spin 1s linear infinite;
+  }
+
+  .ui-switch-content {
+    flex: 1 1 auto;
+    min-inline-size: calc(var(--switch-width) - var(--switch-thumb-size));
+    order: 1;
+    text-align: center;
+    font-size: var(--switch-content-font-size);
+    color: hsl(var(--primary-foreground));
+    padding-inline: var(--switch-content-space-inline);
+    line-height: 1;
+  }
+
+  .ui-switch:has(.ui-switch-content)[data-state="unchecked"] {
+    background: var(--switch-unchecked-background, hsl(var(--muted-foreground)));
+  }
+
+  .ui-switch[data-state="unchecked"] .ui-switch-content {
+    color: var(--switch-content-unchecked-foreground, hsl(var(--background)));
+  }
+
+  .ui-switch[data-state="checked"] .ui-switch-content {
+    order: 0;
+  }
+
+  .ui-switch:has(.ui-switch-content) {
+    inline-size: auto;
+    min-inline-size: var(--switch-width);
+  }
+
+  .ui-switch:has(.ui-switch-content) .ui-switch-thumb {
+    flex: 0 0 auto;
+    order: 0;
+    transform: none;
+  }
+
+  .ui-switch:has(.ui-switch-content)[data-state="checked"] .ui-switch-thumb {
+    order: 1;
+  }
+
+  .ui-slider[data-has-marks="true"] {
+    margin-block-end: calc(var(--slider-mark-space-block-start) + var(--font-size-lg));
+  }
+
+  .ui-slider-marks {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    margin-block-start: var(--slider-mark-space-block-start);
+    block-size: 0;
+  }
+
+  .ui-slider-mark {
+    position: absolute;
+    inset-inline-start: var(--slider-mark-offset-inline, 0%);
+    transform: translateX(-50%);
+    font-size: var(--slider-mark-font-size);
+    color: hsl(var(--slider-mark-color));
+    white-space: nowrap;
+  }
+
+  .ui-slider-dot {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--slider-mark-offset-inline, 0%);
+    inline-size: var(--slider-dot-size);
+    block-size: var(--slider-dot-size);
+    transform: translate(-50%, -50%);
+    border-radius: var(--radius-pill);
+    background: hsl(var(--slider-dot-background));
+    border: var(--control-border-width) solid hsl(var(--slider-dot-border-color));
+  }
+
+  .ui-slider-dot[data-active="true"] {
+    border-color: hsl(var(--slider-dot-active-border-color));
+  }
+
+  .ui-slider-tooltip {
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    margin-block-end: var(--slider-tooltip-offset-block);
+    padding-inline: var(--slider-tooltip-padding-inline);
+    border-radius: var(--slider-tooltip-radius);
+    background: hsl(var(--slider-tooltip-background));
+    color: hsl(var(--slider-tooltip-color));
+    font-size: var(--slider-tooltip-font-size);
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms;
+  }
+
+  .ui-slider-thumb:hover .ui-slider-tooltip,
+  .ui-slider-thumb:focus-visible .ui-slider-tooltip,
+  .ui-slider-tooltip[data-open="true"] {
+    opacity: 1;
+  }
+
+  .ui-rating-symbol {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .ui-rating-star-half {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 50%;
+    z-index: 1;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .ui-rating-star-half-filled {
+    color: hsl(var(--warning));
+  }
+
+  .ui-radio-button-bar {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  .ui-radio-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--control-height);
+    padding-inline: var(--control-padding-x);
+    font-size: var(--control-font-size);
+    color: hsl(var(--choice-button-color));
+    background: hsl(var(--choice-button-background));
+    border: var(--control-border-width) solid hsl(var(--choice-button-border-color));
+    border-inline-start-width: 0;
+    cursor: pointer;
+  }
+
+  .ui-radio-button:first-child {
+    border-inline-start-width: var(--control-border-width);
+    border-start-start-radius: var(--control-radius);
+    border-end-start-radius: var(--control-radius);
+  }
+
+  .ui-radio-button:last-child {
+    border-start-end-radius: var(--control-radius);
+    border-end-end-radius: var(--control-radius);
+  }
+
+  .ui-radio-button[data-state="checked"] {
+    color: hsl(var(--choice-button-selected-color));
+    border-color: hsl(var(--choice-button-selected-border-color));
+  }
+
+  .ui-radio-button-bar[data-button-style="solid"] .ui-radio-button[data-state="checked"] {
+    color: hsl(var(--choice-button-solid-color));
+    background: hsl(var(--choice-button-solid-background));
+    border-color: hsl(var(--choice-button-solid-background));
+  }
+
+  .ui-radio-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-segmented[data-block="true"] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  .ui-segmented[data-block="true"] > .ui-segmented-item {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    justify-content: center;
+  }
+
+  .ui-segmented[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .ui-segmented[data-orientation="vertical"] > .ui-segmented-item {
+    justify-content: flex-start;
+  }
+
+  .ui-segmented[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+
+  .ui-segmented[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+}