@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/Steps.css

@@ -0,0 +1,201 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Step--neutral {
+    --greese-step-tone: var(--greese-color-fg);
+    --greese-step-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Step--muted {
+    --greese-step-tone: var(--greese-color-fg-muted);
+    --greese-step-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Step--primary {
+    --greese-step-tone: var(--greese-color-primary);
+    --greese-step-tone-on: var(--greese-color-primary-content);
+  }
+  .greese-Step--secondary {
+    --greese-step-tone: var(--greese-color-secondary);
+    --greese-step-tone-on: var(--greese-color-secondary-content);
+  }
+  .greese-Step--tertiary {
+    --greese-step-tone: var(--greese-color-tertiary);
+    --greese-step-tone-on: var(--greese-color-tertiary-content);
+  }
+  .greese-Step--accent {
+    --greese-step-tone: var(--greese-color-accent);
+    --greese-step-tone-on: var(--greese-color-accent-content);
+  }
+  .greese-Step--positive {
+    --greese-step-tone: var(--greese-color-positive);
+    --greese-step-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Step--negative {
+    --greese-step-tone: var(--greese-color-negative);
+    --greese-step-tone-on: var(--greese-color-negative-content);
+  }
+  .greese-Step--warning {
+    --greese-step-tone: var(--greese-color-warning);
+    --greese-step-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Step--info {
+    --greese-step-tone: var(--greese-color-info);
+    --greese-step-tone-on: var(--greese-color-canvas);
+  }
+  .greese-Step--neutral {
+    --greese-step-tone: var(--greese-color-fg-muted);
+  }
+  .greese-Steps {
+    box-sizing: border-box;
+    --greese-steps-marker: 2rem;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+  .greese-Steps--dots {
+    --greese-steps-marker: 1.25rem;
+  }
+  .greese-Step {
+    position: relative;
+    min-inline-size: 0;
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Step-marker {
+    position: relative;
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    inline-size: var(--greese-steps-marker);
+    block-size: var(--greese-steps-marker);
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg-muted);
+    background-color: var(--greese-color-canvas);
+    border: 2px solid var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-round);
+  }
+  .greese-Step-marker > svg {
+    inline-size: min(1rem, 65%);
+    block-size: min(1rem, 65%);
+  }
+  .greese-Step--current .greese-Step-marker,
+  .greese-Step--event .greese-Step-marker {
+    color: var(--greese-step-tone);
+    border-color: var(--greese-step-tone);
+  }
+  .greese-Step--complete .greese-Step-marker,
+  .greese-Steps--dots .greese-Step--event .greese-Step-marker {
+    color: var(--greese-step-tone-on);
+    background-color: var(--greese-step-tone);
+    border-color: var(--greese-step-tone);
+  }
+  .greese-Steps--dots .greese-Step--current .greese-Step-marker:empty::before {
+    inline-size: 45%;
+    block-size: 45%;
+    content: "";
+    background-color: currentcolor;
+    border-radius: var(--greese-corner-round);
+  }
+  .greese-Step-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-1);
+    min-inline-size: 0;
+  }
+  .greese-Step-title {
+    font-size: var(--greese-type-p3-font-size);
+    font-weight: var(--greese-font-weight-medium);
+  }
+  .greese-Step--current .greese-Step-title,
+  .greese-Step--complete .greese-Step-title,
+  .greese-Step--event .greese-Step-title {
+    color: var(--greese-color-fg);
+  }
+  .greese-Step-prefix {
+    font-size: var(--greese-type-caption-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Step-description {
+    font-size: var(--greese-type-p3-font-size);
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-Steps--horizontal {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+  }
+  .greese-Steps--horizontal > .greese-Step {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 7rem;
+    padding-block-end: var(--greese-space-2);
+    text-align: center;
+    container-type: inline-size;
+  }
+  .greese-Steps--horizontal > .greese-Step:not(:last-child) > .greese-Step-marker::after {
+    position: absolute;
+    inset-block-start: calc(50% - 1px);
+    inset-inline-start: calc(100% + var(--greese-space-2));
+    inline-size: calc(100cqi - var(--greese-steps-marker) - 2 * var(--greese-space-2));
+    block-size: 2px;
+    content: "";
+    background-color: var(--greese-color-border);
+  }
+  .greese-Steps--horizontal > .greese-Step--complete:not(:last-child) > .greese-Step-marker::after {
+    background-color: var(--greese-step-tone);
+  }
+  .greese-Steps--horizontal:has(> .greese-Step--prefix-before) > .greese-Step:not(.greese-Step--prefix-before)::before {
+    block-size: 1lh;
+    font-size: var(--greese-type-caption-font-size);
+    content: "";
+  }
+  .greese-Steps--horizontal > .greese-Step > .greese-Step-prefix {
+    white-space: nowrap;
+  }
+  .greese-Steps--vertical {
+    --greese-steps-before: 0px;
+    flex-direction: column;
+  }
+  .greese-Steps--vertical:has(> .greese-Step--prefix-before) {
+    --greese-steps-before: calc(
+      var(--greese-steps-prefix, 6rem) + var(--greese-space-3)
+    );
+  }
+  .greese-Steps--vertical > .greese-Step {
+    display: grid;
+    grid-template-columns: var(--greese-steps-marker) minmax(0, 1fr);
+    column-gap: var(--greese-space-3);
+    padding-block-end: var(--greese-space-5);
+  }
+  .greese-Steps--vertical:has(> .greese-Step--prefix-before) > .greese-Step {
+    grid-template-columns: var(--greese-steps-prefix, 6rem) var(--greese-steps-marker) minmax(0, 1fr);
+  }
+  .greese-Steps--vertical:has(> .greese-Step--prefix-before) > .greese-Step > .greese-Step-marker {
+    grid-column: 2;
+  }
+  .greese-Steps--vertical:has(> .greese-Step--prefix-before) > .greese-Step > .greese-Step-body {
+    grid-column: 3;
+  }
+  .greese-Steps--vertical > .greese-Step > .greese-Step-prefix {
+    grid-row: 1;
+    grid-column: 1;
+    text-align: end;
+  }
+  .greese-Steps--vertical > .greese-Step > .greese-Step-body,
+  .greese-Steps--vertical > .greese-Step > .greese-Step-prefix {
+    padding-block-start: max(0px, (var(--greese-steps-marker) - 1lh) / 2);
+  }
+  .greese-Steps--vertical > .greese-Step:not(:last-child)::after {
+    position: absolute;
+    inset-block: calc(var(--greese-steps-marker) + var(--greese-space-1)) var(--greese-space-1);
+    inset-inline-start: calc(var(--greese-steps-before) + var(--greese-steps-marker) / 2 - 1px);
+    inline-size: 2px;
+    content: "";
+    background-color: var(--greese-color-border);
+  }
+  .greese-Steps--vertical > .greese-Step--complete:not(:last-child)::after {
+    background-color: var(--greese-step-tone);
+  }
+}

package/dist/css/Swap.css

@@ -0,0 +1,49 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Swap {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 2.75rem;
+    min-block-size: 2.75rem;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-control);
+  }
+  .greese-Swap:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (hover: hover) {
+    .greese-Swap:hover {
+      background-color: color-mix(in oklab, currentcolor 8%, transparent);
+    }
+  }
+  .greese-Swap svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+  .greese-Swap-on,
+  .greese-Swap-off {
+    display: inline-flex;
+    grid-area: 1/1;
+    transition: opacity var(--greese-duration-normal) var(--greese-easing-standard), rotate var(--greese-duration-normal) var(--greese-easing-standard), scale var(--greese-duration-normal) var(--greese-easing-standard);
+  }
+  .greese-Swap[aria-pressed=true] .greese-Swap-off,
+  .greese-Swap[aria-pressed=false] .greese-Swap-on {
+    opacity: 0;
+  }
+  .greese-Swap--rotate[aria-pressed=true] .greese-Swap-off {
+    rotate: 45deg;
+  }
+  .greese-Swap--rotate[aria-pressed=false] .greese-Swap-on {
+    rotate: -45deg;
+  }
+  .greese-Swap--flip[aria-pressed=true] .greese-Swap-off, .greese-Swap--flip[aria-pressed=false] .greese-Swap-on {
+    scale: -1 1;
+  }
+}

package/dist/css/Switch.css

@@ -0,0 +1,66 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Switch-track {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    inline-size: 2.25rem;
+    block-size: 1.25rem;
+    margin-block: calc((1lh - 1.25rem) / 2);
+  }
+  @media (pointer: coarse) {
+    .greese-Switch-input::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Switch-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: pointer;
+    background-color: var(--greese-color-border-strong);
+    border-radius: var(--greese-corner-pill);
+    appearance: none;
+  }
+  .greese-Switch-input:disabled {
+    cursor: not-allowed;
+  }
+  .greese-Switch-input {
+    transition: background-color var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Switch-input:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Switch-input:checked {
+    background-color: var(--greese-color-primary);
+  }
+  .greese-Switch-input[aria-invalid=true] {
+    outline: 2px solid var(--greese-color-negative);
+    outline-offset: 1px;
+  }
+  .greese-Switch-thumb {
+    position: relative;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin-inline-start: 0.125rem;
+    pointer-events: none;
+    background-color: var(--greese-color-canvas);
+    border-radius: var(--greese-corner-round);
+    box-shadow: var(--greese-shadow-sm);
+    transition: translate var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Switch-input:checked + .greese-Switch-thumb {
+    translate: 1rem 0;
+  }
+  .greese-Switch-input:checked + .greese-Switch-thumb:dir(rtl) {
+    translate: -1rem 0;
+  }
+}

package/dist/css/Table.css

@@ -0,0 +1,269 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Table {
+    box-sizing: border-box;
+  }
+  .greese-Table:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-Table {
+    max-inline-size: 100%;
+    max-block-size: var(--greese-table-max-height, none);
+    overflow: auto;
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-Table-table {
+    inline-size: 100%;
+    font-size: var(--greese-type-p3-font-size);
+    font-variant-numeric: tabular-nums;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+  .greese-Table-caption {
+    padding: var(--greese-space-3) var(--greese-space-4);
+    font-weight: var(--greese-font-weight-semibold);
+    text-align: start;
+    caption-side: top;
+  }
+  .greese-Table--comfortable {
+    --greese-table-cell-padding: var(--greese-space-3) var(--greese-space-4);
+  }
+  .greese-Table--compact {
+    --greese-table-cell-padding: var(--greese-space-1) var(--greese-space-3);
+  }
+  .greese-TableHeaderCell,
+  .greese-TableCell {
+    padding: var(--greese-table-cell-padding);
+    text-align: start;
+    vertical-align: middle;
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+  .greese-TableHeaderCell {
+    font-weight: var(--greese-font-weight-semibold);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    background-color: var(--greese-color-surface);
+  }
+  .greese-TableRow:last-child > .greese-TableCell {
+    border-block-end: 0;
+  }
+  .greese-Table [data-align=center] {
+    text-align: center;
+  }
+  .greese-Table [data-align=end] {
+    text-align: end;
+  }
+  .greese-Table--striped tbody > .greese-TableRow:nth-child(even) {
+    background-color: color-mix(in oklab, var(--greese-color-surface) 60%, transparent);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Table tbody > .greese-TableRow {
+      animation-name: var(--greese-motion-rows, none);
+      animation-duration: var(--greese-motion-rows-duration, var(--greese-duration-slow));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(2) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 1);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(3) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 2);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(4) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 3);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(5) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 4);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(6) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 5);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(7) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 6);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(8) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 7);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(9) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 8);
+  }
+  .greese-Table tbody > .greese-TableRow:nth-child(10) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 9);
+  }
+  @media (hover: hover) {
+    .greese-Table--hoverable tbody > .greese-TableRow:hover {
+      background-color: color-mix(in oklab, var(--greese-color-primary) 6%, transparent);
+    }
+  }
+  .greese-Table--sticky thead .greese-TableHeaderCell {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+  }
+  .greese-TableHeaderCell-sort:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-TableHeaderCell-sort {
+    display: inline-flex;
+    gap: var(--greese-space-1);
+    align-items: center;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-TableHeaderCell-sort > svg {
+    inline-size: 1em;
+    block-size: 1em;
+  }
+  @media (hover: hover) {
+    .greese-TableHeaderCell-sort:hover {
+      color: var(--greese-color-fg);
+    }
+  }
+  .greese-TableHeaderCell-sort > svg path {
+    opacity: 0.35;
+  }
+  .greese-TableHeaderCell-sort[data-sort=ascending] > svg path:first-child, .greese-TableHeaderCell-sort[data-sort=descending] > svg path:last-child {
+    opacity: 1;
+  }
+  @media (width < 600px) {
+    .greese-Table--stack-below-sm {
+      border: 0;
+    }
+    .greese-Table--stack-below-sm .greese-Table-table,
+    .greese-Table--stack-below-sm tbody,
+    .greese-Table--stack-below-sm tfoot,
+    .greese-Table--stack-below-sm .greese-TableRow,
+    .greese-Table--stack-below-sm .greese-TableCell {
+      display: block;
+    }
+    .greese-Table--stack-below-sm .greese-Table-caption {
+      display: block;
+      padding-inline: 0;
+    }
+    .greese-Table--stack-below-sm thead {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+    .greese-Table--stack-below-sm .greese-TableRow {
+      padding: var(--greese-space-2) var(--greese-space-3);
+      margin-block-end: var(--greese-space-3);
+      background-color: var(--greese-color-surface-overlay);
+      border: 1px solid var(--greese-color-border);
+      border-radius: var(--greese-corner-panel);
+    }
+    .greese-Table--stack-below-sm .greese-TableCell {
+      display: grid;
+      grid-template-columns: minmax(6rem, 40%) 1fr;
+      gap: var(--greese-space-3);
+      justify-items: start;
+      padding: var(--greese-space-1) 0;
+      text-align: start;
+      border: 0;
+    }
+    .greese-Table--stack-below-sm .greese-TableCell::before {
+      font-weight: var(--greese-font-weight-medium);
+      color: var(--greese-color-fg-muted);
+      content: attr(data-label);
+    }
+  }
+  @media (width < 900px) {
+    .greese-Table--stack-below-md {
+      border: 0;
+    }
+    .greese-Table--stack-below-md .greese-Table-table,
+    .greese-Table--stack-below-md tbody,
+    .greese-Table--stack-below-md tfoot,
+    .greese-Table--stack-below-md .greese-TableRow,
+    .greese-Table--stack-below-md .greese-TableCell {
+      display: block;
+    }
+    .greese-Table--stack-below-md .greese-Table-caption {
+      display: block;
+      padding-inline: 0;
+    }
+    .greese-Table--stack-below-md thead {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+    .greese-Table--stack-below-md .greese-TableRow {
+      padding: var(--greese-space-2) var(--greese-space-3);
+      margin-block-end: var(--greese-space-3);
+      background-color: var(--greese-color-surface-overlay);
+      border: 1px solid var(--greese-color-border);
+      border-radius: var(--greese-corner-panel);
+    }
+    .greese-Table--stack-below-md .greese-TableCell {
+      display: grid;
+      grid-template-columns: minmax(6rem, 40%) 1fr;
+      gap: var(--greese-space-3);
+      justify-items: start;
+      padding: var(--greese-space-1) 0;
+      text-align: start;
+      border: 0;
+    }
+    .greese-Table--stack-below-md .greese-TableCell::before {
+      font-weight: var(--greese-font-weight-medium);
+      color: var(--greese-color-fg-muted);
+      content: attr(data-label);
+    }
+  }
+  @media (width < 1200px) {
+    .greese-Table--stack-below-lg {
+      border: 0;
+    }
+    .greese-Table--stack-below-lg .greese-Table-table,
+    .greese-Table--stack-below-lg tbody,
+    .greese-Table--stack-below-lg tfoot,
+    .greese-Table--stack-below-lg .greese-TableRow,
+    .greese-Table--stack-below-lg .greese-TableCell {
+      display: block;
+    }
+    .greese-Table--stack-below-lg .greese-Table-caption {
+      display: block;
+      padding-inline: 0;
+    }
+    .greese-Table--stack-below-lg thead {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+    }
+    .greese-Table--stack-below-lg .greese-TableRow {
+      padding: var(--greese-space-2) var(--greese-space-3);
+      margin-block-end: var(--greese-space-3);
+      background-color: var(--greese-color-surface-overlay);
+      border: 1px solid var(--greese-color-border);
+      border-radius: var(--greese-corner-panel);
+    }
+    .greese-Table--stack-below-lg .greese-TableCell {
+      display: grid;
+      grid-template-columns: minmax(6rem, 40%) 1fr;
+      gap: var(--greese-space-3);
+      justify-items: start;
+      padding: var(--greese-space-1) 0;
+      text-align: start;
+      border: 0;
+    }
+    .greese-Table--stack-below-lg .greese-TableCell::before {
+      font-weight: var(--greese-font-weight-medium);
+      color: var(--greese-color-fg-muted);
+      content: attr(data-label);
+    }
+  }
+}

package/dist/css/Tabs.css

@@ -0,0 +1,119 @@
+@import './core.css';
+@layer greese.components {
+  .greese-Tabs {
+    display: flex;
+    flex-direction: column;
+    gap: var(--greese-space-4);
+  }
+  .greese-Tabs[data-orientation=vertical] {
+    flex-direction: row;
+  }
+  .greese-TabList {
+    display: flex;
+    gap: var(--greese-space-1);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    border-block-end: 1px solid var(--greese-color-border);
+  }
+  [data-orientation=vertical] > .greese-TabList {
+    flex-direction: column;
+    flex-shrink: 0;
+    overflow: visible;
+    border-block-end: 0;
+    border-inline-end: 1px solid var(--greese-color-border);
+  }
+  @media (pointer: coarse) {
+    .greese-Tab::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Tab {
+    position: relative;
+    flex-shrink: 0;
+    min-block-size: 2.5rem;
+    padding-inline: var(--greese-space-3);
+    font: inherit;
+    font-weight: var(--greese-font-weight-medium);
+    color: var(--greese-color-fg-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    scroll-snap-align: start;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset) var(--greese-corner-inset) 0 0;
+    box-shadow: inset 0 -2px 0 transparent;
+    transition: color var(--greese-duration-fast) var(--greese-easing-standard), background-color var(--greese-duration-fast) var(--greese-easing-standard), box-shadow var(--greese-duration-fast) var(--greese-easing-standard);
+  }
+  .greese-Tab:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: -2px;
+  }
+  @media (hover: hover) {
+    .greese-Tab:hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 6%, transparent);
+    }
+  }
+  .greese-Tab[aria-selected=true] {
+    color: var(--greese-color-fg);
+    background-color: var(--greese-tab-current-bg, color-mix(in oklab, var(--greese-color-primary) 12%, transparent));
+    box-shadow: var(--greese-tab-current-edge, inset 0 -2px 0 var(--greese-color-primary));
+  }
+  .greese-Tab:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  [data-orientation=vertical] .greese-Tab {
+    text-align: start;
+    border-radius: var(--greese-corner-inset) 0 0 var(--greese-corner-inset);
+  }
+  [data-orientation=vertical] .greese-Tab[aria-selected=true] {
+    box-shadow: var(--greese-tab-current-edge, inset -2px 0 0 var(--greese-color-primary));
+  }
+  .greese-TabPanel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-TabPanel:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-TabPanel:not(.greese-Motion) > * {
+      animation-name: var(--greese-motion-content, greese-content-in);
+      animation-duration: var(--greese-motion-content-duration, var(--greese-duration-normal));
+      animation-timing-function: var(--greese-motion-enter-ease, var(--greese-easing-enter));
+      animation-fill-mode: backwards;
+    }
+  }
+  .greese-TabPanel:not(.greese-Motion) > *:nth-child(2) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 1);
+  }
+  .greese-TabPanel:not(.greese-Motion) > *:nth-child(3) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 2);
+  }
+  .greese-TabPanel:not(.greese-Motion) > *:nth-child(4) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 3);
+  }
+  .greese-TabPanel:not(.greese-Motion) > *:nth-child(5) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 4);
+  }
+  .greese-TabPanel:not(.greese-Motion) > *:nth-child(6) {
+    animation-delay: calc(var(--greese-motion-stagger, 0.04s) * 5);
+  }
+  @keyframes greese-content-in {
+    from {
+      opacity: 0;
+      translate: 0 0.25rem;
+    }
+  }
+}