@jongh/ui 1.6.5 → 2.20260902.1

package/dist/purple.css

@@ -0,0 +1,155 @@
+@layer tokens {
+[data-color-theme=purple] {
+    --colors-fg-brand: var(--colors-palette-light-purple-600);
+    --colors-fg-brand-contrast: var(--colors-palette-light-purple-700);
+    --colors-fg-critical: var(--colors-palette-light-red-700);
+    --colors-fg-critical-contrast: var(--colors-palette-light-red-900);
+    --colors-fg-disabled: var(--colors-palette-light-gray-500);
+    --colors-fg-informative: var(--colors-palette-light-blue-700);
+    --colors-fg-informative-contrast: var(--colors-palette-light-blue-900);
+    --colors-fg-neutral: var(--colors-palette-light-gray-1000);
+    --colors-fg-neutral-inverted: var(--colors-palette-light-gray-00);
+    --colors-fg-neutral-muted: var(--colors-palette-light-gray-800);
+    --colors-fg-neutral-subtle: var(--colors-palette-light-gray-700);
+    --colors-fg-placeholder: var(--colors-palette-light-gray-600);
+    --colors-fg-positive: var(--colors-palette-light-green-700);
+    --colors-fg-positive-contrast: var(--colors-palette-light-green-900);
+    --colors-fg-warning: var(--colors-palette-light-yellow-700);
+    --colors-fg-warning-contrast: var(--colors-palette-light-yellow-900);
+    --colors-bg-brand-solid: var(--colors-palette-light-purple-600);
+    --colors-bg-brand-solid-pressed: var(--colors-palette-light-purple-700);
+    --colors-bg-brand-weak: var(--colors-palette-light-purple-100);
+    --colors-bg-brand-weak-pressed: var(--colors-palette-light-purple-200);
+    --colors-bg-critical-solid: var(--colors-palette-light-red-700);
+    --colors-bg-critical-solid-pressed: var(--colors-palette-light-red-800);
+    --colors-bg-critical-weak: var(--colors-palette-light-red-100);
+    --colors-bg-critical-weak-pressed: var(--colors-palette-light-red-200);
+    --colors-bg-disabled: var(--colors-palette-light-gray-200);
+    --colors-bg-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-bg-informative-solid-pressed: var(--colors-palette-light-blue-800);
+    --colors-bg-informative-weak: var(--colors-palette-light-blue-100);
+    --colors-bg-informative-weak-pressed: var(--colors-palette-light-blue-200);
+    --colors-bg-layer: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-basement: var(--colors-palette-light-gray-200);
+    --colors-bg-layer-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-layer-floating: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-floating-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-magic-weak: #f9f2ee;
+    --colors-bg-neutral-inverted: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-inverted-pressed: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid: var(--colors-palette-light-gray-1000);
+    --colors-bg-neutral-solid-muted: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-weak: var(--colors-palette-light-gray-200);
+    --colors-bg-neutral-weak-alpha: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-neutral-weak-pressed: var(--colors-palette-light-gray-300);
+    --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+    --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+    --colors-bg-positive-solid: var(--colors-palette-light-green-700);
+    --colors-bg-positive-solid-pressed: var(--colors-palette-light-green-800);
+    --colors-bg-positive-weak: var(--colors-palette-light-green-100);
+    --colors-bg-positive-weak-pressed: var(--colors-palette-light-green-200);
+    --colors-bg-transparent: #00000000;
+    --colors-bg-transparent-pressed: var(--colors-palette-static-black-alpha-100);
+    --colors-bg-transparent-selected: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-transparent-selected-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-warning-solid: var(--colors-palette-light-yellow-300);
+    --colors-bg-warning-solid-pressed: var(--colors-palette-light-yellow-400);
+    --colors-bg-warning-weak: var(--colors-palette-light-yellow-100);
+    --colors-bg-warning-weak-pressed: var(--colors-palette-light-yellow-200);
+    --colors-stroke-brand-solid: var(--colors-palette-light-purple-700);
+    --colors-stroke-brand-weak: var(--colors-palette-light-purple-300);
+    --colors-stroke-critical-solid: var(--colors-palette-light-red-700);
+    --colors-stroke-critical-weak: var(--colors-palette-light-red-300);
+    --colors-stroke-focus-ring: var(--colors-palette-light-blue-600);
+    --colors-stroke-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-stroke-informative-weak: var(--colors-palette-light-blue-300);
+    --colors-stroke-neutral-contrast: var(--colors-palette-light-gray-1000);
+    --colors-stroke-neutral-muted: var(--colors-palette-static-black-alpha-300);
+    --colors-stroke-neutral-solid: var(--colors-palette-light-gray-800);
+    --colors-stroke-neutral-subtle: var(--colors-palette-static-black-alpha-200);
+    --colors-stroke-neutral-weak: var(--colors-palette-light-gray-400);
+    --colors-stroke-positive-solid: var(--colors-palette-light-green-700);
+    --colors-stroke-positive-weak: var(--colors-palette-light-green-300);
+    --colors-stroke-warning-solid: var(--colors-palette-light-yellow-700);
+    --colors-stroke-warning-weak: var(--colors-palette-light-yellow-300)
+}
+
+[data-color-theme=purple].dark {
+      --colors-fg-brand: var(--colors-palette-dark-purple-700);
+      --colors-fg-brand-contrast: var(--colors-palette-dark-purple-700);
+      --colors-fg-critical: var(--colors-palette-dark-red-700);
+      --colors-fg-critical-contrast: var(--colors-palette-dark-red-900);
+      --colors-fg-disabled: var(--colors-palette-dark-gray-500);
+      --colors-fg-informative: var(--colors-palette-dark-blue-700);
+      --colors-fg-informative-contrast: var(--colors-palette-dark-blue-900);
+      --colors-fg-neutral: var(--colors-palette-dark-gray-1000);
+      --colors-fg-neutral-inverted: var(--colors-palette-dark-gray-100);
+      --colors-fg-neutral-muted: var(--colors-palette-dark-gray-800);
+      --colors-fg-neutral-subtle: var(--colors-palette-dark-gray-700);
+      --colors-fg-placeholder: var(--colors-palette-dark-gray-600);
+      --colors-fg-positive: var(--colors-palette-dark-green-700);
+      --colors-fg-positive-contrast: var(--colors-palette-dark-green-900);
+      --colors-fg-warning: var(--colors-palette-dark-yellow-700);
+      --colors-fg-warning-contrast: var(--colors-palette-dark-yellow-900);
+      --colors-bg-brand-solid: var(--colors-palette-dark-purple-700);
+      --colors-bg-brand-solid-pressed: var(--colors-palette-dark-purple-800);
+      --colors-bg-brand-weak: var(--colors-palette-dark-purple-100);
+      --colors-bg-brand-weak-pressed: var(--colors-palette-dark-purple-200);
+      --colors-bg-critical-solid: var(--colors-palette-dark-red-600);
+      --colors-bg-critical-solid-pressed: var(--colors-palette-dark-red-700);
+      --colors-bg-critical-weak: var(--colors-palette-dark-red-100);
+      --colors-bg-critical-weak-pressed: var(--colors-palette-dark-red-200);
+      --colors-bg-disabled: var(--colors-palette-dark-gray-300);
+      --colors-bg-informative-solid: var(--colors-palette-dark-blue-600);
+      --colors-bg-informative-solid-pressed: var(--colors-palette-dark-blue-700);
+      --colors-bg-informative-weak: var(--colors-palette-dark-blue-100);
+      --colors-bg-informative-weak-pressed: var(--colors-palette-dark-blue-200);
+      --colors-bg-layer: var(--colors-palette-dark-gray-100);
+      --colors-bg-layer-basement: var(--colors-palette-dark-gray-00);
+      --colors-bg-layer-pressed: var(--colors-palette-dark-gray-300);
+      --colors-bg-layer-floating: var(--colors-palette-dark-gray-200);
+      --colors-bg-layer-floating-pressed: var(--colors-palette-dark-gray-300);
+      --colors-bg-magic-weak: #201f1f;
+      --colors-bg-neutral-inverted: var(--colors-palette-dark-gray-1000);
+      --colors-bg-neutral-inverted-pressed: var(--colors-palette-dark-gray-800);
+      --colors-bg-neutral-solid: var(--colors-palette-dark-gray-300);
+      --colors-bg-neutral-solid-muted: var(--colors-palette-dark-gray-400);
+      --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-dark-gray-500);
+      --colors-bg-neutral-weak: var(--colors-palette-dark-gray-300);
+      --colors-bg-neutral-weak-alpha: var(--colors-palette-static-white-alpha-200);
+      --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-white-alpha-300);
+      --colors-bg-neutral-weak-pressed: var(--colors-palette-dark-gray-400);
+      --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+      --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+      --colors-bg-positive-solid: var(--colors-palette-dark-green-500);
+      --colors-bg-positive-solid-pressed: var(--colors-palette-dark-green-600);
+      --colors-bg-positive-weak: var(--colors-palette-dark-green-100);
+      --colors-bg-positive-weak-pressed: var(--colors-palette-dark-green-200);
+      --colors-bg-transparent: #ffffff00;
+      --colors-bg-transparent-pressed: var(--colors-palette-static-white-alpha-50);
+      --colors-bg-transparent-selected: var(--colors-palette-static-white-alpha-100);
+      --colors-bg-transparent-selected-pressed: var(--colors-palette-static-white-alpha-200);
+      --colors-bg-warning-solid: var(--colors-palette-dark-yellow-800);
+      --colors-bg-warning-solid-pressed: var(--colors-palette-dark-yellow-900);
+      --colors-bg-warning-weak: var(--colors-palette-dark-yellow-100);
+      --colors-bg-warning-weak-pressed: var(--colors-palette-dark-yellow-200);
+      --colors-stroke-brand-solid: var(--colors-palette-dark-purple-700);
+      --colors-stroke-brand-weak: var(--colors-palette-dark-purple-300);
+      --colors-stroke-critical-solid: var(--colors-palette-dark-red-700);
+      --colors-stroke-critical-weak: var(--colors-palette-dark-red-300);
+      --colors-stroke-focus-ring: var(--colors-palette-dark-blue-600);
+      --colors-stroke-informative-solid: var(--colors-palette-dark-blue-700);
+      --colors-stroke-informative-weak: var(--colors-palette-dark-blue-300);
+      --colors-stroke-neutral-contrast: var(--colors-palette-dark-gray-1000);
+      --colors-stroke-neutral-muted: var(--colors-palette-static-white-alpha-100);
+      --colors-stroke-neutral-solid: var(--colors-palette-dark-gray-800);
+      --colors-stroke-neutral-subtle: var(--colors-palette-static-white-alpha-50);
+      --colors-stroke-neutral-weak: var(--colors-palette-dark-gray-400);
+      --colors-stroke-positive-solid: var(--colors-palette-dark-green-700);
+      --colors-stroke-positive-weak: var(--colors-palette-dark-green-300);
+      --colors-stroke-warning-solid: var(--colors-palette-dark-yellow-700);
+      --colors-stroke-warning-weak: var(--colors-palette-dark-yellow-300)
+        }
+}

package/dist/recipes/accordion-recipe.css

@@ -0,0 +1,118 @@
+@layer recipes.slots {
+  @layer _base {
+
+    .accordion__header,.accordion__trigger {
+      display: flex;
+}
+
+    .accordion__trigger {
+      flex: 1 1 0%;
+      padding-inline: var(--spacing-1);
+      padding-block: var(--spacing-2);
+      align-items: center;
+      color: var(--colors-fg-neutral);
+      cursor: pointer;
+      justify-content: space-between;
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-bold);
+      --transition-prop: color,background-color;
+      transition-property: color,background-color;
+      --transition-duration: var(--durations-d3);
+      transition-duration: var(--durations-d3);
+      --transition-easing: var(--easings-easing);
+      transition-timing-function: var(--easings-easing);
+}
+
+    .accordion__trigger > svg {
+      transition-property: var(--transition-prop, transform);
+      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+      transition-duration: var(--transition-duration, 150ms);
+      color: var(--colors-fg-neutral-subtle);
+      flex-shrink: 0;
+      height: 1rem;
+      width: 1rem;
+}
+
+    .accordion__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: not-allowed;
+}
+
+    .accordion__trigger[data-state=open] > svg {
+      transform: rotate(180deg);
+      --transition-duration: var(--durations-d4);
+      transition-duration: var(--durations-d4);
+      --transition-easing: var(--easings-enter);
+      transition-timing-function: var(--easings-enter);
+}
+
+    .accordion__trigger[data-state=closed] > svg {
+      --transition-duration: var(--durations-d3);
+      transition-duration: var(--durations-d3);
+      --transition-easing: var(--easings-exit);
+      transition-timing-function: var(--easings-exit);
+}
+
+    .accordion__trigger:is(:focus-visible, [data-focus-visible]) {
+      outline: 2px solid;
+      outline-color: var(--colors-stroke-focus-ring);
+      outline-offset: var(--spacing-0\.5);
+}
+
+    .accordion__content {
+      overflow: hidden;
+      color: var(--colors-fg-neutral-subtle);
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-regular);
+}
+
+    .accordion__content[data-state=closed] {
+      animation-duration: var(--durations-d3);
+      animation-name: accordion-up_radix;
+      animation-timing-function: var(--easings-exit);
+}
+
+    .accordion__content[data-state=open] {
+      animation-duration: var(--durations-d4);
+      animation-name: accordion-down_radix;
+      animation-timing-function: var(--easings-enter);
+}
+
+    .accordion__contentWrapper {
+      padding-inline: var(--spacing-1);
+      padding-block: var(--spacing-1);
+}
+}
+
+  .accordion__item--variant_outline {
+    border-color: var(--colors-stroke-neutral-subtle);
+    border-bottom-width: 1px;
+}
+
+  .accordion__trigger--variant_outline:is(:active, [data-active]) {
+    background: var(--colors-bg-transparent-pressed);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .accordion__trigger--variant_outline:is(:hover, [data-hover]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+}
+
+  .accordion__item--variant_subtle,.accordion__header--variant_subtle,.accordion__trigger--variant_subtle {
+    border-radius: var(--radii-r1_5);
+}
+
+  .accordion__trigger--variant_subtle:is(:active, [data-active]) {
+    background: var(--colors-bg-transparent-pressed);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .accordion__trigger--variant_subtle:is(:hover, [data-hover]) {
+      background: var(--colors-bg-transparent-pressed);
+      border-radius: var(--radii-r1_5);
+}
+}
+}

package/dist/recipes/avatar-recipe.css

@@ -0,0 +1,44 @@
+@layer recipes.slots {
+  @layer _base {
+    .avatar__root {
+      overflow: hidden;
+      border-radius: var(--radii-full);
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      height: 3rem;
+      width: 3rem;
+}
+
+    .avatar__root::after {
+      inset: 0;
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-stroke-neutral-subtle);
+      border-radius: var(--radii-full);
+      content: "";
+      position: absolute;
+      pointer-events: none;
+}
+
+    .avatar__image {
+      display: block;
+      aspect-ratio: square;
+      object-fit: cover;
+}
+
+    .avatar__image,.avatar__fallback {
+      height: 100%;
+      width: 100%;
+}
+
+    .avatar__fallback {
+      background: var(--colors-bg-neutral-weak);
+      border-radius: var(--radii-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral);
+}
+    }
+}

package/dist/recipes/badge-recipe.css

@@ -0,0 +1,47 @@
+@layer recipes.slots {
+  @layer _base {
+    .badge__root {
+      align-items: center;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex-shrink: 0;
+      text-align: start;
+      -webkit-user-select: none;
+      user-select: none;
+}
+
+    .badge__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+}
+}
+
+  .badge__root--size_sm {
+    border-radius: var(--radii-r1);
+    padding-block: var(--spacing-0\.5);
+    padding-inline: var(--spacing-1\.5);
+    font-size: var(--font-sizes-t1);
+    line-height: var(--line-heights-t1);
+    font-weight: var(--font-weights-medium);
+    max-width: 6.75rem;
+    min-height: 1.25rem;
+}
+
+  .badge__root--size_md {
+    border-radius: var(--radii-r1_5);
+    padding-block: var(--spacing-1);
+    padding-inline: var(--spacing-2);
+    font-size: var(--font-sizes-t2);
+    line-height: var(--line-heights-t2);
+    font-weight: var(--font-weights-medium);
+    max-width: 7.5rem;
+    min-height: 1.5rem;
+}
+
+  .badge__root--variant_outline {
+    border-style: solid;
+    border-width: 1px;
+    font-weight: var(--font-weights-bold);
+}
+}

package/dist/recipes/button-recipe.css

@@ -0,0 +1,153 @@
+@layer recipes {
+  @layer _base {
+    .button {
+      gap: var(--spacing-1);
+      border-radius: var(--radii-r1_5);
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      font-size: var(--font-sizes-t6);
+      line-height: var(--line-heights-t6);
+      font-weight: var(--font-weights-medium);
+      --transition-duration: var(--durations-pressed-scale);
+      transition-duration: var(--durations-pressed-scale);
+      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      --transition-easing: var(--easings-pressed-scale);
+      transition-timing-function: var(--easings-pressed-scale);
+      white-space: nowrap;
+      min-height: 2.25rem;
+}
+
+    .button,.button svg {
+      flex-shrink: 0;
+}
+
+    .button:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+}
+
+    .button:enabled:is(:active, [data-active]) {
+      transform: scale(0.97);
+}
+}
+
+  .button--size_md {
+    padding-inline: var(--spacing-4);
+    padding-block: var(--spacing-2);
+    height: 2.5rem;
+}
+
+  .button--size_md svg {
+    height: 1rem;
+    width: 1rem;
+}
+
+  .button--variant_primary {
+    background: var(--colors-bg-brand-solid);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_primary:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-brand-solid-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_primary:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-brand-solid-pressed);
+}
+}
+
+  .button--size_sm {
+    padding-inline: var(--spacing-3);
+    padding-block: var(--spacing-1\.5);
+    font-size: var(--font-sizes-t2);
+    line-height: var(--line-heights-t2);
+    font-weight: var(--font-weights-bold);
+    height: 2.25rem;
+}
+
+  .button--size_sm svg {
+    height: 0.875rem;
+    width: 0.875rem;
+}
+
+  .button--size_lg {
+    padding-inline: var(--spacing-5);
+    padding-block: var(--spacing-2);
+    height: 2.75rem;
+}
+
+  .button--size_lg svg {
+    height: 1.25rem;
+    width: 1.25rem;
+}
+
+  .button--variant_destructive {
+    background: var(--colors-bg-critical-solid);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_destructive:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-critical-solid-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_destructive:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-critical-solid-pressed);
+}
+}
+
+  .button--variant_link {
+    color: var(--colors-fg-brand);
+    text-underline-offset: 2px;
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_link:enabled:is(:hover, [data-hover]) {
+      text-decoration: underline;
+}
+}
+
+  .button--variant_outline {
+    background: var(--colors-bg-layer);
+    border: 1px_solid;
+    border-color: var(--colors-stroke-neutral-weak);
+    color: var(--colors-fg-neutral);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_outline:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-neutral-weak-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_outline:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-neutral-weak-pressed);
+}
+}
+
+  .button--variant_secondary {
+    background: var(--colors-bg-neutral-solid-muted);
+    color: var(--colors-fg-neutral-inverted);
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .button--variant_secondary:enabled:is(:hover, [data-hover]) {
+      background: var(--colors-bg-neutral-solid-muted-pressed);
+}
+}
+
+  @media not all and (hover: hover) and (pointer: fine) {
+    .button--variant_secondary:enabled:is(:active, [data-active]) {
+      background: var(--colors-bg-neutral-solid-muted-pressed);
+}
+}
+}

package/dist/recipes/calendar-recipe.css

@@ -0,0 +1,145 @@
+@layer recipes.slots {
+  @layer _base {
+    .calendar__root {
+      background: var(--colors-bg-layer-floating);
+      border-radius: var(--radii-r1_5);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: var(--shadows-s1);
+      color: var(--colors-fg-neutral);
+      width: 21rem;
+}
+
+    .calendar__header {
+      padding: var(--spacing-3);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+}
+
+    .calendar__title {
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-bold);
+}
+
+    .calendar__navButton {
+      border-radius: var(--radii-full);
+      outline: 2px solid transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-muted);
+      cursor: pointer;
+      outline-offset: -2px;
+      width: 2rem;
+      height: 2rem;
+}
+
+    .calendar__navButton:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: not-allowed;
+}
+
+    .calendar__navButton svg {
+      width: 1rem;
+      height: 1rem;
+}
+
+    .calendar__navButton:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-stroke-focus-ring);
+}
+
+    .calendar__navButton:is(:active, [data-active]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .calendar__navButton:is(:hover, [data-hover]) {
+        background: var(--colors-bg-transparent-pressed);
+}
+}
+
+    .calendar__weekdayRow {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+    .calendar__weekday {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-subtle);
+      font-size: var(--font-sizes-t4);
+      line-height: var(--line-heights-t4);
+      font-weight: var(--font-weights-medium);
+      height: 3rem;
+}
+
+    .calendar__daysGrid {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+}
+
+    .calendar__weekRow {
+      width: 100%;
+}
+
+    .calendar__dayWrapper {
+      padding: 0;
+      text-align: center;
+      width: 3rem;
+      height: 3rem;
+}
+
+    .calendar__dayCell {
+      border-radius: var(--radii-full);
+      outline: 2px solid transparent;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--colors-fg-neutral-muted);
+      font-size: var(--font-sizes-t5);
+      line-height: var(--line-heights-t5);
+      font-weight: var(--font-weights-medium);
+      cursor: pointer;
+      outline-offset: -2px;
+      width: 2.625rem;
+      height: 2.625rem;
+}
+
+    .calendar__dayCell[data-today=true],.calendar__dayCell[data-in-range=true] {
+      background: var(--colors-bg-neutral-weak);
+}
+
+    .calendar__dayCell[data-selected=true] {
+      background: var(--colors-bg-neutral-inverted);
+      color: var(--colors-fg-neutral-inverted);
+}
+
+    .calendar__dayCell[data-outside-month=true] {
+      color: var(--colors-fg-neutral-subtle);
+}
+
+    .calendar__dayCell:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      color: var(--colors-fg-disabled);
+      cursor: default;
+}
+
+    .calendar__dayCell:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-stroke-focus-ring);
+}
+
+    .calendar__dayCell:is(:active, [data-active]) {
+      background: var(--colors-bg-transparent-pressed);
+}
+
+    @media (hover: hover) and (pointer: fine) {
+      .calendar__dayCell:is(:hover, [data-hover]) {
+        background: var(--colors-bg-transparent-pressed);
+}
+}
+    }
+}

package/dist/recipes/center-recipe.css

@@ -0,0 +1,13 @@
+@layer recipes {
+  .center--axis_both {
+    align-items: center;
+}
+
+  .center--axis_both,.center--axis_horizontal {
+    justify-content: center;
+}
+
+  .center--axis_vertical {
+    align-items: center;
+}
+}