@yarcl/react 0.1.0

package/src/styles.css

@@ -0,0 +1,1971 @@
+.yarcl-button,
+.yarcl-input,
+.yarcl-textarea {
+  box-sizing: border-box;
+  font: inherit;
+  font-size: var(--yarcl-fs);
+  border: var(--yarcl-border-width) solid transparent;
+  border-radius: var(--yarcl-r);
+  transition-property: background-color, border-color, color;
+  transition-duration: var(--yarcl-motion-fast);
+  transition-timing-function: var(--yarcl-motion-easing);
+}
+
+.yarcl-button,
+.yarcl-input {
+  height: var(--yarcl-h);
+  padding: 0 var(--yarcl-px);
+  line-height: 1;
+}
+
+/* Focus ring: one rule for every focusable element, from focusRing in the config */
+
+:where(
+    .yarcl-button,
+    .yarcl-input,
+    .yarcl-textarea,
+    .yarcl-checkbox-input,
+    .yarcl-radio-input,
+    .yarcl-switch-input,
+    .yarcl-slider-thumb,
+    .yarcl-link,
+    .yarcl-breadcrumb-ellipsis,
+    .yarcl-breadcrumb-text,
+    .yarcl-modal-close,
+    .yarcl-toast-close,
+    .yarcl-toast-action,
+    .yarcl-badge-remove,
+    .yarcl-alert-dismiss,
+    .yarcl-tabs-trigger,
+    .yarcl-tabs-panel,
+    .yarcl-date-picker-nav,
+    .yarcl-date-picker-day,
+    .yarcl-accordion-trigger
+  ):focus-visible {
+  outline: var(--yarcl-focus-width) var(--yarcl-focus-style) var(--yarcl-focus-color);
+  outline-offset: var(--yarcl-focus-offset);
+}
+
+.yarcl-combobox-control:has(> .yarcl-combobox-input:focus-visible) {
+  outline: var(--yarcl-focus-width) var(--yarcl-focus-style) var(--yarcl-focus-color);
+  outline-offset: var(--yarcl-focus-offset);
+}
+
+:where(.yarcl-tabs-trigger, .yarcl-tabs-panel, .yarcl-accordion-trigger):focus-visible {
+  outline-offset: calc(var(--yarcl-focus-width) * -1);
+}
+
+/* Button */
+
+.yarcl-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  white-space: nowrap;
+  color: var(--yarcl-v-fg);
+  background: var(--yarcl-v-bg);
+  border-color: var(--yarcl-v-border);
+  cursor: pointer;
+}
+
+.yarcl-button:hover:not(:disabled) {
+  background: var(--yarcl-v-bg-hover);
+}
+
+.yarcl-button:active:not(:disabled) {
+  background: var(--yarcl-v-bg-active);
+}
+
+.yarcl-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-button svg {
+  flex-shrink: 0;
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+}
+
+.yarcl-icon-button {
+  width: var(--yarcl-h);
+  padding: 0;
+}
+
+/* Input & Textarea */
+
+.yarcl-input,
+.yarcl-textarea {
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border-color: var(--yarcl-neutral-border);
+}
+
+.yarcl-textarea {
+  display: block;
+  min-height: var(--yarcl-h);
+  padding: calc((var(--yarcl-h) - 1.5 * var(--yarcl-fs)) / 2 - var(--yarcl-border-width)) var(--yarcl-px);
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.yarcl-input::placeholder,
+.yarcl-textarea::placeholder {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-input:focus-visible,
+.yarcl-textarea:focus-visible {
+  border-color: var(--yarcl-c);
+}
+
+.yarcl-input[aria-invalid='true'],
+.yarcl-textarea[aria-invalid='true'] {
+  border-color: var(--yarcl-error);
+}
+
+.yarcl-input:disabled,
+.yarcl-textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* NumberInput */
+
+.yarcl-number-input {
+  position: relative;
+  display: inline-flex;
+  --yarcl-stepper-w: calc(var(--yarcl-icon) + var(--yarcl-px) / 2);
+}
+
+.yarcl-number-input-field {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  padding-right: calc(var(--yarcl-px) + var(--yarcl-stepper-w));
+  font-variant-numeric: tabular-nums;
+}
+
+.yarcl-number-input-steppers {
+  position: absolute;
+  top: var(--yarcl-border-width);
+  right: var(--yarcl-border-width);
+  bottom: var(--yarcl-border-width);
+  display: flex;
+  flex-direction: column;
+  width: var(--yarcl-stepper-w);
+  overflow: hidden;
+  border-left: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: 0 max(0px, var(--yarcl-r) - var(--yarcl-border-width)) max(0px, var(--yarcl-r) - var(--yarcl-border-width)) 0;
+}
+
+.yarcl-number-input-stepper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  color: var(--yarcl-neutral-muted);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition-property: background-color, color;
+  transition-duration: var(--yarcl-motion-fast);
+  transition-timing-function: var(--yarcl-motion-easing);
+}
+
+.yarcl-number-input-stepper + .yarcl-number-input-stepper {
+  border-top: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-number-input-stepper:hover:not(:disabled) {
+  color: var(--yarcl-c-text);
+  background: var(--yarcl-neutral-bg);
+}
+
+.yarcl-number-input-stepper:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-number-input-stepper svg {
+  width: calc(var(--yarcl-icon) * 0.75);
+  height: calc(var(--yarcl-icon) * 0.75);
+}
+
+.yarcl-number-input-increment svg {
+  transform: rotate(180deg);
+}
+
+/* Checkbox, Radio, Switch */
+
+.yarcl-checkbox,
+.yarcl-radio,
+.yarcl-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-size: var(--yarcl-fs);
+  line-height: 1.25;
+  color: var(--yarcl-neutral-text);
+  cursor: pointer;
+}
+
+.yarcl-checkbox:has(:disabled),
+.yarcl-radio:has(:disabled),
+.yarcl-switch:has(:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-checkbox-input,
+.yarcl-radio-input,
+.yarcl-switch-input {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  margin: 0;
+  cursor: inherit;
+  transition-property: background-color, border-color;
+  transition-duration: var(--yarcl-motion-fast);
+  transition-timing-function: var(--yarcl-motion-easing);
+}
+
+.yarcl-checkbox-input,
+.yarcl-radio-input {
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-checkbox-input {
+  border-radius: 0.25em;
+}
+
+.yarcl-radio-input {
+  border-radius: 50%;
+}
+
+.yarcl-checkbox-input:checked,
+.yarcl-checkbox-input:indeterminate,
+.yarcl-radio-input:checked {
+  background: var(--yarcl-c);
+  border-color: var(--yarcl-c);
+}
+
+.yarcl-checkbox-input::before,
+.yarcl-radio-input::before {
+  content: '';
+  position: absolute;
+  inset: 15%;
+  background: var(--yarcl-c-on);
+  transform: scale(0);
+  transition: transform var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-checkbox-input::before {
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+.yarcl-checkbox-input:indeterminate::before {
+  clip-path: inset(40% 5%);
+}
+
+.yarcl-radio-input::before {
+  inset: 25%;
+  border-radius: 50%;
+}
+
+.yarcl-checkbox-input:checked::before,
+.yarcl-checkbox-input:indeterminate::before,
+.yarcl-radio-input:checked::before {
+  transform: scale(1);
+}
+
+.yarcl-checkbox-input[aria-invalid='true'] {
+  border-color: var(--yarcl-error);
+}
+
+.yarcl-switch-input {
+  --yarcl-track-h: calc(var(--yarcl-icon) * 1.25);
+  --yarcl-thumb: calc(var(--yarcl-track-h) - 4px);
+  width: calc(var(--yarcl-track-h) * 1.8);
+  height: var(--yarcl-track-h);
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--yarcl-neutral-muted) 60%, var(--yarcl-neutral-bg));
+}
+
+.yarcl-switch-input::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: var(--yarcl-thumb);
+  height: var(--yarcl-thumb);
+  border-radius: 50%;
+  background: light-dark(#ffffff, var(--yarcl-neutral-text));
+  box-shadow: var(--yarcl-shadow-sm, none);
+  transition:
+    transform var(--yarcl-motion-fast) var(--yarcl-motion-easing),
+    background-color var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-switch-input:checked {
+  background: var(--yarcl-c);
+}
+
+.yarcl-switch-input:checked::before {
+  background: var(--yarcl-c-on);
+  transform: translateX(calc(var(--yarcl-track-h) * 1.8 - var(--yarcl-thumb) - 4px));
+}
+
+/* Slider */
+
+.yarcl-slider {
+  --yarcl-slider-thumb: calc(var(--yarcl-icon) * 1.25);
+  --yarcl-slider-track: calc(var(--yarcl-icon) * 0.375);
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--yarcl-slider-thumb);
+  padding-inline: calc(var(--yarcl-slider-thumb) / 2);
+  touch-action: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+.yarcl-slider:has([aria-invalid='true']) {
+  --yarcl-c: var(--yarcl-error);
+}
+
+.yarcl-slider[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-slider-track {
+  position: relative;
+  flex: 1;
+  height: var(--yarcl-slider-track);
+  border-radius: var(--yarcl-r);
+  background: color-mix(in oklab, var(--yarcl-neutral-muted) 35%, var(--yarcl-neutral-bg));
+}
+
+.yarcl-slider-range {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--yarcl-slider-start);
+  inset-inline-end: calc(100% - var(--yarcl-slider-end));
+  border-radius: inherit;
+  background: var(--yarcl-c);
+}
+
+.yarcl-slider-thumb {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: var(--yarcl-slider-position);
+  box-sizing: border-box;
+  width: var(--yarcl-slider-thumb);
+  height: var(--yarcl-slider-thumb);
+  margin-block-start: calc(var(--yarcl-slider-thumb) / -2);
+  margin-inline-start: calc(var(--yarcl-slider-thumb) / -2);
+  border: calc(var(--yarcl-border-width) * 2) solid var(--yarcl-c);
+  border-radius: var(--yarcl-r);
+  background: var(--yarcl-neutral-surface);
+  box-shadow: var(--yarcl-shadow-sm, none);
+  cursor: grab;
+  transition: box-shadow var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-slider:not([data-disabled]) .yarcl-slider-thumb:hover {
+  box-shadow: 0 0 0 calc(var(--yarcl-slider-thumb) / 4) color-mix(in oklab, var(--yarcl-c) 18%, transparent);
+}
+
+.yarcl-slider:not([data-disabled]) .yarcl-slider-thumb:active {
+  cursor: grabbing;
+}
+
+.yarcl-slider[data-disabled] .yarcl-slider-thumb {
+  cursor: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-slider-thumb {
+    transition: none;
+  }
+}
+
+/* Label */
+
+.yarcl-label {
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-label-colored {
+  color: var(--yarcl-c-text);
+}
+
+.yarcl-label-disabled {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-label-required {
+  color: var(--yarcl-error);
+}
+
+/* Field */
+
+.yarcl-field {
+  display: grid;
+  gap: 0.375rem;
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-field-label {
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-field-description,
+.yarcl-field-error {
+  margin: 0;
+}
+
+.yarcl-field-description {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-field-error {
+  color: var(--yarcl-error);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-button,
+  .yarcl-input,
+  .yarcl-textarea,
+  .yarcl-number-input-stepper,
+  .yarcl-checkbox-input,
+  .yarcl-radio-input,
+  .yarcl-switch-input,
+  .yarcl-checkbox-input::before,
+  .yarcl-radio-input::before,
+  .yarcl-switch-input::before {
+    transition: none;
+  }
+}
+
+/* Text & Heading */
+
+.yarcl-heading {
+  margin: 0;
+  color: var(--yarcl-neutral-text);
+}
+
+p.yarcl-text {
+  margin: 0;
+}
+
+.yarcl-text-colored {
+  color: var(--yarcl-c-text);
+}
+
+.yarcl-text-muted {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-text-truncate {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.yarcl-text-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--yarcl-lines);
+  line-clamp: var(--yarcl-lines);
+  overflow: hidden;
+}
+
+/* Link */
+
+.yarcl-link {
+  color: var(--yarcl-c-text);
+  text-decoration-thickness: from-font;
+  text-underline-offset: 0.2em;
+  border-radius: 0.125em;
+}
+
+.yarcl-link:hover {
+  color: color-mix(in oklab, var(--yarcl-c-text), var(--yarcl-neutral-text) 25%);
+}
+
+.yarcl-link-underline-always {
+  text-decoration-line: underline;
+}
+
+.yarcl-link-underline-hover,
+.yarcl-link-underline-none {
+  text-decoration-line: none;
+}
+
+.yarcl-link-underline-hover:hover {
+  text-decoration-line: underline;
+}
+
+/* Breadcrumb */
+
+.yarcl-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375em;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.yarcl-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375em;
+  min-width: 0;
+}
+
+.yarcl-breadcrumb .yarcl-breadcrumb-current {
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-breadcrumb-separator svg {
+  width: 1em;
+  height: 1em;
+}
+
+.yarcl-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.125em;
+  font: inherit;
+  line-height: inherit;
+  color: var(--yarcl-c-text);
+  background: none;
+  border: 0;
+  border-radius: 0.125em;
+  cursor: pointer;
+}
+
+.yarcl-breadcrumb-ellipsis:hover {
+  background: color-mix(in oklab, var(--yarcl-c) 12%, transparent);
+}
+
+/* Stack & Inline */
+
+.yarcl-stack,
+.yarcl-inline {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.yarcl-stack {
+  flex-direction: column;
+}
+
+.yarcl-inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.yarcl-inline-nowrap {
+  flex-wrap: nowrap;
+}
+
+.yarcl-align-start { align-items: flex-start; }
+.yarcl-align-center { align-items: center; }
+.yarcl-align-end { align-items: flex-end; }
+.yarcl-align-stretch { align-items: stretch; }
+.yarcl-align-baseline { align-items: baseline; }
+
+.yarcl-justify-start { justify-content: flex-start; }
+.yarcl-justify-center { justify-content: center; }
+.yarcl-justify-end { justify-content: flex-end; }
+.yarcl-justify-between { justify-content: space-between; }
+
+/* Card */
+
+.yarcl-card {
+  box-sizing: border-box;
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: var(--yarcl-r);
+}
+
+/* Divider */
+
+.yarcl-divider {
+  flex-shrink: 0;
+  margin: 0;
+  border: 0;
+  background: var(--yarcl-neutral-border);
+}
+
+.yarcl-divider-horizontal {
+  align-self: stretch;
+  height: var(--yarcl-border-width);
+}
+
+.yarcl-divider-vertical {
+  align-self: stretch;
+  width: var(--yarcl-border-width);
+  height: auto;
+  min-height: 1em;
+}
+
+/* Floating */
+
+@keyframes yarcl-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+.yarcl-floating {
+  z-index: var(--yarcl-z-dropdown);
+  animation: yarcl-pop var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-panel {
+  box-sizing: border-box;
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: min(var(--yarcl-r, 0.5rem), 0.75rem);
+  box-shadow: var(--yarcl-floating-shadow);
+  outline: none;
+}
+
+.yarcl-popover,
+.yarcl-hover-card {
+  max-width: min(24rem, calc(100vw - 1rem));
+  overflow: auto;
+}
+
+/* Tooltip */
+
+.yarcl-tooltip {
+  z-index: var(--yarcl-z-tooltip);
+  max-width: 18rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  color: var(--yarcl-neutral-bg);
+  background: var(--yarcl-neutral-text);
+  border-radius: 0.375rem;
+  pointer-events: none;
+}
+
+.yarcl-tooltip-arrow {
+  fill: var(--yarcl-neutral-text);
+}
+
+/* Listbox, Menu, Select, Combobox */
+
+.yarcl-listbox {
+  display: flex;
+  flex-direction: column;
+  min-width: 10rem;
+  padding: 0.25rem;
+  overflow-y: auto;
+  font-size: var(--yarcl-fs);
+}
+
+.yarcl-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: calc(var(--yarcl-h) - 0.5rem);
+  padding: 0 calc(var(--yarcl-px) - 0.25rem);
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: min(var(--yarcl-r, 0.375rem), 0.375rem);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.yarcl-option[data-active] {
+  color: var(--yarcl-c-on);
+  background: var(--yarcl-c);
+}
+
+.yarcl-option[data-active] svg {
+  color: inherit;
+}
+
+.yarcl-option-colored {
+  color: var(--yarcl-c-text);
+}
+
+.yarcl-option:disabled,
+.yarcl-option[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-option svg {
+  flex-shrink: 0;
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+  color: var(--yarcl-c-text);
+}
+
+.yarcl-option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.yarcl-listbox-separator {
+  height: var(--yarcl-border-width);
+  margin: 0.25rem -0.25rem;
+  background: var(--yarcl-neutral-border);
+}
+
+.yarcl-listbox-message {
+  padding: 0.5rem calc(var(--yarcl-px) - 0.25rem);
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-select {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  min-width: 10rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.yarcl-select[aria-expanded='true'] {
+  border-color: var(--yarcl-c);
+}
+
+.yarcl-select-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.yarcl-select-placeholder {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-select svg {
+  flex-shrink: 0;
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-combobox-control {
+  --yarcl-combobox-pad: calc(var(--yarcl-h) * 0.2);
+  --yarcl-combobox-row: calc(var(--yarcl-h) - 2 * var(--yarcl-border-width) - 2 * var(--yarcl-combobox-pad));
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--yarcl-combobox-pad) / 2);
+  min-width: 10rem;
+  height: auto;
+  min-height: var(--yarcl-h);
+  padding: var(--yarcl-combobox-pad) var(--yarcl-px);
+  cursor: text;
+}
+
+.yarcl-combobox-control:has(> .yarcl-combobox-chips) {
+  padding-inline-start: var(--yarcl-combobox-pad);
+}
+
+.yarcl-combobox-control:focus-within {
+  border-color: var(--yarcl-c);
+}
+
+.yarcl-combobox-control:has(> .yarcl-combobox-input[aria-invalid='true']) {
+  border-color: var(--yarcl-error);
+}
+
+.yarcl-combobox-control:has(> .yarcl-combobox-input:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-combobox-chips {
+  display: contents;
+}
+
+.yarcl-combobox-chips > li {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.yarcl-combobox-chips .yarcl-badge {
+  height: var(--yarcl-combobox-row);
+  padding-block: 0;
+}
+
+.yarcl-combobox-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.yarcl-combobox-input {
+  flex: 1 1 4ch;
+  min-width: 4ch;
+  height: var(--yarcl-combobox-row);
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  outline: none;
+}
+
+.yarcl-combobox-input::placeholder {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-combobox-input:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-floating {
+    animation: none;
+  }
+}
+
+/* Dialog & Drawer */
+
+@keyframes yarcl-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes yarcl-slide-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes yarcl-slide-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+
+html:has(.yarcl-modal[open]) {
+  overflow: hidden;
+}
+
+.yarcl-modal {
+  box-sizing: border-box;
+  padding: 0;
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  box-shadow: var(--yarcl-floating-shadow);
+  overflow: hidden;
+}
+
+.yarcl-modal::backdrop {
+  background: rgb(0 0 0 / 0.45);
+  animation: yarcl-fade var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-modal[data-yarcl-covered]::backdrop {
+  background: transparent;
+}
+
+.yarcl-dialog {
+  margin: auto;
+  width: min(var(--yarcl-modal-width, 32rem), calc(100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
+  border-radius: min(var(--yarcl-r), 1rem);
+}
+
+.yarcl-dialog[open] {
+  animation: yarcl-pop var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-drawer {
+  width: min(var(--yarcl-modal-width, 24rem), calc(100vw - 3rem));
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  border-radius: 0;
+  border-block: 0;
+}
+
+.yarcl-drawer-right {
+  margin-left: auto;
+  border-right: 0;
+}
+
+.yarcl-drawer-left {
+  margin-right: auto;
+  border-left: 0;
+}
+
+.yarcl-drawer-right[open] {
+  animation: yarcl-slide-right var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-drawer-left[open] {
+  animation: yarcl-slide-left var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-modal-content {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  height: 100%;
+}
+
+.yarcl-modal-header,
+.yarcl-modal-body,
+.yarcl-modal-footer {
+  padding: 0 var(--yarcl-padding);
+}
+
+.yarcl-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--yarcl-gap);
+  padding-top: var(--yarcl-padding);
+}
+
+.yarcl-modal-heading {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.yarcl-modal-title {
+  margin: 0;
+}
+
+.yarcl-modal-description {
+  margin: 0;
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-modal-body {
+  flex: 1;
+  min-height: 0;
+  margin-top: var(--yarcl-gap);
+  overflow-y: auto;
+}
+
+.yarcl-modal-content > :last-child {
+  padding-bottom: var(--yarcl-padding);
+}
+
+.yarcl-modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: var(--yarcl-gap);
+}
+
+.yarcl-modal-close,
+.yarcl-toast-close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: var(--yarcl-neutral-muted);
+  background: none;
+  border: 0;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.yarcl-modal-close:hover,
+.yarcl-toast-close:hover {
+  color: var(--yarcl-neutral-text);
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 8%, transparent);
+}
+
+.yarcl-modal-close svg,
+.yarcl-toast-close svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+/* CommandPalette */
+
+.yarcl-command-palette {
+  margin-top: min(15dvh, 8rem);
+  max-height: calc(100dvh - min(15dvh, 8rem) - 1rem);
+  font-size: var(--yarcl-fs);
+}
+
+.yarcl-command-palette-content {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+}
+
+.yarcl-command-palette-search {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0 var(--yarcl-px);
+  color: var(--yarcl-neutral-muted);
+  border-bottom: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  transition: border-color var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-command-palette-search:focus-within {
+  border-bottom-color: var(--yarcl-c);
+}
+
+.yarcl-command-palette-search svg {
+  flex-shrink: 0;
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+}
+
+.yarcl-command-palette-input {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--yarcl-h) + 0.5rem);
+  padding: 0;
+  font: inherit;
+  color: var(--yarcl-neutral-text);
+  background: none;
+  border: 0;
+  outline: none;
+}
+
+.yarcl-command-palette-input::placeholder {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-command-palette-list {
+  gap: 0.25rem;
+  max-height: min(24rem, 60dvh);
+  overscroll-behavior: contain;
+}
+
+.yarcl-command-palette-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.yarcl-command-palette-heading {
+  padding: 0.375rem calc(var(--yarcl-px) - 0.25rem) 0.25rem;
+  font-size: 0.8125em;
+  font-weight: 600;
+  color: var(--yarcl-neutral-muted);
+  user-select: none;
+}
+
+.yarcl-command-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+  min-width: 0;
+}
+
+.yarcl-command-palette-shortcut {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0.25em;
+  font-size: 0.8125em;
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-command-palette-shortcut kbd {
+  box-sizing: border-box;
+  min-width: 1.75em;
+  padding: 0.125em 0.375em;
+  font: inherit;
+  line-height: 1.2;
+  text-align: center;
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: min(var(--yarcl-r), 0.25rem);
+}
+
+.yarcl-option[data-active] .yarcl-command-palette-shortcut {
+  color: inherit;
+}
+
+.yarcl-option[data-active] .yarcl-command-palette-shortcut kbd {
+  border-color: color-mix(in oklab, currentColor 45%, transparent);
+}
+
+.yarcl-command-palette-empty {
+  padding-block: 1.25rem;
+  text-align: center;
+}
+
+.yarcl-command-palette-empty:empty {
+  display: none;
+}
+
+/* Toast */
+
+@keyframes yarcl-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+
+.yarcl-toaster {
+  position: fixed;
+  inset: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: min(22rem, calc(100vw - 2rem));
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+}
+
+.yarcl-toaster:not(:popover-open) {
+  display: none;
+}
+
+.yarcl-toaster-top-left,
+.yarcl-toaster-top-center,
+.yarcl-toaster-top-right {
+  top: 1rem;
+}
+
+.yarcl-toaster-bottom-left,
+.yarcl-toaster-bottom-center,
+.yarcl-toaster-bottom-right {
+  bottom: 1rem;
+}
+
+.yarcl-toaster-top-left,
+.yarcl-toaster-bottom-left {
+  left: 1rem;
+}
+
+.yarcl-toaster-top-right,
+.yarcl-toaster-bottom-right {
+  right: 1rem;
+}
+
+.yarcl-toaster-top-center,
+.yarcl-toaster-bottom-center {
+  left: 50%;
+  translate: -50% 0;
+}
+
+.yarcl-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  padding: 0.75rem 0.5rem 0.75rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-left: 0.25rem solid var(--yarcl-c);
+  border-radius: 0.5rem;
+  box-shadow: var(--yarcl-floating-shadow);
+  animation: yarcl-toast-in var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-toast-text {
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.25rem;
+}
+
+.yarcl-toast-title {
+  font-weight: 600;
+}
+
+.yarcl-toast-description {
+  color: var(--yarcl-neutral-muted);
+}
+
+.yarcl-toast-action {
+  flex-shrink: 0;
+  align-self: center;
+  padding: 0.375rem 0.625rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--yarcl-c-text);
+  background: color-mix(in oklab, var(--yarcl-c) 12%, transparent);
+  border: 0;
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.yarcl-toast-action:hover {
+  background: color-mix(in oklab, var(--yarcl-c) 20%, transparent);
+}
+
+/* Tabs */
+
+.yarcl-tabs-list {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-tabs-trigger {
+  flex-shrink: 0;
+  height: var(--yarcl-h);
+  padding: 0 var(--yarcl-px);
+  margin-bottom: calc(var(--yarcl-border-width) * -1);
+  font: inherit;
+  font-size: var(--yarcl-fs);
+  font-weight: 500;
+  color: var(--yarcl-neutral-muted);
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: color var(--yarcl-motion-fast) var(--yarcl-motion-easing),
+    border-color var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-tabs-trigger:hover:not(:disabled) {
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-tabs-trigger[aria-selected='true'] {
+  color: var(--yarcl-neutral-text);
+  border-bottom-color: var(--yarcl-c);
+}
+
+.yarcl-tabs-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-tabs-panel {
+  padding-top: var(--yarcl-gap);
+}
+
+/* Accordion */
+
+.yarcl-accordion {
+  overflow: hidden;
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: var(--yarcl-r);
+}
+
+.yarcl-accordion-item + .yarcl-accordion-item {
+  border-top: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-accordion-heading {
+  margin: 0;
+  font: inherit;
+}
+
+.yarcl-accordion-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--yarcl-h);
+  padding: 0 var(--yarcl-px);
+  font: inherit;
+  font-size: var(--yarcl-fs);
+  font-weight: 500;
+  text-align: start;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  transition: background-color var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-accordion-trigger:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 4%, transparent);
+}
+
+.yarcl-accordion-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-accordion-label {
+  flex: 1;
+}
+
+.yarcl-accordion-trigger svg {
+  flex-shrink: 0;
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+  color: var(--yarcl-neutral-muted);
+  transition: transform var(--yarcl-motion-base) var(--yarcl-motion-easing),
+    color var(--yarcl-motion-fast) var(--yarcl-motion-easing);
+}
+
+.yarcl-accordion-trigger[aria-expanded='true'] svg {
+  color: var(--yarcl-c);
+  transform: rotate(180deg);
+}
+
+.yarcl-accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  font-size: var(--yarcl-fs);
+  transition: grid-template-rows var(--yarcl-motion-base) var(--yarcl-motion-easing),
+    visibility var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-accordion-content[data-state='open'] {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.yarcl-accordion-body {
+  min-height: 0;
+  padding: 0 var(--yarcl-px);
+  overflow: hidden;
+}
+
+.yarcl-accordion-body::before,
+.yarcl-accordion-body::after {
+  content: '';
+  display: block;
+  height: calc(var(--yarcl-focus-width) + var(--yarcl-focus-offset));
+}
+
+.yarcl-accordion-body::after {
+  height: var(--yarcl-px);
+}
+
+/* Table */
+
+.yarcl-table-wrap {
+  overflow-x: auto;
+  border: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+  border-radius: 0.5rem;
+}
+
+.yarcl-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--yarcl-cell-fs);
+  color: var(--yarcl-neutral-text);
+  background: var(--yarcl-neutral-surface);
+}
+
+.yarcl-table-caption {
+  padding: var(--yarcl-cell-py) var(--yarcl-cell-px);
+  font-weight: 600;
+  text-align: start;
+  caption-side: top;
+  border-bottom: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-table th,
+.yarcl-table td {
+  padding: var(--yarcl-cell-py) var(--yarcl-cell-px);
+  border-bottom: var(--yarcl-border-width) solid var(--yarcl-neutral-border);
+}
+
+.yarcl-table tbody tr:last-child > * {
+  border-bottom: 0;
+}
+
+.yarcl-table th {
+  font-weight: 600;
+  color: var(--yarcl-neutral-muted);
+  white-space: nowrap;
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 3%, var(--yarcl-neutral-surface));
+}
+
+.yarcl-table-striped tbody tr:nth-child(even) {
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 3%, transparent);
+}
+
+.yarcl-table-interactive tbody tr:hover {
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 6%, transparent);
+}
+
+.yarcl-cell-start {
+  text-align: start;
+}
+
+.yarcl-cell-center {
+  text-align: center;
+}
+
+.yarcl-cell-end {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-modal[open],
+  .yarcl-modal::backdrop,
+  .yarcl-toast,
+  .yarcl-tabs-trigger,
+  .yarcl-accordion-trigger,
+  .yarcl-accordion-trigger svg,
+  .yarcl-accordion-content {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* Spinner */
+
+@keyframes yarcl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.yarcl-spinner {
+  display: inline-block;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--yarcl-icon, 1em);
+  height: var(--yarcl-icon, 1em);
+  border: max(2px, calc(var(--yarcl-icon, 1em) / 8)) solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  vertical-align: middle;
+  animation: yarcl-spin 0.7s linear infinite;
+}
+
+.yarcl-spinner-colored {
+  color: var(--yarcl-c);
+}
+
+/* Badge */
+
+.yarcl-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 0.125em 0.5em;
+  font-size: calc(var(--yarcl-fs) * 0.85);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: var(--yarcl-v-fg);
+  background: var(--yarcl-v-bg);
+  border: var(--yarcl-border-width) solid var(--yarcl-v-border);
+  border-radius: var(--yarcl-r);
+}
+
+.yarcl-badge-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.1em;
+  height: 1.1em;
+  margin-right: -0.25em;
+  padding: 0;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.yarcl-badge-remove:hover {
+  opacity: 1;
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+
+.yarcl-badge-remove:focus-visible {
+  opacity: 1;
+}
+
+.yarcl-badge-remove svg {
+  width: 0.8em;
+  height: 0.8em;
+}
+
+/* Alert */
+
+.yarcl-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--yarcl-v-fg);
+  background: var(--yarcl-v-bg);
+  border: var(--yarcl-border-width) solid var(--yarcl-v-border);
+  border-radius: min(var(--yarcl-r), 0.75rem);
+}
+
+.yarcl-alert-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.yarcl-alert-icon svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.yarcl-alert-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.yarcl-alert-title {
+  font-weight: 600;
+}
+
+.yarcl-alert-action {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.yarcl-alert-dismiss {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.25rem -0.5rem -0.25rem 0;
+  padding: 0;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.yarcl-alert-dismiss:hover {
+  opacity: 1;
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+
+.yarcl-alert-dismiss:focus-visible {
+  opacity: 1;
+}
+
+.yarcl-alert-dismiss svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Skeleton */
+
+@keyframes yarcl-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+.yarcl-skeleton {
+  display: block;
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 10%, transparent);
+  animation: yarcl-pulse 1.6s ease-in-out infinite;
+}
+
+.yarcl-skeleton-text {
+  display: block;
+}
+
+.yarcl-skeleton-line {
+  height: 0.8em;
+  margin: calc((1lh - 0.8em) / 2) 0;
+  border-radius: 0.25em;
+}
+
+.yarcl-skeleton-line:last-child:not(:first-child) {
+  width: 60%;
+}
+
+.yarcl-skeleton-control {
+  height: var(--yarcl-h);
+  border-radius: var(--yarcl-r);
+}
+
+.yarcl-skeleton-circle {
+  width: var(--yarcl-h);
+  height: var(--yarcl-h);
+  border-radius: 50%;
+}
+
+.yarcl-skeleton-rect {
+  border-radius: var(--yarcl-r);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-spinner {
+    animation-duration: 1.5s;
+  }
+
+  .yarcl-skeleton {
+    animation: none;
+  }
+}
+
+/* Progress */
+
+@keyframes yarcl-progress-slide {
+  from {
+    inset-inline-start: -40%;
+  }
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+.yarcl-progress {
+  display: grid;
+  gap: 0.375em;
+  min-width: 0;
+  font-size: var(--yarcl-fs);
+  line-height: 1.25;
+  color: var(--yarcl-neutral-text);
+}
+
+.yarcl-progress-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5em;
+}
+
+.yarcl-progress-value {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.yarcl-progress-track {
+  position: relative;
+  overflow: hidden;
+  height: calc(var(--yarcl-icon) / 2);
+  border-radius: var(--yarcl-r, 0);
+  background: color-mix(in oklab, var(--yarcl-neutral-text) 12%, transparent);
+}
+
+.yarcl-progress-bar {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: calc(var(--yarcl-progress, 0) * 100%);
+  border-radius: inherit;
+  background: var(--yarcl-c);
+  transition: width var(--yarcl-motion-base) var(--yarcl-motion-easing);
+}
+
+.yarcl-progress[data-indeterminate] .yarcl-progress-bar {
+  width: 40%;
+  transition: none;
+  animation: yarcl-progress-slide 1.4s var(--yarcl-motion-easing) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-progress-bar {
+    transition: none;
+  }
+
+  .yarcl-progress[data-indeterminate] .yarcl-progress-bar {
+    inset-inline-start: 0;
+    width: 100%;
+    animation: yarcl-pulse 1.6s ease-in-out infinite;
+  }
+}
+
+/* RadioGroup */
+
+.yarcl-radio-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.yarcl-radio-group > legend {
+  padding: 0;
+  margin-bottom: 0.375rem;
+}
+
+.yarcl-radio-group-options {
+  display: flex;
+  gap: 0.5rem 1rem;
+}
+
+.yarcl-radio-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.yarcl-radio-group-horizontal {
+  flex-wrap: wrap;
+}
+
+.yarcl-radio-input[aria-invalid='true'] {
+  border-color: var(--yarcl-error);
+}
+
+/* ButtonGroup & ToggleGroup */
+
+.yarcl-button-group {
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.yarcl-button-group-vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.yarcl-button-group:not(.yarcl-button-group-attached) {
+  flex-wrap: wrap;
+}
+
+.yarcl-button-group-attached {
+  gap: 0;
+}
+
+.yarcl-button-group-attached > .yarcl-button {
+  position: relative;
+}
+
+.yarcl-button-group-attached > .yarcl-button:hover,
+.yarcl-button-group-attached > .yarcl-button:focus-visible,
+.yarcl-button-group-attached > .yarcl-button[aria-pressed='true'] {
+  z-index: 1;
+}
+
+.yarcl-button-group-attached.yarcl-button-group-horizontal > .yarcl-button:not(:first-child) {
+  margin-inline-start: calc(var(--yarcl-border-width) * -1);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.yarcl-button-group-attached.yarcl-button-group-horizontal > .yarcl-button:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.yarcl-button-group-attached.yarcl-button-group-vertical > .yarcl-button:not(:first-child) {
+  margin-block-start: calc(var(--yarcl-border-width) * -1);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.yarcl-button-group-attached.yarcl-button-group-vertical > .yarcl-button:not(:last-child) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.yarcl-button-group-attached.yarcl-button-group-horizontal > .yarcl-button:not(:first-child) {
+  border-inline-start-color: color-mix(in oklab, var(--yarcl-v-border), var(--yarcl-v-fg) 30%);
+}
+
+.yarcl-button-group-attached.yarcl-button-group-vertical > .yarcl-button:not(:first-child) {
+  border-block-start-color: color-mix(in oklab, var(--yarcl-v-border), var(--yarcl-v-fg) 30%);
+}
+
+/* Pagination */
+
+.yarcl-pagination {
+  display: flex;
+  max-width: 100%;
+}
+
+.yarcl-pagination-page {
+  min-width: var(--yarcl-h);
+  padding-inline: calc(var(--yarcl-px) / 2);
+  font-variant-numeric: tabular-nums;
+}
+
+.yarcl-pagination-ellipsis {
+  width: var(--yarcl-h);
+  padding: 0;
+  cursor: default;
+  user-select: none;
+}
+
+.yarcl-button-group:not(.yarcl-button-group-attached) > .yarcl-pagination-ellipsis {
+  color: var(--yarcl-neutral-muted);
+  background: none;
+  border-color: transparent;
+}
+
+.yarcl-pagination .yarcl-button[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.yarcl-pagination .yarcl-button[aria-disabled='true']:hover,
+.yarcl-pagination .yarcl-button[aria-disabled='true']:active,
+.yarcl-button-group-attached > .yarcl-pagination-ellipsis:hover {
+  background: var(--yarcl-v-bg);
+}
+
+/* DatePicker */
+
+.yarcl-popover.yarcl-date-picker-panel {
+  max-width: calc(100vw - 1rem);
+  padding: calc(var(--yarcl-px) * 0.75);
+  font-size: var(--yarcl-fs);
+}
+
+.yarcl-date-picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.yarcl-date-picker-title {
+  font-weight: 600;
+  text-align: center;
+}
+
+.yarcl-date-picker-nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--yarcl-h) * 0.875);
+  height: calc(var(--yarcl-h) * 0.875);
+  padding: 0;
+  color: var(--yarcl-neutral-text);
+  background: none;
+  border: 0;
+  border-radius: min(var(--yarcl-r, 0.375rem), 0.375rem);
+  cursor: pointer;
+}
+
+.yarcl-date-picker-nav:hover:not([aria-disabled='true']),
+.yarcl-date-picker-day:hover:not([aria-disabled='true'], [data-selected]) {
+  background: color-mix(in oklab, var(--yarcl-c) 12%, transparent);
+}
+
+.yarcl-date-picker-nav[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.yarcl-date-picker-nav svg {
+  width: var(--yarcl-icon);
+  height: var(--yarcl-icon);
+}
+
+.yarcl-date-picker-grid {
+  border-collapse: separate;
+  border-spacing: 0 0.125rem;
+}
+
+.yarcl-date-picker-grid th {
+  height: calc(var(--yarcl-h) * 0.75);
+  padding: 0;
+  font-weight: 500;
+  color: var(--yarcl-neutral-muted);
+  text-align: center;
+}
+
+.yarcl-date-picker-grid td {
+  width: calc(var(--yarcl-h) * 0.875);
+  height: calc(var(--yarcl-h) * 0.875);
+  padding: 0;
+  text-align: center;
+}
+
+.yarcl-date-picker-day {
+  box-sizing: border-box;
+  color: var(--yarcl-neutral-text);
+  border: var(--yarcl-border-width) solid transparent;
+  border-radius: var(--yarcl-r);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background-color, color;
+  transition-duration: var(--yarcl-motion-fast);
+  transition-timing-function: var(--yarcl-motion-easing);
+}
+
+.yarcl-date-picker-day[aria-current='date'] {
+  font-weight: 700;
+  color: var(--yarcl-c-text);
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+}
+
+.yarcl-date-picker-day[data-selected],
+.yarcl-date-picker-day[data-in-range] {
+  color: var(--yarcl-v-fg);
+  background: var(--yarcl-v-bg);
+  border-color: var(--yarcl-v-border);
+}
+
+.yarcl-date-picker-day[aria-disabled='true'] {
+  opacity: 0.4;
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .yarcl-date-picker-day {
+    transition: none;
+  }
+}