@plexui/styles 0.0.0-stage → 0.1.0

package/dist/es/components/Select/Select.module.css

@@ -0,0 +1,338 @@
+@layer components {/* =============================================
+  Custom Select
+============================================= */.Menu {
+  /* Top-level selector needs to exist */
+}.MenuList {
+  z-index: 50;
+  /* Default to the width of the trigger */
+  width: var(--select-list-width, var(--radix-popover-trigger-width));
+  min-width: var(--select-list-min-width, var(--radix-popover-trigger-width));
+  max-width: var(--select-list-max-width, none);
+  border-radius: var(--menu-radius);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  font-size: var(--menu-font-size);
+  line-height: var(--menu-line-height);
+  /* The transform-origin computed from the content and arrow positions/offsets */
+  transform-origin: var(--radix-popover-content-transform-origin);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  will-change: opacity, transform;
+}
+
+  /* Animation states applied to a wrapping parent */
+  .Menu[data-entering] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  .Menu[data-entering-active] .MenuList,
+  .Menu[data-entering][data-interrupted] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: 0.35s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  .Menu[data-exiting] .MenuList {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .Menu[data-exiting-active] .MenuList,
+  .Menu[data-exiting][data-interrupted] .MenuList {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: 0.2s;
+    transition-property: opacity, transform;
+    transition-timing-function: var(--cubic-exit);
+  }.MenuInner {
+  display: flex;
+  flex-direction: column;
+  /* The remaining height between the trigger and the boundary edge */
+  max-height: min(
+    var(--select-list-max-height, 400px),
+    var(--radix-popover-content-available-height)
+  );
+}
+
+  .MenuInner:focus {
+    outline: 0;
+  }/* =============================================
+  Options
+============================================= */.OptionsList {
+  overflow: auto;
+  flex: 1;
+  padding: var(--menu-gutter);
+}
+
+  /* Focused without search: the highlighted option shows where the keys go */
+  .OptionsList:focus {
+    outline: 0;
+  }.Option {
+  position: relative;
+  padding: var(--menu-item-padding);
+  cursor: pointer;
+  overflow-wrap: anywhere;
+  /* When keyboard navigation snaps item into scrollable view, ensure 20px of spacing to show additional items below */
+  scroll-margin: 15px 0;
+}
+
+  .Option::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    background: var(--menu-item-background-color);
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+
+  .Option[data-selected] {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  /* Options with a description automatically keep their title semibold in
+     every state (highlighted, selected, idle). This is the "item + subtitle"
+     pattern — don't make consumers (or AI generating demos) remember to pass
+     `optionClassName="font-semibold"`. OptionDescription's own rule below
+     keeps the description text at normal weight. */
+  .Option:has(.OptionDescription) {
+    font-weight: var(--font-weight-semibold);
+  }
+    .Option[data-highlight]::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .Option[data-highlight]:active::before {
+      transform: scale(var(--scale, 0.98));
+    }
+
+  .Option[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+    .Option[data-disabled]::before {
+      display: none;
+    }/* Option layout — three-column flex row so title+description stack as a
+   leading group, and the indicator (start or end) sits as a dedicated
+   trailing/leading column. This is what makes description never leak under
+   the end-position checkmark column. Do not inline indicators inside
+   `.OptionInner` again — it breaks the layout contract consumers rely on. */.PressableInner {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--menu-item-gap);
+}.OptionLeading {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+}.OptionInner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--menu-item-gap);
+}/* End-position indicator gets pushed against the right edge of PressableInner.
+   Start-position sits at the natural first column. */.PressableInner > .OptionIndicatorSlot[data-position="end"] {
+  margin-left: auto;
+}.OptionCheck {
+  display: block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}.OptionIndicatorSlot {
+  display: flex;
+  align-items: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 16px;
+  /* Follow the title's first line box, independently of description height. */
+  height: 1lh;
+}.OptionDescription {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-secondary);
+}/* Option group: the `group` around a heading and its rows. No box of its own:
+   a plain block in the list's block flow, with no padding or border, so the
+   rows sit exactly where they would as the list's own children and the
+   heading's top margin collapses through it. The heading always opens its
+   group, so "first section" is the group's position, not the heading's. */.OptionGroup {
+  display: block;
+}/* Group heading — a section label, not an option. Same size and weight as the
+   options made it read as a disabled row, so it carries its own type level:
+   smaller, semibold, secondary color. A rule between sections and the extra
+   space above it do the separating, the way a grouped menu does it on GitHub
+   (Sort by / Order). The rule bleeds past the list gutter to the popover edge
+   and the first section never gets one. */.OptionGroupHeading {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--menu-item-gap);
+  padding: var(--menu-item-padding);
+  margin-top: calc(var(--spacing) * 2);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+}
+
+  .OptionGroup:not(:first-child) > .OptionGroupHeading::before {
+    position: absolute;
+    top: calc(calc(var(--spacing) * 1) * -1);
+    inset-inline: calc(var(--menu-gutter) * -1);
+    border-top: 1px solid var(--menu-separator-background-color);
+    content: "";
+  }
+
+  .OptionGroup:first-child > .OptionGroupHeading {
+    margin-top: 0;
+  }.OptionHardLimitHeading {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--menu-item-gap);
+  padding: var(--menu-item-padding);
+  color: var(--color-text-secondary);
+}.OptionsLimit {
+  color: var(--link-primary-text-color);
+  font-weight: var(--font-weight-medium);
+}/* =============================================
+  Action
+============================================= */.Action {
+  position: relative;
+  padding: var(--menu-item-padding);
+  border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+  /* Background shape */
+  .Action::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    content: "";
+    opacity: 0;
+    transform: scale(var(--scale, 0.98));
+    transition-duration: 0.15s;
+    transition-property: opacity, background-color, transform;
+    transition-timing-function: var(--cubic-enter);
+    will-change: opacity, transform;
+  }
+  .Action::before, :where([data-theme="light"]) .Action::before {
+background: var(--gray-100);
+}
+  :where([data-theme="dark"]) .Action::before {
+background: var(--gray-25);
+}
+
+  /* Focus ring */
+  .Action::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
+    content: "";
+    pointer-events: none;
+    transition-duration: 0.15s;
+    transition-property: box-shadow, transform;
+    transition-timing-function: var(--cubic-enter);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .Action:hover::before {
+      opacity: 1;
+      transform: scale(1);
+    }
+}
+
+  .Action:focus {
+    outline: none;
+  }
+
+  .Action:focus-visible::after {
+    box-shadow: 0 0 0 2px var(--color-ring);
+  }
+
+  .Action:active::before,
+  .Action:active::after {
+    transform: scale(var(--scale, 0.98));
+  }
+
+  .Action svg {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }.ActionInner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--menu-item-gap);
+}.ActionsContainer {
+  position: relative;
+  padding: var(--menu-gutter);
+  border-top: 1px solid var(--menu-separator-background-color);
+}
+
+  .ActionsContainer::before {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    width: 100%;
+    height: 9px;
+    margin-bottom: 1px;
+    background: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+    pointer-events: none;
+  }/* =============================================
+  Search
+============================================= */.Search {
+  position: relative;
+  padding: var(--menu-gutter) var(--menu-gutter) 0;
+}/* Override fill for Search icon to apply fill-secondary class correctly *//* Need !important to override fill="currentColor" attribute in SVG path *//* Target SVG with fill prop and its path children */.Search svg[fill],
+.Search svg[fill] path {
+  fill: var(--color-text-secondary) !important;
+}/* Also target by class for fallback */.Search svg.fill-secondary,
+.Search svg.fill-secondary path {
+  fill: var(--color-text-secondary) !important;
+}.SearchEmpty {
+  padding: var(--menu-gutter);
+  margin: calc(var(--spacing) * 4) 0;
+}
+
+  .SearchEmpty[data-text-only] {
+    color: var(--color-text-secondary);
+    text-align: center;
+  }/* The hidden input that submits and validates the value. Its own class, not
+   Tailwind utilities: an app that does not generate `sr-only` (or orders
+   `w-full` after it) would otherwise lay it out at full width next to the
+   trigger text. Full width and no height at the bottom of the trigger, so the
+   browser's "required" bubble points at the control. */.FormInput {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  pointer-events: none;
+}
+}