@svadmin/surface 0.8.19 → 0.9.0

package/dist/styles.css

@@ -0,0 +1,1262 @@
+:where(:root, :host, .svadmin-theme, .dark, [data-theme]) {
+    --svadmin-spacing-xs: 0.25rem;
+    --svadmin-spacing-sm: 0.75rem;
+    --svadmin-spacing-md: 1rem;
+    --svadmin-spacing-lg: 1.25rem;
+    --svadmin-spacing-content-stack: var(--spacing);
+    --svadmin-spacing-content-inline: calc(var(--spacing) * 2);
+    --svadmin-spacing-content-section: calc(var(--spacing) * 3);
+    --svadmin-spacing-content-panel: calc(var(--spacing) * 4);
+    --svadmin-spacing-content-page: calc(var(--spacing) * 6);
+    --svadmin-sizes-content-narrow: var(--container-3xl);
+    --svadmin-sizes-content-default: 74rem;
+    --svadmin-sizes-content-wide: 92rem;
+    --svadmin-sizes-content-description: var(--container-2xl);
+    --svadmin-sizes-content-skeleton-height: calc(var(--spacing) * 8);
+    --svadmin-sizes-content-skeleton-width: calc(var(--spacing) * 24);
+    --svadmin-font-sizes-compact: 0.75rem;
+    --svadmin-font-sizes-body: 0.875rem;
+    --svadmin-font-sizes-content-caption: var(--text-xs);
+    --svadmin-font-sizes-content-body: var(--text-sm);
+    --svadmin-font-sizes-content-title: var(--text-xl);
+    --svadmin-font-sizes-content-metric: var(--text-2xl);
+    --svadmin-line-heights-content-caption: var(--text-xs--line-height);
+    --svadmin-line-heights-content-body: var(--text-sm--line-height);
+    --svadmin-line-heights-content-title: var(--leading-tight);
+    --svadmin-line-heights-content-description: calc(var(--spacing) * 6);
+    --svadmin-line-heights-content-metric: var(--text-2xl--line-height);
+    --svadmin-font-weights-content-medium: var(--font-weight-medium);
+    --svadmin-font-weights-content-strong: var(--font-weight-semibold);
+    --svadmin-letter-spacings-content-normal: var(--tracking-normal);
+    --svadmin-shadows-content-card: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --svadmin-colors-surface: var(--card);
+    --svadmin-colors-foreground: var(--foreground);
+    --svadmin-colors-muted: var(--muted-foreground);
+    --svadmin-colors-border: var(--border);
+    --svadmin-colors-success: var(--success);
+    --svadmin-colors-warning: var(--warning);
+    --svadmin-colors-danger: var(--destructive);
+    --svadmin-colors-info: var(--info);
+    --svadmin-colors-content-foreground: var(--color-foreground);
+    --svadmin-colors-content-muted: var(--color-muted-foreground);
+    --svadmin-colors-content-card: var(--color-card);
+    --svadmin-colors-content-border: var(--color-border);
+    --svadmin-colors-content-positive: var(--color-success);
+    --svadmin-colors-content-negative: var(--color-destructive);
+    --svadmin-colors-content-warning: var(--color-warning-foreground);
+    --svadmin-radii-surface: var(--radius-lg);
+    --svadmin-radii-content-card: var(--radius-lg);
+}
+
+@layer components {
+
+.svadmin-ui-badge {
+      border: 1px solid transparent;
+      padding: 0.125rem 0.625rem;
+      gap: 0.25rem;
+      overflow: hidden;
+      border-radius: var(--radius-sm);
+      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1;
+      white-space: nowrap;
+      width: fit-content;
+      min-height: 1.25rem;
+}
+
+.svadmin-ui-badge > svg {
+      pointer-events: none;
+      width: 0.75rem;
+      height: 0.75rem;
+}
+
+.svadmin-ui-button {
+      border: 1px solid transparent;
+      gap: 0.375rem;
+      border-radius: var(--radius-md);
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-clip: padding-box;
+      -webkit-background-clip: padding-box;
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
+      -webkit-user-select: none;
+      user-select: none;
+}
+
+.svadmin-ui-button > svg {
+      flex-shrink: 0;
+      pointer-events: none;
+      width: 1rem;
+      height: 1rem;
+}
+
+.svadmin-ui-button:disabled,.svadmin-ui-button[aria-disabled="true"] {
+      pointer-events: none;
+      opacity: 0.5;
+}
+
+.svadmin-ui-button:active {
+      transform: translateY(1px);
+}
+
+.svadmin-ui-textarea {
+      border: 1px solid var(--border);
+      padding: 0.5rem 0.75rem;
+      background: transparent;
+      font: inherit;
+      border-radius: 0.5rem;
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+      resize: vertical;
+      color: var(--foreground);
+      font-size: 0.875rem;
+      width: 100%;
+      min-height: 5rem;
+}
+
+.svadmin-ui-textarea[aria-invalid="true"] {
+      border-color: var(--destructive);
+      box-shadow: 0 0 0 3px var(--destructive);
+}
+
+.svadmin-ui-textarea:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+.svadmin-ui-textarea::placeholder {
+      color: var(--muted-foreground);
+}
+
+.svadmin-ui-textarea:focus-visible {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px var(--ring);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+      @layer components {
+      .svadmin-ui-textarea[aria-invalid="true"] {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
+}
+
+      .svadmin-ui-textarea:focus-visible {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_default {
+    background: var(--primary);
+    color: var(--primary-foreground);
+}
+
+.svadmin-ui-badge--variant_secondary {
+    background: var(--secondary);
+    color: var(--secondary-foreground);
+}
+
+.svadmin-ui-badge--variant_destructive {
+    background: var(--muted);
+    border-color: var(--destructive);
+    color: var(--foreground);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_destructive {
+      background: color-mix(in oklch, var(--destructive) 10%, transparent);
+      border-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+      color: var(--destructive);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_subtle {
+    background: var(--muted);
+    border-color: var(--primary);
+    color: var(--foreground);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_subtle {
+      background: color-mix(in oklch, var(--primary) 10%, transparent);
+      border-color: color-mix(in oklch, var(--primary) 20%, transparent);
+      color: var(--primary);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_subtle-success {
+    background: var(--muted);
+    border-color: var(--success);
+    color: var(--foreground);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_subtle-success {
+      background: color-mix(in oklch, var(--success) 10%, transparent);
+      border-color: color-mix(in oklch, var(--success) 20%, transparent);
+      color: var(--success);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_subtle-warning {
+    background: var(--muted);
+    border-color: var(--warning);
+    color: var(--foreground);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_subtle-warning {
+      background: color-mix(in oklch, var(--warning) 10%, transparent);
+      border-color: color-mix(in oklch, var(--warning) 20%, transparent);
+      color: var(--warning);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_subtle-destructive {
+    background: var(--muted);
+    border-color: var(--destructive);
+    color: var(--foreground);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_subtle-destructive {
+      background: color-mix(in oklch, var(--destructive) 10%, transparent);
+      border-color: color-mix(in oklch, var(--destructive) 20%, transparent);
+      color: var(--destructive);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_subtle-pill {
+    background: var(--muted);
+    border-color: var(--border);
+    border-radius: 999px;
+    color: var(--muted-foreground);
+    font-weight: 500;
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-badge--variant_subtle-pill {
+      background: color-mix(in oklch, var(--muted) 70%, transparent);
+      border-color: color-mix(in oklch, var(--border) 80%, transparent);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-badge--variant_outline {
+    border-color: var(--color-border, var(--border));
+    color: var(--foreground);
+}
+
+.svadmin-ui-badge--variant_outline:hover,.svadmin-ui-badge--variant_ghost:hover {
+    background: var(--muted);
+    color: var(--muted-foreground);
+}
+
+.svadmin-ui-badge--variant_link {
+    text-decoration: underline;
+    color: var(--primary);
+    text-underline-offset: 0.25rem;
+}
+
+.svadmin-ui-button--variant_default {
+    background: var(--primary);
+    color: var(--primary-foreground);
+}
+
+.svadmin-ui-button--variant_default:hover {
+    background: var(--primary);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-button--variant_default:hover {
+      background: color-mix(in oklch, var(--primary) 80%, var(--foreground));
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-button--size_default {
+    padding: 0 0.75rem;
+    min-height: 2.25rem;
+}
+
+.svadmin-ui-button--variant_outline {
+    background: var(--background);
+    border-color: var(--color-border, var(--border));
+    color: var(--foreground);
+}
+
+.svadmin-ui-button--variant_outline:hover {
+    background: var(--muted);
+}
+
+.svadmin-ui-button--variant_secondary {
+    background: var(--secondary);
+    color: var(--secondary-foreground);
+}
+
+.svadmin-ui-button--variant_secondary:hover,.svadmin-ui-button--variant_ghost:hover,.svadmin-ui-button--variant_destructive {
+    background: var(--muted);
+    color: var(--foreground);
+}
+
+.svadmin-ui-button--variant_destructive {
+    border-color: var(--destructive);
+}
+
+.svadmin-ui-button--variant_destructive:hover {
+    background: var(--muted);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+    @layer components {
+    .svadmin-ui-button--variant_destructive {
+      background: color-mix(in oklch, var(--destructive) 10%, transparent);
+      border-color: transparent;
+      color: var(--destructive);
+}
+
+    .svadmin-ui-button--variant_destructive:hover {
+      background: color-mix(in oklch, var(--destructive) 20%, transparent);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-button--variant_link {
+    text-decoration: underline;
+    color: var(--primary);
+    text-underline-offset: 0.25rem;
+}
+
+.svadmin-ui-button--size_xs {
+    padding: 0 0.5rem;
+    font-size: 0.75rem;
+    min-height: 1.5rem;
+}
+
+.svadmin-ui-button--size_sm {
+    padding: 0 0.75rem;
+    font-size: 0.8rem;
+    min-height: 2rem;
+}
+
+.svadmin-ui-button--size_lg {
+    padding: 0 1rem;
+    min-height: 2.5rem;
+}
+
+.svadmin-ui-button--size_icon {
+    width: 2.25rem;
+    height: 2.25rem;
+}
+
+.svadmin-ui-button--size_icon-xs {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.svadmin-ui-button--size_icon-sm {
+    width: 2rem;
+    height: 2rem;
+}
+
+.svadmin-ui-button--size_icon-lg {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+}
+
+.svadmin-surface-metric__root {
+      min-width: 0;
+}
+
+.svadmin-surface-metric__card {
+      border-inline-start-style: solid;
+      border-inline-start-width: 3px;
+}
+
+.svadmin-surface-metric__description {
+      color: var(--svadmin-colors-muted);
+}
+
+.svadmin-surface-metric__state {
+      --svadmin-metric-state-border-width: 3px;
+}
+
+.svadmin-surface-table__root {
+      min-width: 0;
+}
+
+.svadmin-surface-table__state {
+      color: var(--svadmin-colors-muted);
+}
+
+:where(.svadmin-content-header__root > :not(:last-child)) {
+      margin-block-start: 0px;
+      margin-block-end: var(--svadmin-spacing-content-section);
+}
+
+.svadmin-content-header__breadcrumbs {
+      gap: var(--svadmin-spacing-content-inline);
+      display: flex;
+      align-items: center;
+      font-size: var(--svadmin-font-sizes-content-caption);
+      line-height: var(--svadmin-line-heights-content-caption);
+      color: var(--svadmin-colors-content-muted);
+}
+
+.svadmin-content-header__currentCrumb {
+      color: var(--svadmin-colors-content-foreground);
+}
+
+.svadmin-content-header__row {
+      gap: var(--svadmin-spacing-content-panel);
+      display: flex;
+      flex-direction: column;
+}
+
+.svadmin-content-header__heading {
+      min-width: 0px;
+}
+
+:where(.svadmin-content-header__heading > :not(:last-child)) {
+      margin-block-start: 0px;
+      margin-block-end: var(--svadmin-spacing-content-stack);
+}
+
+.svadmin-content-header__eyebrow {
+      font-size: var(--svadmin-font-sizes-content-caption);
+      line-height: var(--svadmin-line-heights-content-caption);
+      font-weight: var(--svadmin-font-weights-content-medium);
+      color: var(--svadmin-colors-content-muted);
+}
+
+.svadmin-content-header__title {
+      font-size: var(--svadmin-font-sizes-content-title);
+      line-height: var(--svadmin-line-heights-content-title);
+      font-weight: var(--svadmin-font-weights-content-strong);
+      letter-spacing: var(--svadmin-letter-spacings-content-normal);
+      color: var(--svadmin-colors-content-foreground);
+}
+
+.svadmin-content-header__description {
+      font-size: var(--svadmin-font-sizes-content-body);
+      line-height: var(--svadmin-line-heights-content-description);
+      color: var(--svadmin-colors-content-muted);
+      max-width: var(--svadmin-sizes-content-description);
+}
+
+.svadmin-content-header__actions {
+      gap: var(--svadmin-spacing-content-inline);
+      display: flex;
+      flex-shrink: 0;
+      flex-wrap: wrap;
+      align-items: center;
+}
+
+.svadmin-content-page__root {
+      margin-inline: auto;
+      width: 100%;
+}
+
+:where(.svadmin-content-page__root > :not(:last-child)) {
+      margin-block-start: 0px;
+      margin-block-end: var(--svadmin-spacing-content-page);
+}
+
+.svadmin-metric-block__root {
+      padding: var(--svadmin-spacing-content-panel);
+      border-radius: var(--svadmin-radii-content-card);
+      border-style: solid;
+      border-width: 1px;
+      border-color: var(--svadmin-colors-content-border);
+      background-color: var(--svadmin-colors-content-card);
+      box-shadow: var(--svadmin-shadows-content-card);
+      min-width: 0px;
+}
+
+.layout-clean-flat [data-svadmin-content-page] .svadmin-metric-block__root {
+      background: var(--svadmin-surface);
+      border-color: var(--svadmin-border);
+      border-radius: var(--svadmin-radii-content-card);
+      box-shadow: var(--svadmin-surface-shadow);
+      min-width: 0px;
+}
+
+.svadmin-metric-block__header {
+      gap: var(--svadmin-spacing-content-section);
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+}
+
+.svadmin-metric-block__label {
+      font-size: var(--svadmin-font-sizes-content-body);
+      line-height: var(--svadmin-line-heights-content-body);
+}
+
+.svadmin-metric-block__label,.svadmin-metric-block__icon {
+      color: var(--svadmin-colors-content-muted);
+}
+
+.svadmin-metric-block__skeleton {
+      margin-top: var(--svadmin-spacing-content-section);
+      height: var(--svadmin-sizes-content-skeleton-height);
+      width: var(--svadmin-sizes-content-skeleton-width);
+}
+
+.svadmin-metric-block__value {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--svadmin-font-sizes-content-metric);
+      line-height: var(--svadmin-line-heights-content-metric);
+      font-weight: var(--svadmin-font-weights-content-strong);
+      letter-spacing: var(--svadmin-letter-spacings-content-normal);
+      color: var(--svadmin-colors-content-foreground);
+      font-variant-numeric: tabular-nums;
+      margin-top: var(--svadmin-spacing-content-inline);
+}
+
+.svadmin-metric-block__meta {
+      gap: var(--svadmin-spacing-content-inline);
+      display: flex;
+      flex-wrap: wrap;
+      font-size: var(--svadmin-font-sizes-content-caption);
+      line-height: var(--svadmin-line-heights-content-caption);
+      margin-top: var(--svadmin-spacing-content-inline);
+}
+
+.svadmin-metric-block__trend {
+      font-weight: var(--svadmin-font-weights-content-medium);
+      font-variant-numeric: tabular-nums;
+}
+
+.svadmin-metric-block__detail {
+      color: var(--svadmin-colors-content-muted);
+}
+
+.svadmin-product-toolbar__root {
+      gap: calc(var(--spacing, 0.25rem) * 3);
+      padding-block: calc(var(--spacing, 0.25rem) * 3);
+      border-bottom: 1px solid;
+      border-color: var(--svadmin-colors-border);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      min-width: 0;
+}
+
+.svadmin-product-toolbar__leading {
+      flex: 1 1 16rem;
+}
+
+.svadmin-product-toolbar__leading,.svadmin-product-toolbar__trailing {
+      gap: calc(var(--spacing, 0.25rem) * 2);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      min-width: 0;
+}
+
+.svadmin-product-toolbar__trailing {
+      margin-inline-start: auto;
+}
+
+.svadmin-product-section__root {
+      gap: calc(var(--spacing, 0.25rem) * 3);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+}
+
+.svadmin-product-section__heading {
+      flex: 1 1 16rem;
+      min-width: 0;
+}
+
+.svadmin-product-section__title {
+      margin: 0;
+      color: var(--svadmin-colors-foreground);
+      font-size: 1rem;
+      line-height: 1.5;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+}
+
+.svadmin-product-section__description {
+      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
+      color: var(--svadmin-colors-muted);
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      max-width: 65ch;
+}
+
+.svadmin-product-section__actions {
+      gap: calc(var(--spacing, 0.25rem) * 2);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      flex-shrink: 0;
+      min-width: 0;
+}
+
+.svadmin-product-settings-row__root {
+      gap: calc(var(--spacing, 0.25rem) * 3);
+      padding-block: calc(var(--spacing, 0.25rem) * 5);
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      align-items: start;
+      min-width: 0;
+}
+
+.svadmin-product-settings-row__heading {
+      min-width: 0;
+}
+
+.svadmin-product-settings-row__label {
+      margin: 0;
+      color: var(--svadmin-colors-foreground);
+      font-size: var(--svadmin-font-sizes-body);
+      line-height: 1.5;
+      font-weight: 500;
+      overflow-wrap: anywhere;
+}
+
+.svadmin-product-settings-row__description {
+      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
+      color: var(--svadmin-colors-muted);
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      overflow-wrap: anywhere;
+      max-width: 52ch;
+}
+
+.svadmin-product-settings-row__control {
+      min-width: 0;
+      max-width: 100%;
+}
+
+.svadmin-product-settings__root {
+      color: var(--svadmin-colors-foreground);
+      font-size: var(--svadmin-font-sizes-body);
+      line-height: 1.5;
+      min-width: 0;
+}
+
+.svadmin-product-settings__header {
+      gap: calc(var(--spacing, 0.25rem) * 3);
+      padding-block: calc(var(--spacing, 0.25rem) * 4);
+      border-bottom: 1px solid;
+      border-color: var(--svadmin-colors-border);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+}
+
+.svadmin-product-settings__heading {
+      flex: 1 1 16rem;
+      min-width: 0;
+}
+
+.svadmin-product-settings__title {
+      margin: 0;
+      color: var(--svadmin-colors-foreground);
+      font-size: 1rem;
+      line-height: 1.5;
+      font-weight: 600;
+      overflow-wrap: anywhere;
+}
+
+.svadmin-product-settings__description {
+      margin: calc(var(--spacing, 0.25rem) * 1) 0 0;
+      color: var(--svadmin-colors-muted);
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      max-width: 65ch;
+}
+
+.svadmin-product-settings__actions {
+      gap: calc(var(--spacing, 0.25rem) * 2);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      flex-shrink: 0;
+      min-width: 0;
+}
+
+.svadmin-product-settings__body {
+      padding-block: calc(var(--spacing, 0.25rem) * 1);
+      min-width: 0;
+}
+
+.svadmin-product-status__root {
+      --svadmin-status-color: var(--muted-foreground);
+}
+
+.svadmin-product-status__root[data-slot=badge] {
+      background: var(--muted);
+      border-color: var(--svadmin-status-color);
+      color: var(--foreground);
+      white-space: nowrap;
+}
+
+@supports (color: color-mix(in oklab, black, white)) {
+      .svadmin-product-status__root[data-slot=badge] {
+        background: color-mix(in oklab, var(--svadmin-status-color) 10%, var(--card));
+        border-color: color-mix(in oklab, var(--svadmin-status-color) 25%, var(--card));
+        color: color-mix(in oklab, var(--svadmin-status-color) 35%, var(--foreground));
+}
+}
+
+.svadmin-product-workspace__root {
+      gap: calc(var(--spacing, 0.25rem) * 6);
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+}
+
+.svadmin-product-workspace__summary {
+      min-width: 0;
+}
+
+.svadmin-product-workspace__columns {
+      gap: calc(var(--spacing, 0.25rem) * 8);
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      align-items: start;
+      min-width: 0;
+}
+
+.svadmin-product-workspace__primary {
+      min-width: 0;
+}
+
+.svadmin-product-workspace__secondary {
+      gap: calc(var(--spacing, 0.25rem) * 6);
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+}
+
+@layer components {
+
+.svadmin-ui-input__root {
+      position: relative;
+}
+
+.svadmin-ui-input__root,.svadmin-ui-input__control {
+      width: 100%;
+      min-width: 0;
+      height: 2.25rem;
+}
+
+.svadmin-ui-input__control {
+      border: 1px solid var(--border);
+      background: transparent;
+      border-radius: 0.5rem;
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+      color: var(--foreground);
+}
+
+.svadmin-ui-input__control:not([data-input-type="file"]) {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.875rem;
+}
+
+.svadmin-ui-input__control[data-input-type="file"] {
+      inset: 0;
+      border: 0;
+      padding: 0;
+      position: absolute;
+      z-index: 1;
+      opacity: 0;
+      appearance: none;
+      -webkit-appearance: none;
+      cursor: pointer;
+      height: 100%;
+}
+
+.svadmin-ui-input__control[aria-invalid="true"] {
+      border-color: var(--destructive);
+      box-shadow: 0 0 0 3px var(--destructive);
+}
+
+.svadmin-ui-input__control:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+.svadmin-ui-input__control::placeholder {
+      color: var(--muted-foreground);
+}
+
+.svadmin-ui-input__control[data-input-type="file"]:focus-visible + .svadmin-file-input__visual,.svadmin-ui-input__control:focus-visible {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px var(--ring);
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+      @layer components {
+      .svadmin-ui-input__control[aria-invalid="true"] {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
+}
+
+      .svadmin-ui-input__control[data-input-type="file"]:focus-visible + .svadmin-file-input__visual,.svadmin-ui-input__control:focus-visible {
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-input__visual {
+      border: 1px solid var(--border);
+      background: var(--card);
+      padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+      gap: 0.75rem;
+      overflow: hidden;
+      border-radius: 0.5rem;
+      transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+      display: flex;
+      align-items: center;
+      box-shadow: var(--shadow-control);
+      color: var(--muted-foreground);
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+}
+
+.svadmin-file-input[data-disabled="true"] .svadmin-ui-input__visual {
+      opacity: 0.5;
+}
+
+.svadmin-ui-input__button {
+      border: 1px solid var(--border);
+      padding: 0 0.625rem;
+      background: var(--muted);
+      font: inherit;
+      flex: 0 0 auto;
+      border-radius: 0.375rem;
+      display: inline-flex;
+      align-items: center;
+      color: var(--foreground);
+      font-size: 0.75rem;
+      white-space: nowrap;
+      height: 1.75rem;
+}
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+      @layer components {
+      .svadmin-ui-input__button {
+        border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
+}
+    }
+}
+
+@layer components {
+
+.svadmin-ui-input__name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+}
+
+.svadmin-product-list__filters {
+      gap: calc(var(--spacing, 0.25rem) * 1);
+      border-bottom: 1px solid;
+      border-color: var(--svadmin-colors-border);
+      padding-bottom: calc(var(--spacing, 0.25rem) * 3);
+}
+
+.svadmin-product-list__filters,.svadmin-product-list__filter {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      min-width: 0;
+}
+
+.svadmin-product-list__filter {
+      border: 0;
+      background: transparent;
+      padding: calc(var(--spacing, 0.25rem) * 1.5) calc(var(--spacing, 0.25rem) * 3);
+      gap: calc(var(--spacing, 0.25rem) * 2);
+      border-radius: var(--radius-md);
+      color: var(--svadmin-colors-muted);
+      font-size: var(--svadmin-font-sizes-body);
+      font-weight: 500;
+      cursor: pointer;
+}
+
+.svadmin-product-list__filter[aria-pressed=true] {
+      background: var(--accent);
+      color: var(--accent-foreground);
+}
+
+.svadmin-product-list__filter:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+}
+
+.svadmin-product-list__filter:hover {
+      background: var(--muted);
+}
+
+.svadmin-product-list__filterCount {
+      font-size: var(--svadmin-font-sizes-compact);
+      font-variant-numeric: tabular-nums;
+      color: inherit;
+}
+
+.svadmin-product-list__table {
+      border-block: 1px solid;
+      border-color: var(--svadmin-colors-border);
+      min-width: 0;
+      max-width: 100%;
+      overflow-x: auto;
+}
+
+.svadmin-product-list__table [data-slot=table-head] {
+      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
+      border-bottom: 1px solid;
+      border-color: var(--svadmin-colors-border);
+      color: var(--svadmin-colors-muted);
+      font-size: 0.8125rem;
+      font-weight: 500;
+      text-align: start;
+      white-space: nowrap;
+}
+
+.svadmin-product-list__table [data-slot=table-cell] {
+      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
+      vertical-align: middle;
+}
+
+.svadmin-product-list__table [data-slot=table-caption] {
+      padding: calc(var(--spacing, 0.25rem) * 3) calc(var(--spacing, 0.25rem) * 4);
+      text-align: start;
+      color: var(--svadmin-colors-muted);
+      font-size: var(--svadmin-font-sizes-compact);
+}
+
+.svadmin-product-list__table > [data-slot=table-container] {
+      overflow: visible;
+}
+
+.svadmin-product-list__table tbody [data-slot=table-row]:not(:last-child) {
+      border-bottom: 1px solid;
+      border-color: var(--svadmin-colors-border);
+}
+
+.svadmin-product-list__table [data-table-density=comfortable] [data-slot=table-cell] {
+      padding-block: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.svadmin-product-list__table [data-slot=table] {
+      border-collapse: collapse;
+      font-size: var(--svadmin-font-sizes-body);
+      width: 100%;
+}
+
+.svadmin-product-list__table [data-align=end] {
+      text-align: end;
+}
+
+.svadmin-product-list__table:focus-visible {
+      outline: 2px solid var(--ring);
+      outline-offset: 2px;
+}
+
+.svadmin-product-list__table tbody [data-slot=table-row]:hover {
+      background: var(--muted);
+}
+
+.svadmin-product-list__identity {
+      gap: calc(var(--spacing, 0.25rem) * 3);
+      display: flex;
+      align-items: center;
+      min-width: 12rem;
+}
+
+.svadmin-product-list__avatar {
+      background: var(--muted);
+      border: 1px solid;
+      place-items: center;
+      border-color: var(--svadmin-colors-border);
+      border-radius: var(--radius-md);
+      display: grid;
+      flex-shrink: 0;
+      color: var(--svadmin-colors-muted);
+      font-size: var(--svadmin-font-sizes-compact);
+      font-weight: 600;
+      width: 2rem;
+      height: 2rem;
+}
+
+.svadmin-product-list__name {
+      color: var(--svadmin-colors-foreground);
+      font-size: var(--svadmin-font-sizes-body);
+      line-height: 1.5;
+      font-weight: 500;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      max-width: 28rem;
+}
+
+.svadmin-product-list__secondary {
+      color: var(--svadmin-colors-muted);
+      font-size: var(--svadmin-font-sizes-compact);
+      line-height: 1.5;
+      display: block;
+      overflow-wrap: anywhere;
+}
+
+.svadmin-product-list__numeric {
+      font-variant-numeric: tabular-nums;
+      text-align: end;
+      white-space: nowrap;
+}
+
+.svadmin-product-list__footer {
+      gap: calc(var(--spacing, 0.25rem) * 2);
+      padding-block: calc(var(--spacing, 0.25rem) * 3);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      min-width: 0;
+}
+
+.svadmin-product-list__footer,.svadmin-product-list__help {
+      color: var(--svadmin-colors-muted);
+      font-size: 0.8125rem;
+}
+
+.svadmin-product-list__help {
+      margin: 0;
+      line-height: 1.5;
+      max-width: 65ch;
+}
+
+@media (width >= 40rem) {
+      .svadmin-content-header__row {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+}
+}
+
+@media (min-width: 48rem) {
+      .svadmin-product-settings-row__root {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        column-gap: calc(var(--spacing, 0.25rem) * 6);
+}
+}
+
+.svadmin-surface-metric__card--tone_neutral {
+    border-inline-start-color: var(--svadmin-colors-border);
+}
+
+.svadmin-surface-metric__state--tone_neutral {
+    --svadmin-metric-state-accent: var(--svadmin-colors-border);
+}
+
+.svadmin-surface-metric__card--density_comfortable {
+    padding: var(--svadmin-spacing-lg);
+}
+
+.svadmin-surface-metric__state--density_comfortable {
+    --svadmin-metric-state-padding: 1.25rem;
+    --svadmin-metric-state-height: 6rem;
+}
+
+.svadmin-surface-metric__card--tone_success {
+    border-inline-start-color: var(--svadmin-colors-success);
+}
+
+.svadmin-surface-metric__state--tone_success {
+    --svadmin-metric-state-accent: var(--svadmin-colors-success);
+}
+
+.svadmin-surface-metric__card--tone_warning {
+    border-inline-start-color: var(--svadmin-colors-warning);
+}
+
+.svadmin-surface-metric__state--tone_warning {
+    --svadmin-metric-state-accent: var(--svadmin-colors-warning);
+}
+
+.svadmin-surface-metric__card--tone_danger {
+    border-inline-start-color: var(--svadmin-colors-danger);
+}
+
+.svadmin-surface-metric__state--tone_danger {
+    --svadmin-metric-state-accent: var(--svadmin-colors-danger);
+}
+
+.svadmin-surface-metric__card--tone_info {
+    border-inline-start-color: var(--svadmin-colors-info);
+}
+
+.svadmin-surface-metric__state--tone_info {
+    --svadmin-metric-state-accent: var(--svadmin-colors-info);
+}
+
+.svadmin-surface-metric__card--density_compact {
+    padding: var(--svadmin-spacing-sm);
+}
+
+.svadmin-surface-metric__state--density_compact {
+    --svadmin-metric-state-padding: 0.75rem;
+    --svadmin-metric-state-height: 4.5rem;
+}
+
+.svadmin-surface-table__header--density_comfortable,.svadmin-surface-table__content--density_comfortable {
+    padding-inline: var(--svadmin-spacing-md);
+}
+
+.svadmin-surface-table__head--density_comfortable[data-slot="table-head"],.svadmin-surface-table__cell--density_comfortable[data-slot="table-cell"] {
+    padding-block: 0.5rem;
+    font-size: var(--svadmin-font-sizes-body);
+}
+
+.svadmin-surface-table__state--density_comfortable {
+    --svadmin-table-state-height: 8rem;
+}
+
+.svadmin-surface-table__header--density_compact,.svadmin-surface-table__content--density_compact {
+    padding-inline: var(--svadmin-spacing-sm);
+}
+
+.svadmin-surface-table__head--density_compact[data-slot="table-head"],.svadmin-surface-table__cell--density_compact[data-slot="table-cell"] {
+    padding-block: var(--svadmin-spacing-xs);
+    font-size: var(--svadmin-font-sizes-compact);
+}
+
+.svadmin-surface-table__state--density_compact {
+    --svadmin-table-state-height: 6rem;
+}
+
+.svadmin-content-page__root--width_default {
+    max-width: var(--svadmin-sizes-content-default);
+}
+
+.svadmin-content-page__root--width_narrow {
+    max-width: var(--svadmin-sizes-content-narrow);
+}
+
+.svadmin-content-page__root--width_wide {
+    max-width: var(--svadmin-sizes-content-wide);
+}
+
+.svadmin-metric-block__trend--trendTone_neutral {
+    color: var(--svadmin-colors-content-muted);
+}
+
+.svadmin-metric-block__trend--trendTone_positive {
+    color: var(--svadmin-colors-content-positive);
+}
+
+.svadmin-metric-block__trend--trendTone_negative {
+    color: var(--svadmin-colors-content-negative);
+}
+
+.svadmin-metric-block__trend--trendTone_warning {
+    color: var(--svadmin-colors-content-warning);
+}
+
+.svadmin-product-settings-row__root--separated_true {
+    border-top: 1px solid;
+    border-color: var(--svadmin-colors-border);
+}
+
+.svadmin-product-status__root--status_neutral {
+    --svadmin-status-color: var(--muted-foreground);
+}
+
+.svadmin-product-status__root--status_success {
+    --svadmin-status-color: var(--success);
+}
+
+.svadmin-product-status__root--status_warning {
+    --svadmin-status-color: var(--warning);
+}
+
+.svadmin-product-status__root--status_danger {
+    --svadmin-status-color: var(--destructive);
+}
+
+.svadmin-product-status__root--status_info {
+    --svadmin-status-color: var(--info);
+}
+
+@media (min-width: 64rem) {
+    .svadmin-product-workspace__columns--hasSecondary_true {
+      grid-template-columns: minmax(0, 1fr) minmax(0, var(--workspace-secondary-width, 22rem));
+}
+    .svadmin-product-workspace__primary--hasSecondary_true {
+      order: 1;
+}
+    .svadmin-product-workspace__secondary--hasSecondary_true {
+      order: 2;
+}
+}