@threadlabs/looma 0.1.0

package/styles.css

@@ -0,0 +1,899 @@
+/* Unlayered: isolation contract (hard guarantees). Layered rules lose to unlayered page CSS. */
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+),
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+) *,
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+) *::before,
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+) *::after {
+  box-sizing: border-box;
+}
+
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+) {
+  all: revert;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-md);
+  color: var(--ui-text-primary);
+}
+
+:where(
+  ui-button,
+  ui-input,
+  ui-form-field,
+  ui-disclosure,
+  ui-popover,
+  ui-dialog,
+  ui-tabs,
+  ui-menu,
+  ui-menu-item,
+  ui-context-menu,
+  ui-tooltip,
+  ui-toast-region,
+  ui-checkbox,
+  ui-switch,
+  ui-radio-group,
+  ui-radio,
+  ui-badge,
+  ui-avatar,
+  ui-avatar-group
+)[data-ui-inherit-typography] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
+  direction: inherit;
+  writing-mode: inherit;
+  text-orientation: inherit;
+  text-rendering: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+}
+
+:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item) {
+  display: block;
+  width: 100%;
+  padding: var(--ui-space-2) var(--ui-space-3);
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: var(--ui-radius-2);
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium, 500);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+
+:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item):hover:not([aria-disabled="true"]):not([disabled]) {
+  background: var(--ui-surface-subtle);
+}
+
+:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item)[aria-disabled="true"],
+:where(ui-menu > ui-menu-item, ui-context-menu > ui-menu-item)[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@layer components {
+  ui-button {
+    display: inline-flex;
+    vertical-align: middle;
+    color: var(--ui-text-primary);
+  }
+
+  ui-button > button {
+    appearance: none;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-2);
+    background: var(--ui-surface-default);
+    color: inherit;
+    font: inherit;
+    font-weight: var(--ui-font-medium, 500);
+    line-height: var(--ui-line-height-tight);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    margin: 0;
+  }
+
+  ui-button[data-size="sm"] > button {
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: 0.875rem;
+  }
+
+  ui-button[data-size="lg"] > button {
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: 1rem;
+  }
+
+  ui-button > button:hover:enabled {
+    background: var(--ui-surface-muted);
+    border-color: var(--ui-border-strong);
+  }
+
+  ui-button > button:active:enabled {
+    background: var(--ui-surface-subtle);
+  }
+
+  ui-button[data-variant="solid"] > button {
+    border-color: var(--ui-accent-solid);
+    background: var(--ui-accent-solid);
+    color: var(--ui-text-on-accent);
+    box-shadow: var(--ui-shadow-xs);
+  }
+
+  ui-button[data-variant="solid"] > button:hover:enabled {
+    background: var(--ui-accent-hover);
+    border-color: var(--ui-accent-hover);
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  ui-button[data-variant="solid"] > button:active:enabled {
+    background: var(--ui-accent-active);
+    border-color: var(--ui-accent-active);
+    box-shadow: none;
+  }
+
+  ui-button[data-variant="destructive"] > button {
+    border-color: var(--ui-danger-solid);
+    background: var(--ui-danger-solid);
+    color: var(--ui-text-on-accent);
+    box-shadow: var(--ui-shadow-xs);
+  }
+
+  ui-button[data-variant="destructive"] > button:hover:enabled {
+    background: var(--ui-danger-hover);
+    border-color: var(--ui-danger-hover);
+    box-shadow: var(--ui-shadow-sm);
+  }
+
+  ui-button[data-variant="destructive"] > button:active:enabled {
+    background: var(--ui-danger-hover);
+    border-color: var(--ui-danger-hover);
+    box-shadow: none;
+  }
+
+  ui-button[data-variant="ghost"] > button {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  ui-button[data-variant="ghost"] > button:hover:enabled {
+    background: var(--ui-surface-muted);
+    border-color: transparent;
+  }
+
+  ui-button[data-variant="ghost"] > button:active:enabled {
+    background: var(--ui-surface-subtle);
+    border-color: transparent;
+  }
+
+  ui-button > button:focus-visible,
+  ui-input > input:focus-visible {
+    outline: 2px solid var(--ui-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ui-button > button:disabled,
+  ui-button[data-disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  ui-input {
+    display: inline-flex;
+    color: var(--ui-text-primary);
+  }
+
+  ui-input > input {
+    width: 100%;
+    appearance: none;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-2);
+    background: var(--ui-surface-default);
+    color: inherit;
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    margin: 0;
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  ui-input > input:hover:not(:focus):not(:disabled) {
+    border-color: var(--ui-border-strong);
+  }
+
+  ui-input > input:focus {
+    border-color: var(--ui-focus-ring);
+    box-shadow: 0 0 0 3px var(--ui-accent-soft);
+  }
+
+  ui-input[invalid] > input,
+  ui-form-field[invalid] ui-input > input,
+  ui-form-field[invalid] input,
+  ui-input > input[aria-invalid="true"] {
+    border-color: var(--ui-accent-active);
+  }
+
+  ui-input > input:disabled {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-muted);
+    cursor: not-allowed;
+  }
+
+  ui-form-field {
+    display: grid;
+    gap: var(--ui-space-2);
+    color: var(--ui-text-primary);
+  }
+
+  ui-form-field > label {
+    color: var(--ui-text-secondary);
+    font-size: 0.95rem;
+  }
+
+  ui-form-field [data-slot="help"] {
+    color: var(--ui-text-muted);
+    font-size: 0.875rem;
+  }
+
+  ui-form-field [data-slot="error"],
+  ui-form-field [role="alert"] {
+    color: var(--ui-accent-active);
+    font-size: 0.875rem;
+  }
+
+  ui-disclosure {
+    display: block;
+  }
+
+  ui-disclosure [aria-expanded] {
+    cursor: pointer;
+  }
+
+  ui-disclosure [hidden] {
+    display: none;
+  }
+
+  ui-tooltip {
+    display: inline-block;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-2);
+    background: var(--ui-surface-elevated);
+    color: var(--ui-text-primary);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    font-size: var(--ui-font-size-sm);
+    box-shadow: var(--ui-shadow-md);
+  }
+
+  ui-tooltip[hidden] {
+    display: none !important;
+  }
+
+  ui-menu {
+    display: flex;
+    flex-direction: column;
+    min-width: 12rem;
+    padding: var(--ui-space-1);
+    background: var(--ui-surface-elevated);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-3);
+    box-shadow: var(--ui-shadow-lg);
+  }
+
+  ui-menu-item {
+    display: block;
+    width: 100%;
+    padding: var(--ui-space-2) var(--ui-space-3);
+    text-align: left;
+    background: none;
+    border: none;
+    border-radius: var(--ui-radius-2);
+    color: var(--ui-text-primary);
+    font-size: var(--ui-font-size-md);
+    font-weight: var(--ui-font-medium, 500);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  ui-menu-item:hover:not([aria-disabled="true"]):not([disabled]) {
+    background: var(--ui-surface-subtle);
+  }
+
+  ui-menu-item[aria-disabled="true"],
+  ui-menu-item[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  ui-popover {
+    padding: var(--ui-space-3);
+    background: var(--ui-surface-elevated);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-3);
+    box-shadow: var(--ui-shadow-lg);
+    max-width: min(20rem, 90vw);
+  }
+
+  ui-context-menu {
+    position: fixed;
+    z-index: var(--ui-z-overlay, 1000);
+    min-width: 12rem;
+  }
+
+  ui-context-menu:not([data-open]) {
+    display: none !important;
+  }
+
+  ui-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  ui-tabs[orientation="vertical"] {
+    flex-direction: row;
+  }
+
+  ui-tabs [role="tablist"] {
+    display: flex;
+    gap: 0;
+    border-bottom: 1px solid var(--ui-border-default);
+  }
+
+  ui-tabs[orientation="vertical"] [role="tablist"] {
+    flex-direction: column;
+    border-bottom: none;
+    border-inline-end: 1px solid var(--ui-border-default);
+  }
+
+  ui-tabs button[role="tab"],
+  ui-tabs [role="tab"],
+  ui-tabs ui-button > button[role="tab"] {
+    padding: var(--ui-space-2) var(--ui-space-3);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium, 500);
+    color: var(--ui-text-secondary);
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    cursor: pointer;
+    transition: color var(--ui-motion-fast) var(--ui-motion-ease);
+    box-shadow: none;
+  }
+
+  ui-tabs button[role="tab"]:hover,
+  ui-tabs [role="tab"]:hover,
+  ui-tabs ui-button > button[role="tab"]:hover {
+    color: var(--ui-text-primary);
+  }
+
+  ui-tabs button[role="tab"][aria-selected="true"],
+  ui-tabs [role="tab"][aria-selected="true"],
+  ui-tabs ui-button > button[role="tab"][aria-selected="true"] {
+    color: var(--ui-accent-solid);
+    border-bottom-color: var(--ui-accent-solid);
+  }
+
+  ui-tabs[orientation="vertical"] button[role="tab"],
+  ui-tabs[orientation="vertical"] [role="tab"],
+  ui-tabs[orientation="vertical"] ui-button > button[role="tab"] {
+    border-bottom: none;
+    border-inline-end: 2px solid transparent;
+    margin-bottom: 0;
+    margin-inline-end: -1px;
+  }
+
+  ui-tabs[orientation="vertical"] button[role="tab"][aria-selected="true"],
+  ui-tabs[orientation="vertical"] [role="tab"][aria-selected="true"],
+  ui-tabs[orientation="vertical"] ui-button > button[role="tab"][aria-selected="true"] {
+    border-inline-end-color: var(--ui-accent-solid);
+  }
+
+  ui-tabs [role="tabpanel"] {
+    padding: var(--ui-space-4);
+  }
+
+  /* Dialog: hidden when closed so multiple instances don’t stack in layout */
+  ui-dialog:not([open]) {
+    display: none;
+  }
+
+  ui-dialog[open] {
+    display: block;
+  }
+
+  /* Dialog shell (Knit .dialog-shell): overlay, centering, padding.
+   * Layout stays in base so dialog doesn’t snap mid-exit when [open] is removed.
+   * Keyframes provide a broadly tool-compatible entry transition. */
+  ui-dialog > dialog {
+    --ui-dialog-duration: var(--ui-motion-base);
+    position: fixed;
+    inset: var(--ui-space-4);
+    width: min(100%, 440px);
+    max-width: min(100%, 440px);
+    margin: auto;
+    padding: var(--ui-space-4);
+    background: var(--ui-surface-elevated);
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-dialog);
+    box-shadow: var(--ui-shadow-dialog);
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ui-dialog-duration) var(--ui-motion-ease),
+      transform var(--ui-dialog-duration) var(--ui-motion-ease),
+      visibility var(--ui-dialog-duration),
+      display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+      overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+  }
+
+  ui-dialog > dialog[open] {
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+    animation: ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+  }
+
+  @keyframes ui-dialog-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+
+  ui-dialog > dialog::backdrop {
+    background-color: transparent;
+    transition:
+      background-color var(--ui-dialog-duration) var(--ui-motion-ease),
+      display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,
+      overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete;
+  }
+
+  ui-dialog > dialog[open]::backdrop {
+    background-color: var(--ui-overlay-backdrop);
+    animation: ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease);
+  }
+
+  @keyframes ui-dialog-backdrop-enter {
+    from {
+      background-color: transparent;
+    }
+  }
+
+  ui-toast-region {
+    position: fixed;
+    top: var(--ui-space-4);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: grid;
+    gap: var(--ui-space-2);
+    max-width: min(24rem, 90vw);
+    pointer-events: none;
+  }
+
+  ui-toast-region > * {
+    pointer-events: auto;
+  }
+
+  ui-toast-region [data-ui-toast] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--ui-space-2);
+    align-items: start;
+    border: 1px solid var(--ui-border-default);
+    border-radius: var(--ui-radius-3);
+    padding: var(--ui-space-3) var(--ui-space-4);
+    background: var(--ui-surface-elevated);
+    color: var(--ui-text-primary);
+    box-shadow: var(--ui-shadow-lg);
+    animation: ui-toast-enter 0.25s var(--ui-motion-ease) forwards;
+  }
+
+  @keyframes ui-toast-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  ui-toast-region [data-ui-toast][aria-hidden="true"] {
+    display: none;
+  }
+
+  ui-toast-region [data-ui-toast-dismiss] {
+    border: 0;
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    font: inherit;
+  }
+
+  ui-checkbox,
+  ui-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    color: var(--ui-text-primary);
+  }
+
+  ui-checkbox[aria-disabled="true"],
+  ui-switch[aria-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  ui-checkbox input[type="checkbox"] {
+    accent-color: var(--ui-accent-solid);
+    width: 1.125em;
+    height: 1.125em;
+    cursor: pointer;
+  }
+
+  ui-checkbox input[type="checkbox"]:focus-visible,
+  ui-switch input[type="checkbox"]:focus-visible {
+    outline: 2px solid var(--ui-accent-solid);
+    outline-offset: 2px;
+  }
+
+  ui-switch input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    display: block;
+    position: relative;
+    width: 2.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 1px solid var(--ui-border-default);
+    border-radius: 999px;
+    background: var(--ui-surface-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  ui-switch input[type="checkbox"]::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 999px;
+    background: var(--ui-surface-default);
+    border: 1px solid var(--ui-border-default);
+    transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+  }
+
+  ui-switch input[type="checkbox"]:checked {
+    background: var(--ui-accent-solid);
+    border-color: var(--ui-accent-solid);
+  }
+
+  ui-switch input[type="checkbox"]:checked::after {
+    transform: translateX(calc(2.25rem - 0.875rem - 4px));
+    background: var(--ui-text-on-accent);
+    border-color: var(--ui-text-on-accent);
+  }
+
+  ui-radio-group {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+  }
+
+  ui-radio-group[orientation="vertical"] {
+    display: inline-grid;
+    justify-items: start;
+  }
+
+  ui-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    color: var(--ui-text-primary);
+  }
+
+  ui-radio[data-disabled],
+  ui-radio[aria-disabled="true"] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  ui-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--ui-border-default);
+    border-radius: 999px;
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-secondary);
+    font: inherit;
+    font-size: 0.75rem;
+    line-height: 1;
+    padding: 0.25em 0.6em;
+    white-space: nowrap;
+  }
+
+  ui-badge[data-tone="accent"] {
+    background: var(--ui-accent-solid);
+    border-color: var(--ui-accent-solid);
+    color: var(--ui-text-on-accent);
+  }
+
+  ui-badge[data-tone="danger"] {
+    background: var(--ui-danger-solid);
+    border-color: var(--ui-danger-solid);
+    color: var(--ui-text-on-accent);
+  }
+
+  ui-badge[data-tone="success"] {
+    background: var(--ui-success-solid);
+    border-color: var(--ui-success-solid);
+    color: var(--ui-text-on-accent);
+  }
+
+  ui-badge[data-tone="warning"] {
+    background: var(--ui-warning-solid);
+    border-color: var(--ui-warning-solid);
+    color: var(--ui-text-primary);
+  }
+
+  ui-badge[data-tone="info"] {
+    background: var(--ui-info-solid);
+    border-color: var(--ui-info-solid);
+    color: var(--ui-text-on-accent);
+  }
+
+  ui-badge[data-variant="subtle"][data-tone="accent"] {
+    background: var(--ui-accent-soft);
+    border-color: var(--ui-accent-soft);
+    color: var(--ui-accent-solid);
+  }
+
+  ui-badge[data-variant="subtle"][data-tone="danger"] {
+    background: var(--ui-danger-soft);
+    border-color: var(--ui-danger-soft);
+    color: var(--ui-danger-solid);
+  }
+
+  ui-badge[data-variant="subtle"][data-tone="success"] {
+    background: var(--ui-success-soft);
+    border-color: var(--ui-success-soft);
+    color: var(--ui-success-solid);
+  }
+
+  ui-badge[data-variant="subtle"][data-tone="warning"] {
+    background: var(--ui-warning-soft);
+    border-color: var(--ui-warning-soft);
+    color: var(--ui-warning-solid);
+  }
+
+  ui-badge[data-variant="subtle"][data-tone="info"] {
+    background: var(--ui-info-soft);
+    border-color: var(--ui-info-soft);
+    color: var(--ui-info-solid);
+  }
+
+  ui-avatar {
+    display: inline-grid;
+    place-items: center;
+    overflow: hidden;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 999px;
+    border: 1px solid var(--ui-border-default);
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-secondary);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  ui-avatar > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  ui-avatar [data-ui-avatar-fallback] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  ui-avatar-group {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    gap: 0;
+  }
+
+  ui-avatar-group > *:not([data-ui-avatar-group-overflow]) {
+    margin-inline-end: -0.5rem;
+    flex-shrink: 0;
+  }
+
+  ui-avatar-group > *:last-child:not([data-ui-avatar-group-overflow]) {
+    margin-inline-end: 0;
+  }
+
+  ui-avatar-group [data-ui-avatar-group-overflow] {
+    margin-inline-end: -0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: 999px;
+    border: 1px solid var(--ui-border-default);
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-secondary);
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+}
+
+@layer utilities {
+  [data-ui-font-stack="system"],
+  .ui-font-system {
+    --ui-font-family-sans: var(--ui-font-stack-system);
+  }
+
+  [data-ui-font-stack="neo-grotesque"],
+  .ui-font-neo-grotesque {
+    --ui-font-family-sans: var(--ui-font-stack-neo-grotesque);
+  }
+
+  [data-ui-font-stack="humanist"],
+  .ui-font-humanist {
+    --ui-font-family-sans: var(--ui-font-stack-humanist);
+  }
+
+  [data-ui-font-stack="rounded"],
+  .ui-font-rounded {
+    --ui-font-family-sans: var(--ui-font-stack-rounded);
+  }
+
+  .ui-scope {
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-md);
+    line-height: var(--ui-line-height-md);
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-canvas);
+  }
+
+  .ui-scope,
+  .ui-scope *,
+  .ui-scope *::before,
+  .ui-scope *::after {
+    box-sizing: border-box;
+  }
+}