opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/list.css

@@ -1,343 +1,460 @@
-@layer components.extended {
-  /*
-Lists meant to be used stand-alone or as part of Select elements
-
-  Intended use-case:
-  - ul.ui-list > li
-  - .ui-select > .ui-list > option
-*/
-  :where(.ui-list) {
-    --_bg-color: var(--surface-filled);
-    --_bg-color-hover: oklch(from var(--primary) l c h / 15%);
-
-    background-color: var(--_bg-color);
-    color: var(--text-primary);
-    list-style: none;
-    padding: var(--size-2) 0;
-
-    @media (pointer: coarse) {
-      &,
-      * {
-        user-select: none;
-      }
-    }
-
-    /* Background color */
-    &.ui-transparent {
-      --_bg-color: transparent;
-    }
-
-    &.ui-default {
-      --_bg-color: var(--surface-default);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-    }
-
-    /* Borders on all list items */
-    &.ui-bordered {
-      :where(li + li, option + option) {
-        margin-block-start: var(--size-3);
-
-        &::before {
-          block-size: 1px;
-          border-block-start: 1px solid var(--border-color);
-          content: "";
-          display: block;
-          inline-size: 100%;
-          inset: calc(-1 * var(--size-2)) 0 auto 0;
-          position: absolute;
-          visibility: visible;
-          /* override select > option:before style */
-        }
-      }
-    }
-
-    /* Dense - less gaps and spacing */
-    &.ui-dense {
-      :where(li, option) {
-        gap: var(--size-2);
-        min-block-size: var(--size-7);
-        padding: var(--size-1) var(--size-2);
-
-        &.ui-border-top {
-          margin-block-start: var(--size-2);
-
-          &::before {
-            inset: calc(-1 * var(--size-1)) 0 auto 0;
-          }
-        }
-
-        /* Clickable list item */
-        &:has(> a, > button, > label) {
-          min-block-size: auto;
-          padding: 0;
-        }
-
-        & > :where(a, button, label) {
-          gap: var(--size-2);
-          min-block-size: var(--size-7);
-          padding: var(--size-1) var(--size-2);
-        }
-
-        /* Checkbox / Radio */
-        & > label {
-          .ui-end {
-            padding-inline-end: 0.125rem;
-          }
-
-          &:where(.ui-checkbox, .ui-radio) {
-            --_input-size: var(--size-3);
-          }
-        }
-
-        /* Leading and trailing content */
-        .ui-start,
-        .ui-end {
-          .ui-avatar {
-            max-inline-size: var(--size-6);
-          }
-
-          .ui-icon-button,
-          svg {
-            max-inline-size: var(--size-4);
-          }
-
-          .ui-checkbox,
-          .ui-radio {
-            --_input-size: var(--size-3);
-          }
-        }
-      }
-    }
-
-    /* Gutterless */
-    &.ui-gutterless {
-      :where(li, option) {
-        padding-inline: 0;
-
-        & > :where(a, button, label) {
-          padding-inline: 0;
-        }
-      }
-    }
-
-    /* List item */
-    :where(li, option, [role="group"] > label) {
-      align-items: center;
-      background-color: var(--_bg-color);
-      display: flex;
-      font-size: var(--font-size-05);
-      gap: var(--size-3);
-      isolation: isolate;
-      min-block-size: 40px;
-      padding: var(--size-2) var(--size-3);
-      position: relative;
-
-      &::before {
-        display: none;
-        /* removing checkmark from option */
-      }
-
-      * {
-        font-size: inherit;
-      }
-
-      /* Clickable list item */
-      &:has(> a, > button, > label) {
-        background: transparent;
-        display: block;
-        min-block-size: auto;
-        padding: 0;
-
-        &[aria-selected="true"] > :where(a, button, label),
-        &[aria-selected="true"],
-        &:has(> [aria-current="page"]) > :where(a, button, label) {
-          background-color: var(--_bg-color-hover);
-        }
-      }
-
-      /* Select option */
-      &:where(option) {
-        align-items: center;
-        background-color: var(--_bg-color);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        gap: var(--size-3);
-        inline-size: 100%;
-        margin: 0;
-        min-block-size: 40px;
-        padding: var(--size-2) var(--size-3);
-        text-align: start;
-        text-decoration: none;
-        z-index: 0;
-
-        &:hover {
-          background-color: var(--_bg-color-hover);
-        }
-
-        &[aria-selected="true"] {
-          background-color: var(--_bg-color-hover);
-          color: var(--primary);
-        }
-
-        &:checked {
-          background-color: oklch(from var(--primary) l c h / 30%);
-        }
-      }
-
-      & > a,
-      & > button,
-      & > label {
-        align-items: center;
-        background-color: var(--_bg-color);
-        color: inherit;
-        cursor: pointer;
-        display: flex;
-        gap: var(--size-3);
-        inline-size: 100%;
-        margin: 0;
-        min-block-size: 40px;
-        outline-offset: -3px;
-        padding: var(--size-2) var(--size-3);
-        text-align: start;
-        text-decoration: none;
-        z-index: 0;
-
-        &:hover {
-          background-color: var(--_bg-color-hover);
-        }
-
-        &[aria-selected="true"],
-        &[aria-current="page"] {
-          background-color: var(--_bg-color-hover);
-        }
-      }
-
-      /* Checkbox / Radio / Switch */
-      & > label {
-        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
-          display: flex;
-        }
-
-        .ui-end {
-          padding-inline-end: var(--size-1);
-        }
-
-        &:where(.ui-checkbox, .ui-radio) {
-          inline-size: 100%;
-        }
-
-        /* Switches look comically big in lists, so it's better to use a smaller variant  */
-        &.ui-switch {
-          --_dot-size: 0.75rem;
-          --_track-height: var(--size-4);
-          --_track-width: 2.5rem;
-        }
-      }
-
-      /* Video */
-      &:has(video) {
-        padding: 0.75rem var(--size-3) 0.75rem 0;
-      }
-
-      /* Border between list items */
-      &.ui-border-top {
-        margin-block-start: var(--size-3);
-
-        &::before {
-          block-size: 1px;
-          border-block-start: 1px solid var(--border-color);
-          content: "";
-          display: block;
-          inline-size: 100%;
-          inset: calc(-1 * var(--size-2)) 0 auto 0;
-          position: absolute;
-        }
-      }
-
-      /* Text */
-      .ui-text {
-        flex: 1;
-        line-height: 1.6;
-
-        :where(h1, h2, h3, h4, h5, h6, p, span) {
-          color: inherit;
-          font-weight: 400;
-        }
-
-        p + p {
-          color: var(--text-muted);
-          font-size: var(--font-size-0);
-        }
-      }
-
-      /* Leading content */
-      .ui-start {
-        align-items: center;
-        align-self: center;
-        display: grid;
-        z-index: 1;
-
-        &:has(svg) {
-          max-inline-size: var(--size-5);
-        }
-
-        svg {
-          padding-block-start: 0.125rem;
-        }
-
-        img {
-          aspect-ratio: 1;
-          inline-size: 56px;
-          object-fit: cover;
-        }
-
-        video {
-          aspect-ratio: 16/9;
-          block-size: 64px;
-          object-fit: cover;
-        }
-      }
-
-      /* Trailing content */
-      .ui-end {
-        align-items: center;
-        display: flex;
-        font-size: var(--font-size-0);
-        text-align: end;
-        z-index: 1;
-
-        &:not(:has(a, button, input)) {
-          pointer-events: none;
-        }
-
-        kbd {
-          background-color: transparent;
-          border: 0;
-          color: inherit;
-          opacity: 0.6;
-        }
-
-        svg {
-          inline-size: 100%;
-          max-inline-size: var(--size-5);
-        }
-      }
-
-      /* Inset */
-      &.ui-inset {
-        .ui-text {
-          padding-inline-start: calc(var(--size-5) + var(--size-3));
-        }
-
-        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
-        .ui-start {
-          display: none;
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  /*
+Lists meant to be used stand-alone or as part of Select elements
+
+  Intended use-case:
+  - ul.ui-list > li
+  - .ui-select > .ui-list > option
+*/
+  :where(.ui-list, .ui-menu) {
+    --_bg-color: var(--ui-surface-filled);
+    --_description-text-color: var(--ui-text-subtle);
+    --_divider-border-color: var(--ui-border-color);
+    --_hover-bg-color: oklch(
+      from var(--ui-primary) l c h / var(--ui-state-hover-alpha-accent)
+    );
+    --_item-gap: var(--ui-space-3);
+    --_item-padding-inline: var(
+      --ui-list-item-padding-inline,
+      var(--ui-space-3)
+    );
+    --_radius: var(--ui-radius);
+    --_selected-bg-color: var(
+      --ui-selected,
+      oklch(from var(--ui-primary) l c h / var(--ui-state-active-alpha-accent))
+    );
+
+    @container style(--ui-contrast: more) {
+      --_selected-bg-color: var(--ui-selected, var(--_hover-bg-color));
+    }
+
+    --_selected-indicator-bg-color: var(--ui-selected-strong);
+    --_selected-indicator-size: var(--ui-border-width-thick);
+    --_selected-shadow: inset var(--_selected-indicator-size) 0 0
+      var(--_selected-indicator-bg-color);
+    --_separator-gap: var(--ui-space-3);
+    --_start-image-size: 3.5rem;
+    --_start-size: var(--ui-icon-size);
+    --_start-video-size: 4rem;
+
+    background-color: var(--_bg-color);
+    color: var(--ui-text-strong);
+    font-weight: var(--ui-font-weight-normal);
+    list-style: none;
+    padding-block: var(--ui-space-2);
+    padding-inline: 0;
+
+    &:not(.ui-menu, .ui-tonal, .ui-transparent, select .ui-list) {
+      --ui-border-color: var(--ui-border-color-on-filled);
+      --ui-field-border-color: var(--ui-field-border-color-on-filled);
+    }
+
+    &.ui-list {
+      border-radius: var(--_radius);
+      overflow: clip;
+
+      :where(.ui-accordion, .ui-card, .ui-dialog) > & {
+        --_radius: 0;
+      }
+    }
+
+    &:dir(rtl) {
+      --_selected-shadow: inset calc(-1 * var(--_selected-indicator-size)) 0 0
+        var(--_selected-indicator-bg-color);
+    }
+
+    @media (pointer: coarse) {
+      & > :where(li, option) > :where(a, button, label) {
+        -webkit-user-select: none;
+        user-select: none;
+      }
+    }
+
+    /* Background color */
+    &.ui-transparent {
+      --_bg-color: transparent;
+    }
+
+    &.ui-tonal {
+      --_bg-color: var(--ui-surface-tonal);
+      --_divider-border-color: color-mix(
+        in oklch,
+        var(--ui-border-color),
+        var(--ui-text-strong) 20%
+      );
+    }
+
+    /* Borders on all list items */
+    /* Border between list items */
+    &.ui-bordered > :where(li + li, option + option),
+    &.ui-bordered > :where([role="group"], optgroup) > :where(option + option),
+    & > :where(li, option).ui-border-top,
+    &
+      > :where([role="group"], optgroup)
+      > :where(label, legend, option).ui-border-top {
+      margin-block-start: var(--_separator-gap);
+
+      &::before {
+        border-block-start: var(--ui-border-width) solid
+          var(--_divider-border-color);
+        content: "";
+        display: block;
+        inset-block: calc(var(--_separator-gap) / -2) auto;
+        inset-inline: 0;
+        position: absolute;
+        visibility: visible;
+        /* override select > option:before style */
+      }
+    }
+
+    /* Dense - less gaps and spacing */
+    &.ui-dense {
+      --_item-gap: var(--ui-space-2);
+      --_separator-gap: var(--ui-space-2);
+      --_start-size: var(--ui-icon-size-small);
+
+      & > :where(li, option),
+      & > :where([role="group"], optgroup) > :where(label, legend, option) {
+        min-block-size: var(--ui-control-size-small);
+        padding-block: var(--ui-space-1);
+        padding-inline: var(--_item-padding-inline);
+
+        /* Clickable list item */
+        &:has(> a, > button, > label) {
+          min-block-size: auto;
+          padding: 0;
+        }
+
+        & > :where(a, button, label) {
+          min-block-size: var(--ui-control-size-small);
+          padding-block: var(--ui-space-1);
+          padding-inline: var(--_item-padding-inline);
+        }
+
+        /* Checkbox / Radio */
+        & > label > .ui-end {
+          padding-inline-end: calc(var(--ui-space-1) / 2);
+        }
+
+        /* Leading and trailing content */
+        & > :is(.ui-start, .ui-end),
+        & > :where(a, button, label) > :is(.ui-start, .ui-end) {
+          .ui-avatar {
+            max-inline-size: var(--ui-space-6);
+          }
+
+          .ui-button:has(> svg:only-child),
+          svg {
+            max-inline-size: var(--_start-size);
+          }
+        }
+      }
+    }
+
+    /* Gutterless */
+    &.ui-flush {
+      & > :where(li, option),
+      & > :where([role="group"], optgroup) > :where(option) {
+        padding-inline: 0;
+
+        & > :where(a, button, label) {
+          padding-inline: 0;
+        }
+      }
+    }
+
+    /* List item */
+    & > :where(li, option),
+    & > :where([role="group"], optgroup) > :where(label, legend, option) {
+      align-items: center;
+      background-color: var(--_bg-color);
+      display: flex;
+      font-size: var(--ui-font-size-small);
+      gap: var(--_item-gap);
+      isolation: isolate;
+      min-block-size: var(--ui-control-size);
+      padding-block: var(--ui-space-2);
+      padding-inline: var(--_item-padding-inline);
+      position: relative;
+
+      &::before {
+        display: none;
+        /* removing checkmark from option */
+      }
+
+      /* Clickable list item */
+      &:has(> a, > button, > label) {
+        background: transparent;
+        display: block;
+        min-block-size: auto;
+        padding: 0;
+
+        &:where([role="option"])[aria-selected="true"]
+          > :where(a, button, label),
+        &:where([role="option"])[aria-selected="true"],
+        &:has(> [aria-current="page"]) > :where(a, button, label) {
+          background-color: var(--_selected-bg-color);
+          box-shadow: var(--_selected-shadow);
+          color: var(--ui-on-selected, currentColor);
+          --_description-text-color: var(
+            --ui-on-selected,
+            var(--ui-text-subtle)
+          );
+        }
+      }
+
+      /* Select option */
+      &:where(option) {
+        align-items: center;
+        background-color: var(--_bg-color);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        gap: var(--_item-gap);
+        inline-size: 100%;
+        margin: 0;
+        min-block-size: var(--ui-control-size);
+        padding-block: var(--ui-space-2);
+        padding-inline: var(--_item-padding-inline);
+        text-align: start;
+        text-decoration: none;
+        z-index: 0;
+
+        @media (hover: hover) {
+          &:hover {
+            background-color: var(--_hover-bg-color);
+          }
+        }
+
+        &[aria-selected="true"] {
+          background-color: var(--_selected-bg-color);
+          box-shadow: var(--_selected-shadow);
+          color: var(--ui-on-selected, var(--ui-primary-text));
+          --_description-text-color: var(
+            --ui-on-selected,
+            var(--ui-text-subtle)
+          );
+        }
+
+        &:checked {
+          background-color: var(--_selected-bg-color);
+          box-shadow: var(--_selected-shadow);
+          color: var(--ui-on-selected, currentColor);
+          --_description-text-color: var(
+            --ui-on-selected,
+            var(--ui-text-subtle)
+          );
+        }
+      }
+
+      & > a,
+      & > button,
+      & > label {
+        align-items: center;
+        background-color: var(--_bg-color);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        font-weight: inherit;
+        gap: var(--_item-gap);
+        inline-size: 100%;
+        margin: 0;
+        min-block-size: var(--ui-control-size);
+        outline-offset: var(--ui-focus-ring-inset);
+        padding-block: var(--ui-space-2);
+        padding-inline: var(--_item-padding-inline);
+        text-align: start;
+        text-decoration: none;
+        z-index: 0;
+
+        @media (hover: hover) {
+          &:hover {
+            background-color: var(--_hover-bg-color);
+          }
+        }
+
+        &[aria-current="page"] {
+          background-color: var(--_selected-bg-color);
+          box-shadow: var(--_selected-shadow);
+          color: var(--ui-on-selected, currentColor);
+          --_description-text-color: var(
+            --ui-on-selected,
+            var(--ui-text-subtle)
+          );
+        }
+      }
+
+      & > :where(a, button):is([disabled], [aria-disabled="true"]) {
+        cursor: not-allowed;
+        opacity: var(--ui-disabled-opacity);
+
+        @media (hover: hover) {
+          &:hover {
+            background-color: var(--_bg-color);
+          }
+        }
+      }
+
+      /* Checkbox / Radio / Switch */
+      & > label {
+        &:where(.ui-checkbox, .ui-radio, .ui-switch) {
+          display: flex;
+        }
+
+        & > .ui-end {
+          padding-inline-end: var(--ui-space-1);
+        }
+
+        &:where(.ui-checkbox, .ui-radio) {
+          inline-size: 100%;
+        }
+      }
+
+      /* Video */
+      &:has(video) {
+        padding-block: calc(var(--ui-space-2) * 1.5);
+        padding-inline: 0 var(--ui-space-3);
+      }
+
+      /* Text */
+      & > .ui-text,
+      & > :where(a, button, label) > .ui-text {
+        flex: 1;
+        font-size: inherit;
+        line-height: var(--ui-line-height);
+        min-inline-size: 0;
+
+        :where(h1, h2, h3, h4, h5, h6, p, span) {
+          color: inherit;
+          font-size: inherit;
+          font-weight: inherit;
+          margin: 0;
+        }
+
+        p + p {
+          color: var(--_description-text-color);
+          font-size: var(--ui-font-size-caption);
+        }
+      }
+
+      /* Leading content */
+      & > .ui-start,
+      & > :where(a, button, label) > .ui-start {
+        align-items: center;
+        align-self: center;
+        display: grid;
+        z-index: 1;
+
+        &:has(> svg) {
+          max-inline-size: var(--_start-size);
+        }
+
+        & > svg {
+          padding-block-start: calc(var(--ui-space-1) / 2);
+        }
+
+        img {
+          aspect-ratio: 1;
+          inline-size: var(--_start-image-size);
+          object-fit: cover;
+        }
+
+        video {
+          aspect-ratio: 16/9;
+          block-size: var(--_start-video-size);
+          object-fit: cover;
+        }
+      }
+
+      /* Trailing content */
+      & > .ui-end,
+      & > :where(a, button, label) > .ui-end {
+        align-items: center;
+        display: flex;
+        font-size: var(--ui-font-size-caption);
+        text-align: end;
+        z-index: 1;
+
+        &:not(
+          :has(a, button, input, label, select, summary, textarea, [tabindex])
+        ) {
+          pointer-events: none;
+        }
+
+        kbd {
+          background-color: transparent;
+          border: 0;
+          color: inherit;
+          font-family: var(--ui-font-code);
+          opacity: 0.7;
+          padding: 0;
+
+          @container style(--ui-contrast: more) {
+            opacity: 1;
+          }
+        }
+
+        & > svg {
+          inline-size: 100%;
+          max-inline-size: var(--_start-size);
+        }
+      }
+
+      /* Inset */
+      &.ui-inset {
+        & > .ui-text,
+        & > :where(a, button, label) > .ui-text {
+          padding-inline-start: calc(var(--_start-size) + var(--_item-gap));
+        }
+
+        /* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
+        & > .ui-start,
+        & > :where(a, button, label) > .ui-start {
+          display: none;
+        }
+      }
+
+      @media (forced-colors: active) {
+        &:where(option, [role="option"])[aria-selected="true"],
+        &:where([role="option"])[aria-selected="true"] > :is(a, button, label),
+        &:checked,
+        & > :is(a, button, label)[aria-current="page"] {
+          background-color: SelectedItem;
+          color: SelectedItemText;
+          forced-color-adjust: none;
+        }
+      }
+    }
+  }
+}
+
+@layer components.root {
+  :where(
+    :is(.ui-list, .ui-menu).ui-dense > :where(li, option),
+    :is(.ui-list, .ui-menu).ui-dense
+      > :where([role="group"], optgroup)
+      > :where(label, legend, option)
+  ) {
+    & > :where(label.ui-checkbox, label.ui-radio),
+    & > :where(.ui-start, .ui-end) :where(.ui-checkbox, .ui-radio),
+    &
+      > :where(a, button, label)
+      > :where(.ui-start, .ui-end)
+      :where(.ui-checkbox, .ui-radio) {
+      --ui-choice-size: var(--ui-choice-size-small);
+    }
+  }
+
+  /* Switches look comically big in lists, so it's better to use a smaller variant  */
+  :where(
+      :is(.ui-list, .ui-menu) > :where(li, option),
+      :is(.ui-list, .ui-menu)
+        > :where([role="group"], optgroup)
+        > :where(label, legend, option)
+    )
+    > :where(label.ui-switch) {
+    --ui-switch-thumb-size: var(--ui-switch-thumb-size-small);
+    --ui-switch-track-block-size: var(--ui-switch-track-block-size-small);
+    --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-small);
+  }
+}