opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/carousel.css

@@ -0,0 +1,399 @@
+@layer components.root {
+  :where(.ui-carousel) {
+    --_motion: var(--ui-motion);
+    --_block-room: var(--_shadow-room);
+    --_block-size: 24rem;
+    --_button-bg-color: var(--ui-surface-inverse);
+    --_button-border-color: var(
+      --ui-control-border-color-filled,
+      light-dark(
+        oklch(from var(--_button-bg-color) calc(l + 0.3) c h),
+        oklch(from var(--_button-bg-color) calc(l - 0.3) c h)
+      )
+    );
+    --_button-disabled-border-color: light-dark(
+      oklch(from var(--_button-bg-color) calc(l + 0.12) c h),
+      oklch(from var(--_button-bg-color) calc(l - 0.12) c h)
+    );
+    --_button-disabled-opacity: 0;
+    --_button-end-flip: 1;
+    --_button-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0'/%3E%3C/svg%3E");
+    --_button-image-size: 60%;
+    --_button-inset: var(--ui-space-2);
+    --_button-next-label: "Next";
+    --_button-prev-label: "Previous";
+    --_button-shadow: var(--ui-shadow-overlay);
+    --_button-size: var(--ui-button-size-small);
+    --_button-start-flip: -1;
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_gap: var(--ui-space-3);
+    --_inline-room: min(
+      var(--_gap),
+      max(0px, var(--_shadow-room) - var(--_padding-inline))
+    );
+    --_item-size: calc(
+      (100% - (var(--_items-per-view) - 1) * var(--_gap)) /
+        var(--_items-per-view)
+    );
+    --_items-per-view: 1;
+    --_marker-bg-color: transparent;
+    --_marker-border-color: var(--ui-text);
+    --_marker-gap: 0px;
+    --_marker-label: "Slide ";
+    --_marker-selected-bg-color: var(--ui-selected-strong);
+    --_marker-selected-padding: var(--ui-space-1);
+    --_marker-size: var(--ui-space-5);
+    --_markers-gap: var(--ui-space-3);
+    --_media-aspect-ratio: 16 / 9;
+    --_media-radius: var(--ui-radius);
+    --_padding-block: 0px;
+    --_padding-inline: 0px;
+    --_scale-duration: calc(var(--ui-duration-fast) * var(--_motion));
+    --_shadow-room: var(--ui-space-3);
+    --_snap-align: start;
+
+    counter-reset: ui-carousel-item;
+    display: grid;
+    gap: var(--_gap);
+    grid-auto-columns: var(--_item-size);
+    grid-auto-flow: column;
+    list-style: none;
+    margin-block: calc(-1 * var(--_block-room));
+    margin-inline: calc(-1 * var(--_inline-room));
+    overflow-inline: auto;
+    overscroll-behavior-inline: contain;
+    padding-block: var(--_block-room);
+    padding-inline: calc(var(--_padding-inline) + var(--_inline-room));
+
+    scroll-behavior: smooth;
+    scroll-padding-inline: calc(var(--_padding-inline) + var(--_inline-room));
+    scroll-snap-type: x mandatory;
+
+    @container style(--ui-motion: 0) {
+      scroll-behavior: auto;
+    }
+
+    &.ui-motion-off {
+      scroll-behavior: auto;
+    }
+
+    & > * {
+      counter-increment: ui-carousel-item;
+      min-inline-size: 0;
+      scroll-snap-align: var(--_snap-align);
+    }
+
+    /* Media */
+    & > * > :where(iframe, img, video) {
+      aspect-ratio: var(--_media-aspect-ratio);
+      block-size: auto;
+      border-radius: var(--_media-radius);
+      inline-size: 100%;
+      object-fit: cover;
+    }
+
+    /* Alignment */
+    &.ui-align-center {
+      --_snap-align: center;
+    }
+
+    /* Stretch */
+    &.ui-stretch > * {
+      display: grid;
+    }
+
+    /* Peek at the neighbouring items */
+    &.ui-peek {
+      --_padding-inline: var(--ui-space-8);
+    }
+
+    /* Vertical */
+    &.ui-vertical {
+      --_block-room: min(
+        var(--_gap),
+        max(0px, var(--_shadow-room) - var(--_padding-block))
+      );
+      --_inline-room: var(--_shadow-room);
+
+      block-size: calc(var(--_block-size) + 2 * var(--_block-room));
+      grid-auto-columns: auto;
+      grid-auto-flow: row;
+      grid-auto-rows: var(--_item-size);
+      overflow-block: auto;
+      overflow-inline: hidden;
+      overscroll-behavior-block: contain;
+      padding-block: calc(var(--_padding-block) + var(--_block-room));
+      padding-inline: var(--_inline-room);
+      scroll-padding-block: calc(var(--_padding-block) + var(--_block-room));
+      scroll-padding-inline: 0;
+      scroll-snap-type: y mandatory;
+
+      &.ui-peek {
+        --_padding-block: var(--ui-space-8);
+      }
+    }
+
+    /* Buttons */
+    &:not(.ui-buttons-none) {
+      &::scroll-button(inline-start),
+      &::scroll-button(inline-end),
+      &.ui-vertical::scroll-button(block-start),
+      &.ui-vertical::scroll-button(block-end) {
+        --_button-scale: 1;
+
+        background-blend-mode: difference;
+        background-color: var(--_button-bg-color);
+        background-image: var(--_button-image);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: var(--_button-image-size);
+        block-size: var(--_button-size);
+        border: var(--ui-border-width) solid var(--_button-border-color);
+        border-radius: var(--ui-radius-round);
+        box-shadow: var(--_button-shadow);
+        cursor: pointer;
+        inline-size: var(--_button-size);
+        inset-block-start: anchor(center);
+        padding: 0;
+        position: absolute;
+        position-anchor: auto;
+        scale: calc(var(--_button-flip, 1) * var(--_button-scale))
+          var(--_button-scale);
+        transition:
+          border-color var(--_duration) var(--_ease),
+          opacity var(--_duration) var(--_ease),
+          scale var(--_scale-duration) var(--_ease);
+        translate: 0 -50%;
+      }
+
+      &::scroll-button(inline-start) {
+        --_button-flip: var(--_button-start-flip);
+
+        content: "" / var(--_button-prev-label);
+        inset-inline-start: calc(
+          anchor(self-start) + var(--_button-inset) + var(--_inline-room)
+        );
+      }
+
+      &::scroll-button(inline-end) {
+        --_button-flip: var(--_button-end-flip);
+
+        content: "" / var(--_button-next-label);
+        inset-inline-end: calc(
+          anchor(self-end) + var(--_button-inset) + var(--_inline-room)
+        );
+      }
+
+      &:dir(rtl) {
+        --_button-end-flip: -1;
+        --_button-start-flip: 1;
+      }
+
+      &.ui-vertical {
+        &::scroll-button(inline-start),
+        &::scroll-button(inline-end) {
+          content: none;
+        }
+
+        &::scroll-button(block-start),
+        &::scroll-button(block-end) {
+          inset-inline-start: calc(anchor(center) - var(--_button-size) / 2);
+          rotate: 90deg;
+          translate: none;
+        }
+
+        &::scroll-button(block-start) {
+          --_button-flip: -1;
+
+          content: "" / var(--_button-prev-label);
+          inset-block-start: calc(
+            anchor(self-start) + var(--_button-inset) + var(--_block-room)
+          );
+        }
+
+        &::scroll-button(block-end) {
+          --_button-flip: 1;
+
+          content: "" / var(--_button-next-label);
+          inset-block-end: calc(
+            anchor(self-end) + var(--_button-inset) + var(--_block-room)
+          );
+          inset-block-start: auto;
+        }
+
+        &.ui-buttons-outside {
+          /* Firefox and Safari fallback */
+          @supports selector(::scroll-button(*)) {
+            margin-block: calc(
+              var(--_button-size) + var(--_button-inset) - var(--_block-room)
+            );
+            margin-inline: calc(-1 * var(--_inline-room));
+
+            &.ui-markers {
+              margin-inline-end: calc(
+                var(--_marker-size) + var(--_markers-gap) - var(--_inline-room)
+              );
+            }
+          }
+
+          &::scroll-button(block-start) {
+            inset-block-start: calc(
+              anchor(self-start) - var(--_button-size) - var(--_button-inset) +
+                var(--_block-room)
+            );
+          }
+
+          &::scroll-button(block-end) {
+            inset-block-end: calc(
+              anchor(self-end) - var(--_button-size) - var(--_button-inset) +
+                var(--_block-room)
+            );
+          }
+        }
+      }
+
+      &::scroll-button(inline-start):active,
+      &::scroll-button(inline-end):active,
+      &.ui-vertical::scroll-button(block-start):active,
+      &.ui-vertical::scroll-button(block-end):active {
+        --_button-scale: 0.94;
+      }
+
+      &::scroll-button(inline-start):disabled,
+      &::scroll-button(inline-end):disabled,
+      &.ui-vertical::scroll-button(block-start):disabled,
+      &.ui-vertical::scroll-button(block-end):disabled {
+        border-color: var(--_button-disabled-border-color);
+        cursor: default;
+        opacity: var(--_button-disabled-opacity);
+      }
+
+      &::scroll-button(*):focus-visible {
+        animation: ui-focus-ring var(--_duration) var(--_ease);
+        outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+          var(--ui-focus-ring-color);
+        outline-offset: var(--ui-focus-ring-offset);
+      }
+
+      &.ui-persistent-buttons {
+        --_button-disabled-opacity: 1;
+      }
+
+      /* Buttons outside the items */
+      &.ui-buttons-outside {
+        /* Firefox and Safari fallback */
+        @supports selector(::scroll-button(*)) {
+          margin-inline: calc(
+            var(--_button-size) + var(--_button-inset) - var(--_inline-room)
+          );
+        }
+
+        &::scroll-button(inline-start) {
+          inset-inline-start: calc(
+            anchor(self-start) - var(--_button-size) - var(--_button-inset) +
+              var(--_inline-room)
+          );
+        }
+
+        &::scroll-button(inline-end) {
+          inset-inline-end: calc(
+            anchor(self-end) - var(--_button-size) - var(--_button-inset) +
+              var(--_inline-room)
+          );
+        }
+      }
+    }
+
+    /* Markers */
+    &.ui-markers {
+      scroll-marker-group: after;
+
+      &::scroll-marker-group {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--_marker-gap);
+        justify-content: center;
+        margin-block-start: var(--_markers-gap);
+      }
+
+      & > *::scroll-marker {
+        background-clip: content-box;
+        background-color: var(--_marker-bg-color);
+        block-size: var(--_marker-size);
+        border-radius: var(--ui-radius-round);
+        box-sizing: border-box;
+        content: "" / var(--_marker-label) counter(ui-carousel-item);
+        cursor: pointer;
+        inline-size: var(--_marker-size);
+        outline: var(--ui-border-width) solid var(--_marker-border-color);
+        outline-offset: calc(-1 * (var(--ui-space-2) + var(--ui-border-width)));
+        padding: var(--ui-space-2);
+        transition:
+          background-color var(--_duration) var(--_ease),
+          outline-offset var(--_duration) var(--_ease),
+          padding var(--_duration) var(--_ease);
+      }
+
+      & > *::scroll-marker:target-current {
+        background-color: var(--_marker-selected-bg-color);
+        outline-color: var(--_marker-selected-bg-color);
+        outline-offset: calc(
+          -1 * (var(--_marker-selected-padding) + var(--ui-border-width))
+        );
+        padding: var(--_marker-selected-padding);
+      }
+
+      & > *::scroll-marker:focus-visible {
+        animation: ui-focus-ring var(--_duration) var(--_ease);
+        outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+          var(--ui-focus-ring-color);
+        outline-offset: var(--ui-focus-ring-offset);
+      }
+
+      @media (forced-colors: active) {
+        & > *::scroll-marker {
+          outline: var(--ui-border-width) solid ButtonText;
+          outline-offset: calc(
+            -1 * (var(--ui-space-2) + var(--ui-border-width))
+          );
+        }
+
+        & > *::scroll-marker:target-current {
+          background-color: SelectedItem;
+          outline-color: SelectedItem;
+        }
+      }
+    }
+
+    &.ui-vertical.ui-markers {
+      anchor-name: --ui-carousel;
+      anchor-scope: --ui-carousel;
+
+      @supports selector(::scroll-marker) {
+        margin-inline-end: calc(
+          var(--_marker-size) + var(--_markers-gap) - var(--_inline-room)
+        );
+      }
+
+      &::scroll-marker-group {
+        flex-direction: column;
+        inset-block-start: anchor(--ui-carousel center);
+        inset-inline-start: calc(
+          anchor(--ui-carousel end) + var(--_markers-gap) - var(--_inline-room)
+        );
+
+        margin: 0;
+        position: absolute;
+        translate: 0 -50%;
+      }
+    }
+
+    /* Firefox and Safari fallback */
+    @supports selector(::scroll-button(*)) {
+      &:is(:not(.ui-buttons-none), .ui-markers) {
+        scrollbar-width: none;
+      }
+    }
+  }
+}

package/css/components/checkbox.css

@@ -1,138 +1,34 @@
 @layer components.root {
-  label.ui-checkbox {
-    --_input-size: var(--size-4);
-
-    align-items: center;
-    color: var(--text-primary);
-    cursor: pointer;
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
-    line-height: 1.5;
-    transform: translateZ(0);
-    user-select: none;
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Required dot */
-    &:has(:invalid) {
-      .ui-label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Label */
-    .ui-label {
-      color: var(--text-primary);
-      font-size: var(--font-size-05);
-      grid-column: 2;
-      grid-row: 1;
-      position: relative;
-      padding-inline: 0 1ex;
-    }
-
-    /* End text */
-    :where(.ui-end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      grid-column: 2;
-      grid-row: 2;
-      line-height: 1.5;
-      z-index: 1;
-    }
-
-    /* Spread layout */
-    &.ui-spread {
-      align-items: center;
-      column-gap: var(--size-4);
-      grid-auto-flow: unset;
-      grid-template-columns: 1fr auto;
-      inline-size: 100%;
-
-      .ui-label {
-        font-weight: 600;
-        grid-column: 1;
-        grid-row: 1;
-        inline-size: fit-content;
-      }
-
-      input {
-        grid-column: 2;
-        grid-row: 1;
-      }
-
-      :where(.ui-end-text) {
-        grid-column: 1;
-        grid-row: 2;
-      }
-    }
-
-    /* Stacked layout */
-    &.ui-stack {
-      justify-items: center;
-      grid-auto-columns: unset;
-
-      .ui-label {
-        grid-column: 1/-1;
-        grid-row: 2;
-        margin-block-start: var(--size-1);
-        padding-inline: 1ex;
-
-        /* Required dot */
-        &::after {
-          inset: 0 -0.25ex auto auto;
-        }
-      }
-
-      .ui-end-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
-    }
-
+  :where(label.ui-checkbox) {
     /* Input */
     input[type="checkbox"] {
-      --_input-size: var(--size-4);
-
       appearance: none;
       aspect-ratio: 1;
-      background-color: var(--surface-default);
-      block-size: var(--_input-size);
-      border-radius: var(--radius-1);
-      border: 1px solid var(--border-color);
+      background-color: var(--ui-surface);
+      block-size: var(--_size);
+      border: var(--ui-field-border-width) solid
+        var(--ui-choice-border-color, var(--ui-field-border-color));
+      border-radius: var(--ui-radius-x-small);
       box-sizing: border-box;
       cursor: pointer;
       display: grid;
-      font-size: var(--_input-size);
-      inline-size: var(--_input-size);
+      font-size: var(--_size);
+      inline-size: var(--_size);
       margin: 0;
       padding: 0;
       place-items: center;
       position: relative;
+      transform-style: preserve-3d;
 
       &:checked,
       &:indeterminate {
-        background-color: var(--primary);
-        border-color: var(--primary);
+        background-color: var(--_accent);
+        border-color: var(--_accent);
       }
 
       /* Checkmark */
       &::after {
-        background-color: var(--primary-contrast);
+        background-color: var(--_on-accent);
         clip-path: polygon(
           15% 52%,
           40% 77%,
@@ -156,45 +52,18 @@
       &:indeterminate::after {
         clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
       }
-
-      &::before {
-        --highlight-size: 175%;
-      }
-    }
-
-    /* Sizes */
-    &.ui-small {
-      input[type="checkbox"] {
-        --_input-size: var(--size-3);
-      }
-    }
-
-    &.ui-large {
-      input[type="checkbox"] {
-        --_input-size: var(--size-5);
-      }
     }
 
     /* Validation */
-    &[data-invalid],
-    &:has(:user-invalid) {
-      --primary: var(--critical);
-
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-    }
-
-    /* Touch devices */
-    @media (pointer: coarse) {
-      input {
-        --_input-size: var(--size-4);
+    &:has([aria-invalid="true"], :user-invalid) {
+      input[type="checkbox"]:not(:checked, :indeterminate) {
+        border-color: var(--ui-invalid);
       }
     }
 
     @media (forced-colors: active) {
-      input {
-        border: 1px solid CanvasText;
+      input[type="checkbox"] {
+        border-color: CanvasText;
 
         &:checked,
         &:indeterminate {
@@ -205,6 +74,16 @@
             background-color: SelectedItemText;
           }
         }
+
+        &:is(:disabled, [aria-disabled="true"]) {
+          border-color: GrayText;
+
+          &:checked,
+          &:indeterminate {
+            background-color: GrayText;
+            border-color: GrayText;
+          }
+        }
       }
     }
   }