@frame-ui-ng/components 0.4.1 → 0.5.0-beta.0

package/calendar/src/styles/_vars.css

@@ -1,11 +1,15 @@
-:root {
+:where(: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-width: fit-content;
+  --frame-calendar-padding: var(--frame-density-control-padding-x-md);
+  --frame-calendar-gap: var(--frame-density-gap-xl);
+  --frame-calendar-cell-size: var(--frame-density-control-height-md);
+  --frame-calendar-effective-cell-size: var(--frame-calendar-cell-size);
+  --frame-calendar-column-count: 7;
+  --frame-calendar-month-flex: 0 0 calc(var(--frame-calendar-effective-cell-size) * var(--frame-calendar-column-count));
   --frame-calendar-cell-radius: var(--frame-radius-md);
   --frame-calendar-muted-color: var(--frame-muted-foreground);
   --frame-calendar-day-hover-bg: var(--frame-muted);
@@ -17,10 +21,10 @@
   --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-size: var(--frame-density-item-height);
   --frame-calendar-nav-radius: var(--frame-radius-md);
   --frame-calendar-nav-hover-bg: var(--frame-muted);
-  --frame-calendar-select-height: 2rem;
+  --frame-calendar-select-height: var(--frame-density-item-height);
   --frame-calendar-select-radius: var(--frame-radius-md);
   --frame-calendar-select-border: var(--frame-border);
   --frame-calendar-select-bg: var(--frame-background);

package/calendar/src/styles/calendar.css

@@ -1,9 +1,9 @@
 @import './_vars.css';
 
-.frame-calendar {
+:where(.frame-calendar) {
   display: inline-grid;
   gap: var(--frame-calendar-gap);
-  width: fit-content;
+  width: var(--frame-calendar-width);
   max-width: 100%;
   padding: var(--frame-calendar-padding);
   border: 1px solid var(--frame-calendar-border);
@@ -14,6 +14,14 @@
   font-size: 0.875rem;
 }
 
+.frame-calendar[data-week-number] {
+  --frame-calendar-column-count: 8;
+}
+
+.frame-calendar[data-date-labels] {
+  --frame-calendar-effective-cell-size: max(2.75rem, var(--frame-calendar-cell-size));
+}
+
 .frame-calendar__header {
   display: flex;
   align-items: center;
@@ -107,22 +115,33 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--frame-calendar-gap);
+  inline-size: 100%;
 }
 
 .frame-calendar__month {
+  flex: var(--frame-calendar-month-flex);
+  inline-size: calc(var(--frame-calendar-effective-cell-size) * var(--frame-calendar-column-count));
   min-width: 0;
 }
 
 .frame-calendar__table {
+  inline-size: calc(var(--frame-calendar-effective-cell-size) * var(--frame-calendar-column-count));
   border-collapse: collapse;
   border-spacing: 0;
   margin-block-start: 0.25rem;
+  table-layout: fixed;
+}
+
+.frame-calendar__day-column,
+.frame-calendar__week-number-column {
+  inline-size: var(--frame-calendar-effective-cell-size);
 }
 
 .frame-calendar__weekday,
 .frame-calendar__week-number-header,
 .frame-calendar__week-number {
-  inline-size: var(--frame-calendar-cell-size);
+  box-sizing: border-box;
+  min-inline-size: var(--frame-calendar-effective-cell-size);
   block-size: 1.75rem;
   color: var(--frame-calendar-muted-color);
   font-size: 0.75rem;
@@ -136,6 +155,8 @@
 
 .frame-calendar__cell {
   position: relative;
+  box-sizing: border-box;
+  inline-size: var(--frame-calendar-effective-cell-size);
   padding-block: 0.125rem;
   padding-inline: 0;
   text-align: center;
@@ -144,9 +165,12 @@
 .frame-calendar__day {
   position: relative;
   z-index: 1;
+  box-sizing: border-box;
   display: inline-flex;
-  inline-size: var(--frame-calendar-cell-size);
-  block-size: var(--frame-calendar-cell-size);
+  inline-size: 100%;
+  min-inline-size: var(--frame-calendar-effective-cell-size);
+  min-block-size: var(--frame-calendar-effective-cell-size);
+  aspect-ratio: 1;
   flex-direction: column;
   align-items: center;
   justify-content: center;

package/card/src/styles/_vars.css

@@ -1,10 +1,18 @@
-:root {
+:where(:root) {
   --frame-card-bg: var(--frame-surface);
   --frame-card-color: var(--frame-surface-foreground);
   --frame-card-border: var(--frame-border);
   --frame-card-radius: var(--frame-radius-md);
-  --frame-card-shadow: none;
+  --frame-card-shadow: var(--frame-shadow-sm);
   --frame-card-font-size: 0.875rem;
+  --frame-card-spacing: var(--frame-density-panel-padding-md);
+  --frame-card-spacing-sm: var(--frame-density-gap-lg);
+  --frame-card-spacing-md: var(--frame-density-panel-padding-md);
+  --frame-card-spacing-lg: calc(var(--frame-density-panel-padding-md) + var(--frame-density-gap-sm));
+  --frame-card-spacing-xl: calc(var(--frame-density-panel-padding-md) + var(--frame-density-gap-xl));
+  --frame-card-header-gap: var(--frame-density-gap-sm);
+  --frame-card-action-gap: var(--frame-density-gap-xl);
+  --frame-card-footer-gap: var(--frame-density-gap-md);
   --frame-card-title-color: var(--frame-foreground);
   --frame-card-title-font-size: 1rem;
   --frame-card-title-font-weight: 600;

package/card/src/styles/card.css

@@ -1,142 +1,132 @@
-@import './_vars.css';
-
-[frCard],
-frame-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--frame-card-gap, var(--frame-card-spacing, 1rem));
-  overflow: hidden;
-  border: 1px solid var(--frame-card-border);
-  border-radius: var(--frame-card-radius);
-  background: var(--frame-card-bg);
-  box-shadow: var(--frame-card-shadow);
-  box-sizing: border-box;
-  color: var(--frame-card-color);
-  font-size: var(--frame-card-font-size);
-  padding-block: var(--frame-card-spacing, 1rem);
-  height: fit-content;
-}
-
-[frCard][data-size='sm'],
-frame-card[data-size='sm'] {
-  --frame-card-spacing: 0.75rem;
-}
-
-[frCard][data-spacing='sm'],
-frame-card[data-spacing='sm'] {
-  --frame-card-spacing: 0.75rem;
-}
-
-[frCard][data-spacing='md'],
-frame-card[data-spacing='md'] {
-  --frame-card-spacing: 1rem;
-}
-
-[frCard][data-spacing='lg'],
-frame-card[data-spacing='lg'] {
-  --frame-card-spacing: 1.25rem;
-}
-
-[frCard][data-spacing='xl'],
-frame-card[data-spacing='xl'] {
-  --frame-card-spacing: 2rem;
-}
-
-[frCard] > img:first-child,
-frame-card > img:first-child,
-[frCard] > picture:first-child img,
-frame-card > picture:first-child img {
-  display: block;
-  width: 100%;
-  border-start-start-radius: calc(var(--frame-card-radius) - 1px);
-  border-start-end-radius: calc(var(--frame-card-radius) - 1px);
-}
-
-[frCard] > img:first-child,
-frame-card > img:first-child,
-[frCard] > picture:first-child,
-frame-card > picture:first-child {
-  margin-block-start: calc(var(--frame-card-spacing, 1rem) * -1);
-}
-
-[frCard] > img:last-child,
-frame-card > img:last-child,
-[frCard] > picture:last-child img,
-frame-card > picture:last-child img {
-  border-end-start-radius: calc(var(--frame-card-radius) - 1px);
-  border-end-end-radius: calc(var(--frame-card-radius) - 1px);
-}
-
-[frCardHeader] {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-auto-rows: min-content;
-  align-items: start;
-  gap: 0.25rem;
-  padding-inline: var(--frame-card-spacing, 1rem);
-}
-
-[frCardHeader]:has([frCardAction]) {
-  grid-template-columns: minmax(0, 1fr) auto;
-  column-gap: 1rem;
-}
-
-[frCardHeader]:has([frCardDescription]) {
-  grid-template-rows: auto auto;
-}
-
-[frCardTitle] {
-  min-width: 0;
-  margin: 0;
-  color: var(--frame-card-title-color);
-  font-size: var(--frame-card-title-font-size);
-  font-weight: var(--frame-card-title-font-weight);
-  line-height: var(--frame-card-title-line-height);
-}
-
-[frCardDescription] {
-  min-width: 0;
-  margin: 0;
-  color: var(--frame-card-description-color);
-  font-size: var(--frame-card-description-font-size);
-  line-height: var(--frame-card-description-line-height);
-}
-
-[frCardAction] {
-  grid-column: 2;
-  grid-row: 1 / span 2;
-  align-self: start;
-  justify-self: end;
-}
-
-[frCardContent] {
-  padding-inline: var(--frame-card-spacing, 1rem);
-}
-
-[frCardContent] > :first-child,
-[frCardFooter] > :first-child {
-  margin-block-start: 0;
-}
-
-[frCardContent] > :last-child,
-[frCardFooter] > :last-child {
-  margin-block-end: 0;
-}
-
-[frCardFooter] {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-block-end: calc(var(--frame-card-spacing, 1rem) * -1);
-  border-block-start: 1px solid var(--frame-card-footer-border);
-  background: var(--frame-card-footer-bg);
-  padding: var(--frame-card-spacing, 1rem);
-}
-
-[frCardFooter][data-align='end'] {
-  justify-content: flex-end;
-}
-
-[frCardFooter][data-align='between'] {
-  justify-content: space-between;
-}
+@import './_vars.css';
+
+[frCard],
+frame-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--frame-card-gap, var(--frame-card-spacing));
+  overflow: hidden;
+  border: 1px solid var(--frame-card-border);
+  border-radius: var(--frame-card-radius);
+  background: var(--frame-card-bg);
+  box-shadow: var(--frame-card-shadow);
+  box-sizing: border-box;
+  color: var(--frame-card-color);
+  font-size: var(--frame-card-font-size);
+  padding-block: var(--frame-card-spacing);
+  height: fit-content;
+}
+
+[frCard][data-size='sm'],
+frame-card[data-size='sm'] {
+  --frame-card-spacing: var(--frame-card-spacing-sm);
+}
+
+[frCard][data-spacing='sm'],
+frame-card[data-spacing='sm'] {
+  --frame-card-spacing: var(--frame-card-spacing-sm);
+}
+
+[frCard][data-spacing='md'],
+frame-card[data-spacing='md'] {
+  --frame-card-spacing: var(--frame-card-spacing-md);
+}
+
+[frCard][data-spacing='lg'],
+frame-card[data-spacing='lg'] {
+  --frame-card-spacing: var(--frame-card-spacing-lg);
+}
+
+[frCard][data-spacing='xl'],
+frame-card[data-spacing='xl'] {
+  --frame-card-spacing: var(--frame-card-spacing-xl);
+}
+
+[frCard] > img:first-child,
+frame-card > img:first-child,
+[frCard] > picture:first-child img,
+frame-card > picture:first-child img {
+  display: block;
+  width: 100%;
+}
+
+[frCard] > img:first-child,
+frame-card > img:first-child,
+[frCard] > picture:first-child,
+frame-card > picture:first-child {
+  margin-block-start: calc(0rem - var(--frame-card-spacing));
+}
+
+[frCardHeader] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: min-content;
+  align-items: start;
+  gap: var(--frame-card-header-gap);
+  padding-inline: var(--frame-card-spacing);
+}
+
+[frCardHeader]:has([frCardAction]) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--frame-card-action-gap);
+}
+
+[frCardHeader]:has([frCardDescription]) {
+  grid-template-rows: auto auto;
+}
+
+[frCardTitle] {
+  min-width: 0;
+  margin: 0;
+  color: var(--frame-card-title-color);
+  font-size: var(--frame-card-title-font-size);
+  font-weight: var(--frame-card-title-font-weight);
+  line-height: var(--frame-card-title-line-height);
+}
+
+[frCardDescription] {
+  min-width: 0;
+  margin: 0;
+  color: var(--frame-card-description-color);
+  font-size: var(--frame-card-description-font-size);
+  line-height: var(--frame-card-description-line-height);
+}
+
+[frCardAction] {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+}
+
+[frCardContent] {
+  padding-inline: var(--frame-card-spacing);
+}
+
+[frCardContent] > :first-child,
+[frCardFooter] > :first-child {
+  margin-block-start: 0;
+}
+
+[frCardContent] > :last-child,
+[frCardFooter] > :last-child {
+  margin-block-end: 0;
+}
+
+[frCardFooter] {
+  display: flex;
+  align-items: center;
+  gap: var(--frame-card-footer-gap);
+  margin-block-end: calc(0rem - var(--frame-card-spacing));
+  border-block-start: 1px solid var(--frame-card-footer-border);
+  background: var(--frame-card-footer-bg);
+  padding: var(--frame-card-spacing);
+}
+
+[frCardFooter][data-align='end'] {
+  justify-content: flex-end;
+}
+
+[frCardFooter][data-align='between'] {
+  justify-content: space-between;
+}

package/carousel/src/styles/_vars.css

@@ -1,7 +1,7 @@
-:root {
-  --frame-carousel-gap: 1rem;
-  --frame-carousel-item-size: 100%;
-  --frame-carousel-control-offset: -3rem;
-  --frame-carousel-control-size: 2.5rem;
-  --frame-carousel-viewport-radius: var(--frame-radius-lg);
-}
+:where(:root) {
+  --frame-carousel-gap: var(--frame-density-gap-xl);
+  --frame-carousel-item-size: 100%;
+  --frame-carousel-control-offset: -3rem;
+  --frame-carousel-control-size: var(--frame-density-control-height-lg);
+  --frame-carousel-viewport-radius: var(--frame-radius-lg);
+}

package/checkbox/src/styles/_vars.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root) {
     --frame-checkbox-root-size: 1rem;
     --frame-checkbox-root-bg: var(--frame-surface);
     --frame-checkbox-root-border: var(--frame-border);
@@ -12,11 +12,11 @@
     --frame-checkbox-root-ring-color: var(--frame-ring);
     --frame-checkbox-root-focus-shadow: none;
     --frame-checkbox-root-disabled-opacity: 0.55;
-    --frame-checkbox-root-invalid-border: color-mix(in srgb, var(--frame-primary) 45%, var(--frame-border));
+    --frame-checkbox-root-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
     --frame-checkbox-indicator-size: 0.5rem;
     --frame-checkbox-indeterminate-width: 0.5rem;
     --frame-checkbox-indeterminate-height: 0.125rem;
-    --frame-checkbox-field-gap: 0.75rem;
+    --frame-checkbox-field-gap: var(--frame-density-gap-lg);
     --frame-checkbox-label-color: var(--frame-foreground);
     --frame-checkbox-label-disabled-color: var(--frame-muted-foreground);
 }

package/checkbox/src/styles/checkbox.css

@@ -1,95 +1,95 @@
-@import './_vars.css';
-
-[frCheckboxField] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--frame-checkbox-field-gap, 0.75rem);
-  width: fit-content;
-  color: var(--frame-checkbox-label-color, var(--frame-foreground));
-}
-
-[frCheckboxField]:has([frCheckbox]:disabled) {
-  color: var(--frame-checkbox-label-disabled-color, var(--frame-muted-foreground));
-}
-
-[frCheckboxLabel] {
-  font-size: 0.875rem;
-  line-height: 1.35;
-}
-
-[frCheckbox] {
-  appearance: none;
-  -webkit-appearance: none;
-  margin: 0;
-  inline-size: var(--frame-checkbox-root-size, 1rem);
-  block-size: var(--frame-checkbox-root-size, 1rem);
-  display: inline-grid;
-  place-content: center;
-  flex: 0 0 auto;
-  vertical-align: middle;
-  border: 1px solid var(--frame-checkbox-root-border, var(--frame-border));
-  border-radius: var(--frame-checkbox-root-radius);
-  background: var(--frame-checkbox-root-bg, var(--frame-surface));
-  color: var(--frame-checkbox-root-color, var(--frame-primary-foreground));
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    border-color 150ms ease,
-    box-shadow 150ms ease,
-    color 150ms ease,
-    opacity 150ms ease;
-}
-
-[frCheckbox]::before {
-  content: '';
-  inline-size: var(--frame-checkbox-indicator-size, 0.625rem);
-  block-size: var(--frame-checkbox-indicator-size, 0.625rem);
-  transform: scale(0);
-  transition: transform 120ms ease;
-  clip-path: polygon(14% 44%, 0 59%, 43% 100%, 100% 18%, 84% 4%, 43% 62%);
-  box-shadow: inset 1rem 1rem currentColor;
-}
-
-[frCheckbox]:where(:not(:disabled)):hover {
-  background: var(--frame-checkbox-root-hover-bg, var(--frame-checkbox-root-bg, var(--frame-surface)));
-  border-color: var(--frame-checkbox-root-hover-border, var(--frame-checkbox-root-border, var(--frame-border)));
-}
-
-[frCheckbox]:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(
-    --frame-checkbox-root-focus-shadow,
-    0 0 0 3px color-mix(in srgb, var(--frame-checkbox-root-ring-color, var(--frame-ring)) 35%, transparent)
-  );
-}
-
-[frCheckbox]:checked,
-[frCheckbox]:indeterminate {
-  background: var(--frame-checkbox-root-checked-bg, var(--frame-primary));
-  border-color: var(--frame-checkbox-root-checked-border, var(--frame-primary));
-  color: var(--frame-checkbox-root-checked-color, var(--frame-primary-foreground));
-}
-
-[frCheckbox]:checked::before {
-  transform: scale(1);
-}
-
-[frCheckbox]:indeterminate::before {
-  inline-size: var(--frame-checkbox-indeterminate-width, 0.5rem);
-  block-size: var(--frame-checkbox-indeterminate-height, 0.125rem);
-  transform: scale(1);
-  border-radius: 999px;
-  clip-path: none;
-  box-shadow: none;
-  background: currentColor;
-}
-
-[frCheckbox]:disabled {
-  cursor: not-allowed;
-  opacity: var(--frame-checkbox-root-disabled-opacity, 0.55);
-}
-
-[frCheckbox][aria-invalid='true'] {
-  border-color: var(--frame-checkbox-root-invalid-border, color-mix(in srgb, var(--frame-primary) 45%, var(--frame-border)));
-}
+@import './_vars.css';
+
+[frCheckboxField] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--frame-checkbox-field-gap, 0.75rem);
+  width: fit-content;
+  color: var(--frame-checkbox-label-color, var(--frame-foreground));
+}
+
+[frCheckboxField]:has([frCheckbox]:disabled) {
+  color: var(--frame-checkbox-label-disabled-color, var(--frame-muted-foreground));
+}
+
+[frCheckboxLabel] {
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+[frCheckbox] {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  inline-size: var(--frame-checkbox-root-size, 1rem);
+  block-size: var(--frame-checkbox-root-size, 1rem);
+  display: inline-grid;
+  place-content: center;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  border: 1px solid var(--frame-checkbox-root-border, var(--frame-border));
+  border-radius: var(--frame-checkbox-root-radius);
+  background: var(--frame-checkbox-root-bg, var(--frame-surface));
+  color: var(--frame-checkbox-root-color, var(--frame-primary-foreground));
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    color 150ms ease,
+    opacity 150ms ease;
+}
+
+[frCheckbox]::before {
+  content: '';
+  inline-size: var(--frame-checkbox-indicator-size, 0.625rem);
+  block-size: var(--frame-checkbox-indicator-size, 0.625rem);
+  transform: scale(0);
+  transition: transform 120ms ease;
+  clip-path: polygon(14% 44%, 0 59%, 43% 100%, 100% 18%, 84% 4%, 43% 62%);
+  box-shadow: inset 1rem 1rem currentColor;
+}
+
+[frCheckbox]:where(:not(:disabled)):hover {
+  background: var(--frame-checkbox-root-hover-bg, var(--frame-checkbox-root-bg, var(--frame-surface)));
+  border-color: var(--frame-checkbox-root-hover-border, var(--frame-checkbox-root-border, var(--frame-border)));
+}
+
+[frCheckbox]:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(
+    --frame-checkbox-root-focus-shadow,
+    0 0 0 3px color-mix(in srgb, var(--frame-checkbox-root-ring-color, var(--frame-ring)) 35%, transparent)
+  );
+}
+
+[frCheckbox]:checked,
+[frCheckbox]:indeterminate {
+  background: var(--frame-checkbox-root-checked-bg, var(--frame-primary));
+  border-color: var(--frame-checkbox-root-checked-border, var(--frame-primary));
+  color: var(--frame-checkbox-root-checked-color, var(--frame-primary-foreground));
+}
+
+[frCheckbox]:checked::before {
+  transform: scale(1);
+}
+
+[frCheckbox]:indeterminate::before {
+  inline-size: var(--frame-checkbox-indeterminate-width, 0.5rem);
+  block-size: var(--frame-checkbox-indeterminate-height, 0.125rem);
+  transform: scale(1);
+  border-radius: var(--frame-radius-full);
+  clip-path: none;
+  box-shadow: none;
+  background: currentColor;
+}
+
+[frCheckbox]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-checkbox-root-disabled-opacity, 0.55);
+}
+
+[frCheckbox][aria-invalid='true'] {
+  border-color: var(--frame-checkbox-root-invalid-border, color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border)));
+}

package/collapsible/src/styles/_vars.css

@@ -1,13 +1,13 @@
-:root {
-  --frame-collapsible-trigger-gap: 0.5rem;
-  --frame-collapsible-trigger-color: var(--frame-foreground);
-  --frame-collapsible-trigger-disabled-opacity: 0.55;
-  --frame-collapsible-content-color: var(--frame-muted-foreground);
-  --frame-collapsible-content-font-size: 0.875rem;
-  --frame-collapsible-content-line-height: 1.6;
-  --frame-collapsible-content-padding-block-start: 0.75rem;
-  --frame-collapsible-content-opacity-closed: 0;
-  --frame-collapsible-content-opacity-open: 1;
-  --frame-collapsible-content-transition-duration: 220ms;
-  --frame-collapsible-content-transition-timing: ease;
-}
+:where(:root) {
+  --frame-collapsible-trigger-gap: var(--frame-density-gap-md);
+  --frame-collapsible-trigger-color: var(--frame-foreground);
+  --frame-collapsible-trigger-disabled-opacity: 0.55;
+  --frame-collapsible-content-color: var(--frame-muted-foreground);
+  --frame-collapsible-content-font-size: 0.875rem;
+  --frame-collapsible-content-line-height: 1.6;
+  --frame-collapsible-content-padding-block-start: 0.75rem;
+  --frame-collapsible-content-opacity-closed: 0;
+  --frame-collapsible-content-opacity-open: 1;
+  --frame-collapsible-content-transition-duration: 220ms;
+  --frame-collapsible-content-transition-timing: ease;
+}