@frame-ui-ng/components 0.4.2-beta.0 → 0.5.1-beta.0

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;
+}

package/combobox/src/styles/_vars.css

@@ -1,11 +1,11 @@
-:root {
-  --frame-combobox-control-height: 2.5rem;
+:where(:root) {
+  --frame-combobox-control-height: var(--frame-density-control-height-lg);
   --frame-combobox-control-radius: var(--frame-radius-md);
   --frame-combobox-control-bg: var(--frame-surface);
   --frame-combobox-control-color: var(--frame-surface-foreground);
   --frame-combobox-control-border: var(--frame-border);
   --frame-combobox-control-font-size: 0.875rem;
-  --frame-combobox-control-padding-inline: 0.875rem;
+  --frame-combobox-control-padding-inline: var(--frame-density-control-padding-x-md);
   --frame-combobox-control-disabled-bg: color-mix(in srgb, var(--frame-surface) 78%, var(--frame-muted));
   --frame-combobox-control-disabled-color: var(--frame-muted-foreground);
   --frame-combobox-control-disabled-opacity: 0.6;
@@ -22,40 +22,40 @@
   --frame-combobox-panel-color: var(--frame-surface-foreground);
   --frame-combobox-panel-border: var(--frame-border);
   --frame-combobox-panel-shadow: var(--frame-shadow-md);
-  --frame-combobox-panel-padding: 0.25rem;
+  --frame-combobox-panel-padding: var(--frame-density-panel-padding-sm);
   --frame-combobox-motion-duration: 140ms;
   --frame-combobox-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
   --frame-combobox-motion-distance: 0.2rem;
   --frame-combobox-motion-scale: 0.98;
-  --frame-combobox-list-gap: 0.125rem;
-  --frame-combobox-item-height: 2rem;
-  --frame-combobox-item-gap: 0.5rem;
-  --frame-combobox-item-radius: calc(var(--frame-radius-md) - 0.125rem);
+  --frame-combobox-list-gap: var(--frame-density-gap-xs);
+  --frame-combobox-item-height: var(--frame-density-item-height);
+  --frame-combobox-item-gap: var(--frame-density-gap-md);
+  --frame-combobox-item-radius: var(--frame-radius-sm);
   --frame-combobox-item-font-size: 0.875rem;
-  --frame-combobox-item-padding: 0.375rem 0.5rem 0.375rem 2rem;
+  --frame-combobox-item-padding: var(--frame-density-gap-md) var(--frame-density-gap-md) var(--frame-density-gap-md) 2rem;
   --frame-combobox-item-indicator-offset: 0.625rem;
   --frame-combobox-item-disabled-opacity: 0.5;
   --frame-combobox-muted-font-size: 0.8125rem;
-  --frame-combobox-muted-padding: 0.5rem;
-  --frame-combobox-separator-margin: 0.25rem -0.25rem;
+  --frame-combobox-muted-padding: var(--frame-density-gap-md);
+  --frame-combobox-separator-margin: var(--frame-density-gap-sm) calc(0rem - var(--frame-density-gap-sm));
   --frame-combobox-separator-bg: var(--frame-border);
-  --frame-combobox-chip-gap: 0.25rem;
-  --frame-combobox-chip-height: 1.375rem;
-  --frame-combobox-chip-radius: 0;
+  --frame-combobox-chip-gap: var(--frame-density-gap-sm);
+  --frame-combobox-chip-height: var(--frame-density-inline-height);
+  --frame-combobox-chip-radius: var(--frame-radius-sm);
   --frame-combobox-chip-bg: var(--frame-primary);
   --frame-combobox-chip-color: var(--frame-primary-foreground);
   --frame-combobox-chip-font-size: 0.75rem;
   --frame-combobox-chip-font-weight: 600;
-  --frame-combobox-chip-padding-block: 0.1875rem;
-  --frame-combobox-chip-padding-inline: 0.625rem 0.25rem;
+  --frame-combobox-chip-padding-block: var(--frame-density-inline-padding-block);
+  --frame-combobox-chip-padding-inline: var(--frame-density-inline-padding-inline) var(--frame-density-gap-sm);
   --frame-combobox-chip-remove-size: 1rem;
-  --frame-combobox-chip-remove-radius: 0;
+  --frame-combobox-chip-remove-radius: var(--frame-radius-sm);
   --frame-combobox-chip-remove-bg: color-mix(in srgb, currentColor 12%, transparent);
   --frame-combobox-chip-remove-hover-bg: color-mix(in srgb, currentColor 20%, transparent);
-  --frame-combobox-chips-gap: 0.375rem;
-  --frame-combobox-chips-padding: 0.375rem;
+  --frame-combobox-chips-gap: var(--frame-density-gap-md);
+  --frame-combobox-chips-padding: var(--frame-density-gap-md);
   --frame-combobox-chips-input-min-width: 8rem;
-  --frame-combobox-chips-input-padding: 0.25rem;
+  --frame-combobox-chips-input-padding: var(--frame-density-gap-sm);
   --frame-combobox-error-color: var(--frame-destructive);
   --frame-combobox-error-font-size: 0.8125rem;
 }