@frame-ui-ng/components 0.1.0-beta.0

package/breadcrumb/src/styles/breadcrumb.css

@@ -0,0 +1,98 @@
+@import './_vars.css';
+
+[frBreadcrumb],
+nav[frBreadcrumb] {
+  display: block;
+  color: var(--frame-breadcrumb-root-color);
+  font-size: var(--frame-breadcrumb-root-font-size);
+  line-height: var(--frame-breadcrumb-root-line-height);
+}
+
+[frBreadcrumbList] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-breadcrumb-list-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[frBreadcrumbItem] {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--frame-breadcrumb-list-gap);
+}
+
+[frBreadcrumbLink] {
+  min-width: 0;
+  border-radius: var(--frame-radius-sm);
+  color: var(--frame-breadcrumb-link-color);
+  text-decoration: none;
+  text-underline-offset: 0.25rem;
+  transition:
+    color var(--frame-breadcrumb-transition-duration) ease,
+    box-shadow var(--frame-breadcrumb-transition-duration) ease;
+}
+
+[frBreadcrumbLink]:hover {
+  color: var(--frame-breadcrumb-link-hover-color);
+  text-decoration: underline;
+}
+
+[frBreadcrumbLink]:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-breadcrumb-link-focus-shadow);
+}
+
+[frBreadcrumbPage] {
+  min-width: 0;
+  color: var(--frame-breadcrumb-page-color);
+  font-weight: 500;
+}
+
+[frBreadcrumbSeparator] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--frame-breadcrumb-separator-color);
+  font-size: var(--frame-breadcrumb-separator-size);
+  line-height: 1;
+  user-select: none;
+}
+
+[frBreadcrumbSeparator]:empty::before {
+  content: "/";
+}
+
+[frBreadcrumbEllipsis],
+frame-breadcrumb-ellipsis {
+  display: inline-flex;
+  inline-size: var(--frame-breadcrumb-ellipsis-size);
+  block-size: var(--frame-breadcrumb-ellipsis-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--frame-breadcrumb-ellipsis-radius);
+  color: var(--frame-breadcrumb-root-color);
+  letter-spacing: 0.08em;
+  transition: background-color var(--frame-breadcrumb-transition-duration) ease;
+}
+
+[frBreadcrumbEllipsis]:hover,
+frame-breadcrumb-ellipsis:hover {
+  background: var(--frame-breadcrumb-ellipsis-hover-bg);
+}
+
+.frame-breadcrumb__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/button/src/styles/_vars.css

@@ -0,0 +1,20 @@
+:root {
+    --frame-button-root-gap: 0.5rem;
+    --frame-button-root-height: 2.25rem;
+    --frame-button-root-padding-x: 1rem;
+    --frame-button-root-radius: var(--frame-radius-md);
+    --frame-button-root-shadow: var(--frame-shadow-sm);
+    --frame-button-root-font-size: 0.875rem;
+    --frame-button-root-font-weight: 600;
+    --frame-button-root-ring-color: var(--frame-ring);
+    --frame-button-root-focus-shadow: var(--frame-button-root-shadow), 0 0 0 3px color-mix(in srgb, var(--frame-button-root-ring-color) 35%, transparent);
+    --frame-button-root-hover-filter: brightness(0.98);
+    --frame-button-root-active-filter: brightness(0.96);
+    --frame-button-root-disabled-opacity: 0.55;
+    --frame-button-root-disabled-shadow: none;
+    --frame-button-loading-size: 1rem;
+    --frame-button-loading-stroke: 2px;
+    --frame-button-loading-track: color-mix(in srgb, white 24%, transparent);
+    --frame-button-icon-size: 1rem;
+    --frame-button-label-weight: inherit;
+}

package/button/src/styles/button-icon.css

@@ -0,0 +1,18 @@
+[frButtonIcon] {
+    display: inline-flex;
+    inline-size: var(--frame-button-icon-size, 1rem);
+    block-size: var(--frame-button-icon-size, 1rem);
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+}
+
+.frame-button[data-size='sm'] [frButtonIcon] {
+    inline-size: var(--frame-button-icon-size, 0.875rem);
+    block-size: var(--frame-button-icon-size, 0.875rem);
+}
+
+.frame-button[data-size='lg'] [frButtonIcon] {
+    inline-size: var(--frame-button-icon-size, 1.125rem);
+    block-size: var(--frame-button-icon-size, 1.125rem);
+}

package/button/src/styles/button-label.css

@@ -0,0 +1,3 @@
+[frButtonLabel] {
+    font-weight: var(--frame-button-label-weight, inherit);
+}

package/button/src/styles/button.css

@@ -0,0 +1,243 @@
+@import './_vars.css';
+
+@import './button-label.css';
+@import './button-icon.css';
+
+.frame-button {
+  --frame-button-root-bg: var(--frame-primary);
+  --frame-button-root-border: transparent;
+  --frame-button-root-color: var(--frame-primary-foreground);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-primary) 92%, white);
+  --frame-button-root-hover-border: var(--frame-button-root-border);
+  --frame-button-root-hover-color: var(--frame-button-root-color);
+  --frame-button-root-active-bg: color-mix(in srgb, var(--frame-primary) 84%, black);
+  --frame-button-root-active-border: var(--frame-button-root-hover-border);
+  --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  --frame-spinner-size: var(--frame-button-loading-size, 1rem);
+  --frame-spinner-stroke: var(--frame-button-loading-stroke, 2px);
+  --frame-spinner-track-color: var(
+    --frame-button-loading-track,
+    color-mix(in srgb, currentColor 24%, transparent)
+  );
+  --frame-spinner-indicator-color: currentColor;
+  position: relative;
+  display: inline-flex;
+  min-width: 2rem;
+  min-height: var(--frame-button-root-height, 2.5rem);
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-button-root-gap, 0.5rem);
+  border: 1px solid var(--frame-button-root-border);
+  border-radius: var(--frame-button-root-radius, var(--frame-radius-md));
+  background: var(--frame-button-root-bg);
+  /* box-shadow: var(--frame-button-root-shadow, var(--frame-shadow-sm)); */
+  color: var(--frame-button-root-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-button-root-font-size, 0.875rem);
+  font-weight: var(--frame-button-root-font-weight, 600);
+  line-height: 1;
+  padding-inline: var(--frame-button-root-padding-x, 1rem);
+  text-decoration: none;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    color 150ms ease,
+    filter 150ms ease,
+    transform 150ms ease,
+    opacity 150ms ease;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.frame-icon-button {
+  inline-size: var(--frame-button-root-height, 2.5rem);
+  padding-inline: 0;
+  flex: 0 0 auto;
+}
+
+.frame-button:where([data-loading])::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: var(--frame-spinner-size);
+  block-size: var(--frame-spinner-size);
+  border: var(--frame-spinner-stroke) solid var(--frame-spinner-track-color);
+  border-radius: 999px;
+  border-top-color: var(--frame-spinner-indicator-color);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
+.frame-button:where(button) {
+  padding-block: 0;
+}
+
+.frame-button:where(:not(:disabled, [data-disabled])):hover {
+  background: var(--frame-button-root-hover-bg);
+  border-color: var(--frame-button-root-hover-border);
+  color: var(--frame-button-root-hover-color);
+  filter: var(--frame-button-root-hover-filter, brightness(0.98));
+}
+
+.frame-button:where(:not(:disabled, [data-disabled])):active {
+  background: var(--frame-button-root-active-bg);
+  border-color: var(--frame-button-root-active-border);
+  /* box-shadow: var(--frame-button-root-active-shadow, inset 0 1px 2px rgb(0 0 0 / 0.12)); */
+  color: var(--frame-button-root-active-color);
+  filter: var(--frame-button-root-active-filter, brightness(0.96));
+  transform: translateY(1px);
+}
+
+.frame-button:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  /* box-shadow: var(--frame-button-root-focus-shadow, var(--frame-button-root-shadow, var(--frame-shadow-sm)), 0 0 0 3px color-mix(in srgb, var(--frame-button-root-ring-color, var(--frame-ring)) 35%, transparent)); */
+}
+
+.frame-button[data-loading]::after {
+  animation: frame-button-spin 0.7s linear infinite;
+  opacity: 1;
+}
+
+.frame-button[data-has-custom-loading]::after {
+  display: none;
+}
+
+.frame-button[data-loading][data-loading-display='replace'] .frame-button__icon,
+.frame-button[data-loading][data-loading-display='replace'] .frame-button__label {
+  display: none;
+}
+
+.frame-button[data-loading][data-loading-display='inline'] .frame-button__icon {
+  display: none;
+}
+
+.frame-button[data-loading][data-loading-display='inline']::after {
+  animation-name: frame-button-spin-inline;
+  position: static;
+  flex: 0 0 auto;
+  opacity: 1;
+  transform: none;
+}
+
+.frame-button:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-button-root-disabled-opacity, 0.55);
+  /* box-shadow: var(--frame-button-root-disabled-shadow, none); */
+}
+
+.frame-button[data-appearance='outline'] {
+  --frame-button-root-bg: var(--frame-surface);
+  --frame-button-root-border: var(--frame-border);
+  --frame-button-root-color: var(--frame-surface-foreground);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-surface) 80%, var(--frame-muted));
+  --frame-button-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+  --frame-button-root-hover-color: var(--frame-button-root-color);
+  --frame-button-root-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
+  --frame-button-root-active-border: var(--frame-button-root-hover-border);
+  --frame-button-root-active-color: var(--frame-button-root-hover-color);
+}
+
+.frame-button[data-appearance='ghost'] {
+  --frame-button-root-bg: transparent;
+  --frame-button-root-border: transparent;
+  --frame-button-root-color: var(--frame-foreground);
+  --frame-button-root-hover-bg: color-mix(in srgb, var(--frame-muted) 60%, transparent);
+  --frame-button-root-hover-border: var(--frame-button-root-border);
+  --frame-button-root-hover-color: var(--frame-button-root-color);
+  --frame-button-root-active-bg: color-mix(in srgb, var(--frame-muted) 80%, transparent);
+  --frame-button-root-active-border: var(--frame-button-root-hover-border);
+  --frame-button-root-active-color: var(--frame-button-root-hover-color);
+  /* box-shadow: var(--frame-button-root-shadow, none); */
+}
+
+.frame-button[data-size='sm'] {
+  min-height: 2rem;
+  padding-inline: 0.75rem;
+  font-size: 0.8125rem;
+}
+
+.frame-button[data-size='lg'] {
+  min-height: 2.75rem;
+  padding-inline: 1.25rem;
+  font-size: 0.9375rem;
+}
+
+.frame-button[data-radius='none'] {
+  border-radius: 0;
+}
+
+.frame-button[data-radius='sm'] {
+  border-radius: var(--frame-radius-sm);
+}
+
+.frame-button[data-radius='md'] {
+  border-radius: var(--frame-radius-md);
+}
+
+.frame-button[data-radius='lg'] {
+  border-radius: var(--frame-radius-lg);
+}
+
+.frame-button[data-radius='full'] {
+  border-radius: var(--frame-radius-full);
+}
+
+[frButtonLoading] {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+}
+
+.frame-button > [frSpinner],
+.frame-button > frame-spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.frame-button[data-loading] [frButtonLoading] {
+  opacity: 1;
+}
+
+.frame-button[data-loading] > [frSpinner],
+.frame-button[data-loading] > frame-spinner {
+  opacity: 1;
+}
+
+.frame-button[data-loading][data-loading-display='inline'] [frButtonLoading] {
+  position: static;
+  flex: 0 0 auto;
+  transform: none;
+}
+
+.frame-button[data-loading][data-loading-display='inline'] > [frSpinner],
+.frame-button[data-loading][data-loading-display='inline'] > frame-spinner {
+  position: static;
+  margin: 0;
+}
+
+@keyframes frame-button-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@keyframes frame-button-spin-inline {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/button-group/src/styles/button-group.css

@@ -0,0 +1,69 @@
+.frame-button-group,
+[frButtonGroup],
+frame-button-group {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+}
+
+.frame-button-group[data-orientation='vertical'],
+[frButtonGroup][data-orientation='vertical'],
+frame-button-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.frame-button-group[data-orientation='horizontal'] > * + *,
+[frButtonGroup][data-orientation='horizontal'] > * + *,
+frame-button-group[data-orientation='horizontal'] > * + * {
+  margin-inline-start: -1px;
+}
+
+.frame-button-group[data-orientation='vertical'] > * + *,
+[frButtonGroup][data-orientation='vertical'] > * + *,
+frame-button-group[data-orientation='vertical'] > * + * {
+  margin-block-start: -1px;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :first-child,
+[frButtonGroup][data-orientation='horizontal'] > :first-child,
+frame-button-group[data-orientation='horizontal'] > :first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :last-child,
+[frButtonGroup][data-orientation='horizontal'] > :last-child,
+frame-button-group[data-orientation='horizontal'] > :last-child {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child),
+[frButtonGroup][data-orientation='horizontal'] > :not(:first-child):not(:last-child),
+frame-button-group[data-orientation='horizontal'] > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :first-child,
+[frButtonGroup][data-orientation='vertical'] > :first-child,
+frame-button-group[data-orientation='vertical'] > :first-child {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :last-child,
+[frButtonGroup][data-orientation='vertical'] > :last-child,
+frame-button-group[data-orientation='vertical'] > :last-child {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child),
+[frButtonGroup][data-orientation='vertical'] > :not(:first-child):not(:last-child),
+frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.frame-button-group > * {
+  position: relative;
+}

package/calendar/src/styles/_vars.css

@@ -0,0 +1,29 @@
+:root {
+  --frame-calendar-bg: var(--frame-surface);
+  --frame-calendar-color: var(--frame-surface-foreground);
+  --frame-calendar-border: var(--frame-border);
+  --frame-calendar-radius: var(--frame-radius-lg);
+  --frame-calendar-padding: 0.875rem;
+  --frame-calendar-gap: 1rem;
+  --frame-calendar-cell-size: 2.25rem;
+  --frame-calendar-cell-radius: var(--frame-radius-md);
+  --frame-calendar-muted-color: var(--frame-muted-foreground);
+  --frame-calendar-day-hover-bg: var(--frame-muted);
+  --frame-calendar-day-hover-color: var(--frame-foreground);
+  --frame-calendar-day-selected-bg: var(--frame-primary);
+  --frame-calendar-day-selected-color: var(--frame-primary-foreground);
+  --frame-calendar-day-range-bg: color-mix(in srgb, var(--frame-primary) 14%, transparent);
+  --frame-calendar-day-range-outline: var(--frame-background);
+  --frame-calendar-day-today-border: color-mix(in srgb, var(--frame-primary) 55%, var(--frame-border));
+  --frame-calendar-day-disabled-date-decoration: var(--frame-destructive);
+  --frame-calendar-day-disabled-opacity: 0.38;
+  --frame-calendar-nav-size: 2rem;
+  --frame-calendar-nav-radius: var(--frame-radius-md);
+  --frame-calendar-nav-hover-bg: var(--frame-muted);
+  --frame-calendar-select-height: 2rem;
+  --frame-calendar-select-radius: var(--frame-radius-md);
+  --frame-calendar-select-border: var(--frame-border);
+  --frame-calendar-select-bg: var(--frame-background);
+  --frame-calendar-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 26%, transparent);
+  --frame-calendar-transition-duration: 150ms;
+}

package/calendar/src/styles/calendar.css

@@ -0,0 +1,226 @@
+@import './_vars.css';
+
+.frame-calendar {
+  display: inline-grid;
+  gap: var(--frame-calendar-gap);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--frame-calendar-padding);
+  border: 1px solid var(--frame-calendar-border);
+  border-radius: var(--frame-calendar-radius);
+  background: var(--frame-calendar-bg);
+  color: var(--frame-calendar-color);
+  box-sizing: border-box;
+  font-size: 0.875rem;
+}
+
+.frame-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.frame-calendar__caption,
+.frame-calendar__month-caption {
+  color: var(--frame-calendar-color);
+  font-weight: 600;
+  text-align: center;
+}
+
+.frame-calendar__month-caption {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+.frame-calendar__caption-controls {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.frame-calendar__select {
+  min-height: var(--frame-calendar-select-height);
+  border: 1px solid var(--frame-calendar-select-border);
+  border-radius: var(--frame-calendar-select-radius);
+  background: var(--frame-calendar-select-bg);
+  color: inherit;
+  font: inherit;
+  font-size: 0.8125rem;
+  padding-inline: 0.5rem;
+}
+
+.frame-calendar__select:focus-visible,
+.frame-calendar__nav-button:focus-visible,
+.frame-calendar__day:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-calendar-focus-shadow);
+}
+
+.frame-calendar__nav-button {
+  display: inline-flex;
+  inline-size: var(--frame-calendar-nav-size);
+  block-size: var(--frame-calendar-nav-size);
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--frame-calendar-nav-radius);
+  background: transparent;
+  color: var(--frame-calendar-muted-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition:
+    background-color var(--frame-calendar-transition-duration) ease,
+    color var(--frame-calendar-transition-duration) ease;
+}
+
+.frame-calendar__nav-button:hover:not(:disabled) {
+  background: var(--frame-calendar-nav-hover-bg);
+  color: var(--frame-calendar-color);
+}
+
+.frame-calendar__nav-button:disabled,
+.frame-calendar__select:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-calendar-day-disabled-opacity);
+}
+
+.frame-calendar__months {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--frame-calendar-gap);
+}
+
+.frame-calendar__month {
+  min-width: 0;
+}
+
+.frame-calendar__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.frame-calendar__weekday,
+.frame-calendar__week-number-header,
+.frame-calendar__week-number {
+  inline-size: var(--frame-calendar-cell-size);
+  block-size: 1.75rem;
+  color: var(--frame-calendar-muted-color);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.frame-calendar__week-number {
+  font-variant-numeric: tabular-nums;
+}
+
+.frame-calendar__cell {
+  position: relative;
+  padding-block: 0.125rem;
+  padding-inline: 0;
+  text-align: center;
+}
+
+.frame-calendar__day {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  inline-size: var(--frame-calendar-cell-size);
+  block-size: var(--frame-calendar-cell-size);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--frame-calendar-cell-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  transition:
+    background-color var(--frame-calendar-transition-duration) ease,
+    border-color var(--frame-calendar-transition-duration) ease,
+    color var(--frame-calendar-transition-duration) ease,
+    opacity var(--frame-calendar-transition-duration) ease;
+}
+
+.frame-calendar__day:hover:not(:disabled) {
+  background: var(--frame-calendar-day-hover-bg);
+  color: var(--frame-calendar-day-hover-color);
+}
+
+.frame-calendar__cell[data-outside] .frame-calendar__day {
+  color: var(--frame-calendar-muted-color);
+}
+
+.frame-calendar__cell[data-today] .frame-calendar__day {
+  border-color: var(--frame-calendar-day-today-border);
+}
+
+.frame-calendar__cell[data-selected] .frame-calendar__day {
+  background: var(--frame-calendar-day-selected-bg);
+  color: var(--frame-calendar-day-selected-color);
+}
+
+.frame-calendar__cell[data-range-middle]::before,
+.frame-calendar__cell[data-range-start]::before,
+.frame-calendar__cell[data-range-end]::before {
+  content: '';
+  position: absolute;
+  inset-block: 0.125rem;
+  inset-inline: 0;
+  background: var(--frame-calendar-day-range-bg);
+}
+
+.frame-calendar__cell[data-range-middle] .frame-calendar__day {
+  background: transparent;
+  color: var(--frame-calendar-color);
+}
+
+.frame-calendar__cell[data-range-start]::before {
+  inset-inline-start: 50%;
+}
+
+.frame-calendar__cell[data-range-end]::before {
+  inset-inline-end: 50%;
+}
+
+.frame-calendar__cell[data-range-start][data-range-end]::before {
+  display: none;
+}
+
+.frame-calendar__cell[data-range-start] .frame-calendar__day,
+.frame-calendar__cell[data-range-end] .frame-calendar__day {
+  box-shadow: 0 0 0 2px var(--frame-calendar-day-range-outline);
+}
+
+.frame-calendar__cell[data-disabled-date] .frame-calendar__day-number {
+  text-decoration: line-through;
+  text-decoration-color: var(--frame-calendar-day-disabled-date-decoration);
+}
+
+.frame-calendar__day:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-calendar-day-disabled-opacity);
+}
+
+.frame-calendar__day-number {
+  font-weight: 500;
+}
+
+.frame-calendar__day-meta {
+  margin-top: 0.25rem;
+  color: currentColor;
+  font-size: 0.625rem;
+  opacity: 0.72;
+}
+
+.frame-calendar[data-disabled] {
+  opacity: 0.72;
+}