@frame-ui-ng/components 0.1.0-beta.0 → 0.2.0-beta.0

package/radio-group/src/styles/radio-group.css

@@ -1,137 +1,146 @@
-@import './_vars.css';
-
-[frRadioGroup],
-frame-radio-group {
-  display: grid;
-  gap: var(--frame-radio-group-gap);
-  min-width: 0;
-}
-
-[frRadioGroup][data-orientation='horizontal'],
-frame-radio-group[data-orientation='horizontal'] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--frame-radio-group-horizontal-gap);
-}
-
-[frRadioGroup][data-disabled],
-frame-radio-group[data-disabled] {
-  cursor: not-allowed;
-}
-
-[frRadioGroup][data-variant='cards'],
-frame-radio-group[data-variant='cards'] {
-  gap: var(--frame-radio-group-card-gap);
-}
-
-[frRadioGroupItem] {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-grid;
-  place-content: center;
-  flex: 0 0 auto;
-  inline-size: var(--frame-radio-group-item-size);
-  block-size: var(--frame-radio-group-item-size);
-  margin: 0;
-  border: 1px solid var(--frame-radio-group-item-border);
-  border-radius: 999px;
-  background: var(--frame-radio-group-item-bg);
-  color: var(--frame-radio-group-item-color);
-  cursor: pointer;
-  outline: none;
-  vertical-align: middle;
-  transition:
-    background-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
-    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
-    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
-    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
-}
-
-[frRadioGroupItem]::before {
-  content: '';
-  inline-size: var(--frame-radio-group-item-dot-size);
-  block-size: var(--frame-radio-group-item-dot-size);
-  border-radius: 999px;
-  background: currentColor;
-  transform: scale(0);
-  transition: transform 120ms ease;
-}
-
-[frRadioGroupItem]:where(:not(:disabled)):hover {
-  border-color: var(--frame-radio-group-item-hover-border);
-}
-
-[frRadioGroupItem]:focus-visible {
-  box-shadow: var(--frame-radio-group-item-focus-shadow);
-}
-
-[frRadioGroupItem]:checked {
-  border-color: var(--frame-radio-group-item-checked-border);
-  background: var(--frame-radio-group-item-checked-bg);
-}
-
-[frRadioGroupItem]:checked::before {
-  transform: scale(1);
-}
-
-[frRadioGroupItem]:disabled {
-  cursor: not-allowed;
-  opacity: var(--frame-radio-group-item-disabled-opacity);
-}
-
-[frRadioGroupField] {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--frame-field-gap);
-  min-width: 0;
-}
-
-[frRadioGroupItem][aria-invalid='true'],
-[frRadioGroupItem].ng-invalid.ng-touched,
-[frRadioGroupItem].ng-invalid.ng-dirty {
-  border-color: var(--frame-radio-group-item-invalid-border);
-}
-
-[frRadioGroupCard] {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--frame-radio-group-card-gap);
-  min-width: 0;
-  padding: var(--frame-radio-group-card-padding);
-  border: 1px solid var(--frame-radio-group-card-border);
-  border-radius: var(--frame-radio-group-card-radius);
-  background: var(--frame-radio-group-card-bg);
-  cursor: pointer;
-  transition:
-    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
-    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
-    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
-}
-
-[frRadioGroupCard]:has([frRadioGroupCardMeta]) {
-  [frFieldContent] {
-    flex-grow: 1;
-  }
-}
-
-[frRadioGroupCard]:has([frRadioGroupItem]:where(:not(:disabled)):hover) {
-  border-color: var(--frame-radio-group-card-hover-border);
-}
-
-[frRadioGroupCard]:has([frRadioGroupItem]:checked) {
-  border-color: var(--frame-radio-group-card-checked-border);
-  box-shadow: var(--frame-radio-group-card-checked-shadow);
-}
-
-[frRadioGroupCard]:has([frRadioGroupItem]:disabled) {
-  cursor: not-allowed;
-  opacity: var(--frame-radio-group-card-disabled-opacity);
-}
-
-[frRadioGroupCardMeta] {
-  color: var(--frame-radio-group-card-meta-color);
-  font-size: var(--frame-radio-group-card-meta-font-size);
-  font-weight: var(--frame-radio-group-card-meta-font-weight);
-  white-space: nowrap;
-}
+@import './_vars.css';
+
+[frRadioGroup],
+frame-radio-group {
+  display: grid;
+  gap: var(--frame-radio-group-gap);
+  min-width: 0;
+}
+
+[frRadioGroup][data-orientation='horizontal'],
+frame-radio-group[data-orientation='horizontal'] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-radio-group-horizontal-gap);
+}
+
+[frRadioGroup][data-disabled],
+frame-radio-group[data-disabled] {
+  cursor: not-allowed;
+}
+
+[frRadioGroup][data-variant='cards'],
+frame-radio-group[data-variant='cards'] {
+  gap: var(--frame-radio-group-card-gap);
+}
+
+[frRadioGroupItem] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--frame-radio-group-item-size);
+  block-size: var(--frame-radio-group-item-size);
+  margin: 0;
+  border: 1px solid var(--frame-radio-group-item-border);
+  border-radius: 999px;
+  background: var(--frame-radio-group-item-bg);
+  color: var(--frame-radio-group-item-color);
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  transition:
+    background-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    transform var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
+}
+
+[frRadioGroupItem]::before {
+  content: '';
+  inline-size: var(--frame-radio-group-item-dot-size);
+  block-size: var(--frame-radio-group-item-dot-size);
+  aspect-ratio: 1;
+  border-radius: 999px;
+  background: currentColor;
+  clip-path: circle(50%);
+  transform: scale(0);
+  transition: transform 120ms ease;
+}
+
+[frRadioGroupItem]:where(:not(:disabled)):hover {
+  border-color: var(--frame-radio-group-item-hover-border);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+[frRadioGroupItem]:focus-visible {
+  box-shadow: var(--frame-radio-group-item-focus-shadow);
+  transform: translate(-1px, -1px);
+}
+
+[frRadioGroupItem]:checked {
+  border-color: var(--frame-radio-group-item-checked-border);
+  background: var(--frame-radio-group-item-checked-bg);
+}
+
+[frRadioGroupItem]:checked::before {
+  transform: scale(1);
+}
+
+[frRadioGroupItem]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-radio-group-item-disabled-opacity);
+}
+
+[frRadioGroupField] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-field-gap);
+  min-width: 0;
+}
+
+[frRadioGroupItem][aria-invalid='true'],
+[frRadioGroupItem].ng-invalid.ng-touched,
+[frRadioGroupItem].ng-invalid.ng-dirty {
+  border-color: var(--frame-radio-group-item-invalid-border);
+}
+
+[frRadioGroupCard] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-radio-group-card-gap);
+  min-width: 0;
+  padding: var(--frame-radio-group-card-padding);
+  border: 1px solid var(--frame-radio-group-card-border);
+  border-radius: var(--frame-radio-group-card-radius);
+  background: var(--frame-radio-group-card-bg);
+  cursor: pointer;
+  transition:
+    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    transform var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
+}
+
+[frRadioGroupCard]:has([frRadioGroupCardMeta]) {
+  [frFieldContent] {
+    flex-grow: 1;
+  }
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:where(:not(:disabled)):hover) {
+  border-color: var(--frame-radio-group-card-hover-border);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:checked) {
+  border-color: var(--frame-radio-group-card-checked-border);
+  box-shadow: var(--frame-radio-group-card-checked-shadow);
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:disabled) {
+  cursor: not-allowed;
+  opacity: var(--frame-radio-group-card-disabled-opacity);
+}
+
+[frRadioGroupCardMeta] {
+  color: var(--frame-radio-group-card-meta-color);
+  font-size: var(--frame-radio-group-card-meta-font-size);
+  font-weight: var(--frame-radio-group-card-meta-font-weight);
+  white-space: nowrap;
+}

package/resizable/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
-  --frame-resizable-border: var(--frame-border);
-  --frame-resizable-radius: var(--frame-radius-lg);
-  --frame-resizable-bg: var(--frame-surface);
-  --frame-resizable-color: var(--frame-foreground);
-  --frame-resizable-panel-padding: 1rem;
-  --frame-resizable-panel-min-size: 0;
-  --frame-resizable-handle-size: 0.625rem;
-  --frame-resizable-handle-hit-size: 1rem;
-  --frame-resizable-handle-bg: transparent;
-  --frame-resizable-handle-hover-bg: color-mix(in srgb, var(--frame-primary) 16%, transparent);
-  --frame-resizable-handle-active-bg: color-mix(in srgb, var(--frame-primary) 24%, transparent);
-  --frame-resizable-handle-border: var(--frame-border);
-  --frame-resizable-handle-indicator-size: 2rem;
-  --frame-resizable-handle-indicator-thickness: 0.25rem;
-  --frame-resizable-handle-indicator-bg: var(--frame-border);
-  --frame-resizable-handle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
-  --frame-resizable-transition-duration: 150ms;
-  --frame-resizable-transition-easing: ease;
-}
+:root {
+  --frame-resizable-border: var(--frame-border);
+  --frame-resizable-radius: var(--frame-radius-lg);
+  --frame-resizable-bg: var(--frame-surface);
+  --frame-resizable-color: var(--frame-foreground);
+  --frame-resizable-panel-padding: 1rem;
+  --frame-resizable-panel-min-size: 0;
+  --frame-resizable-handle-size: 0.625rem;
+  --frame-resizable-handle-hit-size: 1rem;
+  --frame-resizable-handle-bg: transparent;
+  --frame-resizable-handle-hover-bg: color-mix(in srgb, var(--frame-primary) 16%, transparent);
+  --frame-resizable-handle-active-bg: color-mix(in srgb, var(--frame-primary) 24%, transparent);
+  --frame-resizable-handle-border: var(--frame-border);
+  --frame-resizable-handle-indicator-size: 2rem;
+  --frame-resizable-handle-indicator-thickness: 0.25rem;
+  --frame-resizable-handle-indicator-bg: var(--frame-border);
+  --frame-resizable-handle-focus-shadow: none;
+  --frame-resizable-transition-duration: 150ms;
+  --frame-resizable-transition-easing: ease;
+}

package/select/src/styles/_vars.css

@@ -1,28 +1,28 @@
-:root {
-  --frame-select-trigger-height: 2.5rem;
-  --frame-select-trigger-min-width: 12rem;
-  --frame-select-trigger-gap: 0.5rem;
-  --frame-select-trigger-radius: var(--frame-radius-md);
-  --frame-select-trigger-padding-inline: 1rem;
-  --frame-select-trigger-font-size: 0.875rem;
-  --frame-select-trigger-font-weight: 600;
-  --frame-select-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
-  --frame-select-trigger-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
-  --frame-select-trigger-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
-  --frame-select-trigger-disabled-opacity: 0.55;
-  --frame-select-trigger-hover-filter: brightness(0.98);
-  --frame-select-trigger-active-filter: brightness(0.96);
-  --frame-select-trigger-transition-duration: 150ms;
-  --frame-select-content-min-width: 12rem;
-  --frame-select-content-max-height: min(18rem, 50vh);
-  --frame-select-content-popper-shadow: 0 16px 32px -18px rgb(0 0 0 / 0.28);
-  --frame-select-group-gap: 0.125rem;
-  --frame-select-item-indicator-size: 1rem;
-  --frame-select-item-indicator-offset: 0.625rem;
-  --frame-select-item-padding-start: 2rem;
-  --frame-select-item-padding-end: 2rem;
-  --frame-select-item-padding-inline: 0.75rem;
-  --frame-select-item-indicator-font-size: 0.875rem;
-  --frame-select-error-color: var(--frame-destructive);
-  --frame-select-error-font-size: 0.8125rem;
-}
+:root {
+  --frame-select-trigger-height: 2.5rem;
+  --frame-select-trigger-min-width: 12rem;
+  --frame-select-trigger-gap: 0.5rem;
+  --frame-select-trigger-radius: 0px;
+  --frame-select-trigger-padding-inline: 1rem;
+  --frame-select-trigger-font-size: 0.875rem;
+  --frame-select-trigger-font-weight: 600;
+  --frame-select-trigger-focus-shadow: none;
+  --frame-select-trigger-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-select-trigger-invalid-shadow: none;
+  --frame-select-trigger-disabled-opacity: 0.55;
+  --frame-select-trigger-hover-filter: brightness(0.98);
+  --frame-select-trigger-active-filter: brightness(0.96);
+  --frame-select-trigger-transition-duration: 150ms;
+  --frame-select-content-min-width: 12rem;
+  --frame-select-content-max-height: min(18rem, 50vh);
+  --frame-select-content-popper-shadow: 0 16px 32px -18px rgb(0 0 0 / 0.28);
+  --frame-select-group-gap: 0.125rem;
+  --frame-select-item-indicator-size: 1rem;
+  --frame-select-item-indicator-offset: 0.625rem;
+  --frame-select-item-padding-start: 2rem;
+  --frame-select-item-padding-end: 2rem;
+  --frame-select-item-padding-inline: 0.75rem;
+  --frame-select-item-indicator-font-size: 0.875rem;
+  --frame-select-error-color: var(--frame-destructive);
+  --frame-select-error-font-size: 0.8125rem;
+}

package/select/src/styles/select-trigger.css

@@ -1,95 +1,138 @@
-.frame-select__trigger {
-  --frame-select-trigger-bg: var(--frame-surface);
-  --frame-select-trigger-border: var(--frame-border);
-  --frame-select-trigger-color: var(--frame-surface-foreground);
-  --frame-select-trigger-hover-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
-  --frame-select-trigger-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
-  --frame-select-trigger-hover-color: var(--frame-select-trigger-color);
-  --frame-select-trigger-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
-  --frame-select-trigger-active-border: var(--frame-select-trigger-hover-border);
-  --frame-select-trigger-active-color: var(--frame-select-trigger-hover-color);
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  justify-self: start;
-  align-self: start;
-  width: 100%;
-  max-width: 100%;
-  min-height: var(--frame-select-trigger-height);
-  min-width: var(--frame-select-trigger-min-width);
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--frame-select-trigger-gap);
-  border: 1px solid var(--frame-select-trigger-border);
-  border-radius: var(--frame-select-trigger-radius);
-  background: var(--frame-select-trigger-bg);
-  color: var(--frame-select-trigger-color);
-  cursor: pointer;
-  margin: 0;
-  padding-inline: var(--frame-select-trigger-padding-inline);
-  padding-block: 0;
-  font: inherit;
-  font-size: var(--frame-select-trigger-font-size);
-  font-weight: var(--frame-select-trigger-font-weight);
-  line-height: 1.25;
-  text-align: left;
-  text-decoration: none;
-  box-shadow: none;
-  transition:
-    border-color var(--frame-select-trigger-transition-duration) ease,
-    box-shadow var(--frame-select-trigger-transition-duration) ease,
-    background-color var(--frame-select-trigger-transition-duration) ease,
-    color var(--frame-select-trigger-transition-duration) ease,
-    opacity var(--frame-select-trigger-transition-duration) ease;
-}
-
-.frame-select__trigger:where(:not([data-disabled])):hover {
-  background: var(--frame-select-trigger-hover-bg);
-  border-color: var(--frame-select-trigger-hover-border);
-  color: var(--frame-select-trigger-hover-color);
-  filter: var(--frame-select-trigger-hover-filter);
-}
-
-.frame-select__trigger:where(:not([data-disabled])):active {
-  background: var(--frame-select-trigger-active-bg);
-  border-color: var(--frame-select-trigger-active-border);
-  color: var(--frame-select-trigger-active-color);
-  filter: var(--frame-select-trigger-active-filter);
-}
-
-.frame-select__trigger:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--frame-select-trigger-focus-shadow);
-}
-
-.frame-select__trigger[data-invalid] {
-  border-color: var(--frame-select-trigger-invalid-border);
-  box-shadow: var(--frame-select-trigger-invalid-shadow);
-}
-
-.frame-select__trigger[data-disabled] {
-  opacity: var(--frame-select-trigger-disabled-opacity);
-  pointer-events: none;
-}
-
-.frame-select__value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.frame-select__value[data-placeholder] {
-  color: var(--frame-muted-foreground);
-}
-
-.frame-select__icon {
-  display: flex;
-  flex: 0 0 auto;
-  color: var(--frame-muted-foreground);
-}
-
-.frame-select__trigger[data-state='open'] .frame-select__icon {
-  transform: rotate(180deg);
-}
+.frame-select__trigger {
+  --frame-select-trigger-bg: var(--frame-surface);
+  --frame-select-trigger-border: var(--frame-border);
+  --frame-select-trigger-color: var(--frame-surface-foreground);
+  --frame-select-trigger-hover-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-select-trigger-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-select-trigger-hover-color: var(--frame-select-trigger-color);
+  --frame-select-trigger-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
+  --frame-select-trigger-active-border: var(--frame-select-trigger-hover-border);
+  --frame-select-trigger-active-color: var(--frame-select-trigger-hover-color);
+  --frame-select-trigger-corner-color: var(--frame-frame-line-muted);
+  --frame-select-trigger-corner-inset: var(--frame-frame-tick-inset, 0px);
+  --frame-select-trigger-corner-size: clamp(
+    0px,
+    calc((1px - var(--frame-select-trigger-radius, 0px)) * 9999),
+    var(--frame-frame-tick-size, 0.5rem)
+  );
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  justify-self: start;
+  align-self: start;
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--frame-select-trigger-height);
+  min-width: var(--frame-select-trigger-min-width);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--frame-select-trigger-gap);
+  border: 1px solid var(--frame-select-trigger-border);
+  border-radius: var(--frame-select-trigger-radius);
+  background: var(--frame-select-trigger-bg);
+  color: var(--frame-select-trigger-color);
+  cursor: pointer;
+  margin: 0;
+  padding-inline: var(--frame-select-trigger-padding-inline);
+  padding-block: 0;
+  font: inherit;
+  font-size: var(--frame-select-trigger-font-size);
+  font-weight: var(--frame-select-trigger-font-weight);
+  line-height: 1.25;
+  text-align: left;
+  text-decoration: none;
+  box-shadow: none;
+  position: relative;
+  transition:
+    border-color var(--frame-select-trigger-transition-duration) ease,
+    box-shadow var(--frame-select-trigger-transition-duration) ease,
+    background-color var(--frame-select-trigger-transition-duration) ease,
+    color var(--frame-select-trigger-transition-duration) ease,
+    opacity var(--frame-select-trigger-transition-duration) ease,
+    transform var(--frame-select-trigger-transition-duration) ease;
+}
+
+.frame-select__trigger::before {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
+      left var(--frame-select-trigger-corner-inset) top var(--frame-select-trigger-corner-inset) /
+      var(--frame-select-trigger-corner-size) 1px no-repeat,
+    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
+      left var(--frame-select-trigger-corner-inset) top var(--frame-select-trigger-corner-inset) / 1px
+      var(--frame-select-trigger-corner-size) no-repeat,
+    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
+      right var(--frame-select-trigger-corner-inset) bottom var(--frame-select-trigger-corner-inset) /
+      var(--frame-select-trigger-corner-size) 1px no-repeat,
+    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
+      right var(--frame-select-trigger-corner-inset) bottom var(--frame-select-trigger-corner-inset) / 1px
+      var(--frame-select-trigger-corner-size) no-repeat;
+  pointer-events: none;
+  content: '';
+}
+
+.frame-select__trigger:where(:not([data-disabled])):hover {
+  background: var(--frame-select-trigger-hover-bg);
+  border-color: var(--frame-select-trigger-hover-border);
+  color: var(--frame-select-trigger-hover-color);
+  filter: var(--frame-select-trigger-hover-filter);
+}
+
+.frame-select__trigger:where(:not([data-disabled])):active {
+  background: var(--frame-select-trigger-active-bg);
+  border-color: var(--frame-select-trigger-active-border);
+  color: var(--frame-select-trigger-active-color);
+  filter: var(--frame-select-trigger-active-filter);
+}
+
+.frame-select__trigger:focus-visible {
+  outline: 1px solid var(--frame-ring);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.frame-select__trigger:focus-visible,
+.frame-select__trigger[data-state='open'] {
+  --frame-select-trigger-corner-color: var(--frame-frame-accent);
+}
+
+.frame-select__trigger[data-state='open'] {
+  background: var(--frame-select-trigger-active-bg);
+  border-color: var(--frame-select-trigger-active-border);
+  color: var(--frame-select-trigger-active-color);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+.frame-select__trigger[data-invalid] {
+  border-color: var(--frame-select-trigger-invalid-border);
+  box-shadow: none;
+}
+
+.frame-select__trigger[data-disabled] {
+  opacity: var(--frame-select-trigger-disabled-opacity);
+  pointer-events: none;
+}
+
+.frame-select__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.frame-select__value[data-placeholder] {
+  color: var(--frame-muted-foreground);
+}
+
+.frame-select__icon {
+  display: flex;
+  flex: 0 0 auto;
+  color: var(--frame-muted-foreground);
+}
+
+.frame-select__trigger[data-state='open'] .frame-select__icon {
+  transform: rotate(180deg);
+}

package/separator/src/styles/_vars.css

@@ -1,9 +1,9 @@
-:root {
-  --frame-separator-color: var(--frame-border);
-  --frame-separator-thickness: 1px;
-  --frame-separator-radius: 999px;
-  --frame-separator-horizontal-width: 100%;
-  --frame-separator-horizontal-margin-block: 0;
-  --frame-separator-vertical-height: 100%;
-  --frame-separator-vertical-margin-inline: 0;
-}
+:root {
+  --frame-separator-color: var(--frame-border);
+  --frame-separator-thickness: 1px;
+  --frame-separator-radius: 0;
+  --frame-separator-horizontal-width: 100%;
+  --frame-separator-horizontal-margin-block: 0;
+  --frame-separator-vertical-height: 100%;
+  --frame-separator-vertical-margin-inline: 0;
+}