@lmvz-ds/components 0.35.2 → 0.36.1

package/collection/components/lmvz-select/lmvz-select.css

@@ -43,12 +43,9 @@
   /* Extra top space to accommodate the floating label */
 
   --lmvz-internal-select-floating-label-top-offset: 0.375rem;
-
-  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
-
   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
-  --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7);
   --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
@@ -63,6 +60,8 @@
   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
+
+  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
 }
 .select-wrapper {
   position: relative;
@@ -101,19 +100,20 @@ label.floating-label {
   font-weight: 500;
 }
 label > span[aria-hidden='true'],
-div[aria-hidden='true'] > span:first-child > span[aria-hidden='true'] {
+.select-trigger > span:first-child > span[aria-hidden='true'] {
   color: var(--lmvz-select-error-color);
   margin-left: 2px;
   display: inline-block;
   line-height: 0;
   vertical-align: middle;
 }
-/* Visual pill trigger */
-div[aria-hidden] {
+/* Combobox trigger — the accessible, interactive control (role="combobox") */
+.select-trigger {
   display: flex;
   align-items: center;
   gap: var(--lmvz-select-gap);
   height: 100%;
+  width: 100%;
   padding: 0 var(--lmvz-select-padding-x);
   border-radius: var(--lmvz-select-radius);
   background-color: var(--lmvz-select-bg);
@@ -124,26 +124,29 @@ div[aria-hidden] {
   z-index: 1;
   transition: border-color 0.15s ease;
 }
-:host(:not([disabled], [highlighted])) .select-wrapper:hover div[aria-hidden] {
+:host(:not([disabled], [highlighted], [error])) .select-wrapper:hover .select-trigger {
   border-color: var(--lmvz-select-border-color-hover);
 }
-:host([highlighted]) div[aria-hidden] {
+:host([error]) .select-trigger {
+  border-color: var(--lmvz-select-error-color);
+}
+:host([highlighted]) .select-trigger {
   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
   border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
-:host([highlighted]) div[aria-hidden] > span:first-child {
+:host([highlighted]) .select-trigger > span:first-child {
   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
 :host([highlighted]) label.floating-label {
   background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
   color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
-.select-wrapper:focus-within div[aria-hidden] {
+:host:has(:focus-visible) .select-trigger {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
 }
-div[aria-hidden] > span:first-child {
+.select-trigger > span:first-child {
   flex: 1 0 0;
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
@@ -151,36 +154,26 @@ div[aria-hidden] > span:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: left;
 }
 /* Active-selected text color: when a value is selected (not applicable in highlighted state) */
-:host(:not([highlighted])) .select-wrapper.has-value div[aria-hidden] > span:first-child {
+:host(:not([highlighted])) .select-wrapper.has-value .select-trigger > span:first-child {
   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
 }
-div[aria-hidden] > span:last-child {
+.select-trigger > span:last-child {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-div[aria-hidden] svg {
+.select-trigger svg {
   width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
   flex-shrink: 0;
 }
-/* Native select absolutely covers the trigger, invisible, intercepts clicks */
-select {
-  appearance: none;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 2;
-  border: none;
-  background: transparent;
-  margin: 0;
-  padding: 0;
+/* Native <option>/<optgroup> markup is only a data source for the internal listbox; never shown. */
+.lmvz-select-native-options {
+  display: none;
 }
 :host([disabled]) .select-wrapper {
   opacity: var(--lmvz-select-disabled-opacity);
@@ -188,22 +181,29 @@ select {
   cursor: not-allowed;
 }
 [role='status'] {
-  margin-top: 4px;
+  padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   padding-left: var(--lmvz-select-padding-x);
   font-size: var(--lmvz-select-label-font-size);
   color: var(--lmvz-select-helper-color);
   line-height: normal;
 }
+[role='alert'] {
+  padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  padding-left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  color: var(--lmvz-select-error-color);
+  line-height: normal;
+}
 :host([size='small']) {
   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
 }
-:host([size='small']) div[aria-hidden] > span:first-child {
+:host([size='small']) .select-trigger > span:first-child {
   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
-:host([size='small']) div[aria-hidden] svg {
+:host([size='small']) .select-trigger svg {
   width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
   height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
 }
@@ -213,10 +213,72 @@ select {
   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
-:host([size='large']) div[aria-hidden] > span:first-child {
+:host([size='large']) .select-trigger > span:first-child {
   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
 }
-:host([size='large']) div[aria-hidden] svg {
+:host([size='large']) .select-trigger svg {
   width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
+/*
+ * Option-list item styling for the `role="option"` elements rendered inside the
+ * `lmvz-popover` (containerRole="listbox") popup. The token set mirrors the states
+ * `lmvz-action-list` applies to its `<lmvz-button>`/`<button>` items (tertiary variant),
+ * so the listbox looks visually identical to an action-list item:
+ *   - default:  --lmvz-semantic-color-int-tertiary / --lmvz-semantic-color-int-on-tertiary
+ *   - hover:    --lmvz-semantic-color-int-tertiary-hover / --lmvz-semantic-color-int-on-tertiary-hover
+ *   - active:   --lmvz-semantic-color-int-tertiary-active / --lmvz-semantic-color-int-on-tertiary-active
+ *   - disabled: --lmvz-component-input-disabled-opacity (opacity, same token as lib-styles buttons fragment)
+ *   - focus:    --lmvz-ds-outline / --lmvz-ds-outline-offset (same as lib-styles buttons fragment focus-visible)
+ * "selected" has no action-list equivalent (action-list is a menu, not a listbox), so it
+ * reuses this component's own highlighted-state tokens for consistency with the trigger.
+ * "active" (`data-active="true"`) is this component's own addition: since the combobox uses
+ * the activedescendant model, the highlighted option never receives real DOM focus, so
+ * `:hover`/`:focus-visible` cannot indicate it to sighted keyboard users — `data-active` is
+ * set by the host from `ListboxController`'s active id and styled the same as hover/focus.
+ */
+.lmvz-select-option {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
+
+  display: flex;
+  align-items: center;
+  gap: var(--lmvz-select-gap);
+  padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  border-radius: var(--lmvz-semantic-border-radius-md, 6px);
+  background-color: var(--lmvz-select-option-background);
+  color: var(--lmvz-select-option-color);
+  cursor: pointer;
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+.lmvz-select-option:not([aria-disabled='true']):hover {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+}
+.lmvz-select-option:not([aria-disabled='true']):active {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+}
+.lmvz-select-option:focus-visible {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  position: relative;
+  z-index: 1;
+}
+.lmvz-select-option[data-active='true']:not([aria-disabled='true']) {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
+}
+.lmvz-select-option[aria-selected='true'] {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
+}
+.lmvz-select-option[aria-disabled='true'] {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+}