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

package/accordion/src/styles/_vars.css

@@ -1,25 +1,25 @@
-:root {
-  --frame-accordion-item-border: var(--frame-border);
-  --frame-accordion-item-radius: var(--frame-radius-md);
-  --frame-accordion-item-padding-x: 0;
-  --frame-accordion-trigger-min-height: 3rem;
-  --frame-accordion-trigger-padding-y: 1rem;
-  --frame-accordion-trigger-padding-x: 0;
-  --frame-accordion-trigger-gap: 1rem;
-  --frame-accordion-trigger-color: var(--frame-foreground);
-  --frame-accordion-trigger-font-size: 0.9375rem;
-  --frame-accordion-trigger-font-weight: 500;
-  --frame-accordion-trigger-hover-color: var(--frame-foreground);
-  --frame-accordion-trigger-disabled-opacity: 0.55;
-  --frame-accordion-content-padding-bottom: 1rem;
-  --frame-accordion-content-padding-inline: 0;
-  --frame-accordion-content-color: var(--frame-muted-foreground);
-  --frame-accordion-content-font-size: 0.875rem;
-  --frame-accordion-content-line-height: 1.6;
-  --frame-accordion-content-opacity-closed: 0;
-  --frame-accordion-content-opacity-open: 1;
-  --frame-accordion-content-transition-duration: 220ms;
-  --frame-accordion-content-transition-timing: ease;
-  --frame-accordion-icon-size: 1rem;
-  --frame-accordion-icon-rotation: 180deg;
-}
+:root {
+  --frame-accordion-item-border: var(--frame-border);
+  --frame-accordion-item-radius: 0;
+  --frame-accordion-item-padding-x: 0;
+  --frame-accordion-trigger-min-height: 3.25rem;
+  --frame-accordion-trigger-padding-y: 1rem;
+  --frame-accordion-trigger-padding-x: 1rem;
+  --frame-accordion-trigger-gap: 1rem;
+  --frame-accordion-trigger-color: var(--frame-foreground);
+  --frame-accordion-trigger-font-size: 0.9375rem;
+  --frame-accordion-trigger-font-weight: 500;
+  --frame-accordion-trigger-hover-color: var(--frame-foreground);
+  --frame-accordion-trigger-disabled-opacity: 0.55;
+  --frame-accordion-content-padding-bottom: 1rem;
+  --frame-accordion-content-padding-inline: 1rem;
+  --frame-accordion-content-color: var(--frame-muted-foreground);
+  --frame-accordion-content-font-size: 0.875rem;
+  --frame-accordion-content-line-height: 1.6;
+  --frame-accordion-content-opacity-closed: 0;
+  --frame-accordion-content-opacity-open: 1;
+  --frame-accordion-content-transition-duration: 240ms;
+  --frame-accordion-content-transition-timing: cubic-bezier(0.2, 0, 0, 1);
+  --frame-accordion-icon-size: 1rem;
+  --frame-accordion-icon-rotation: 180deg;
+}

package/accordion/src/styles/accordion.css

@@ -1,87 +1,105 @@
-@import './_vars.css';
-
-[frAccordion] {
-  display: grid;
-}
-
-[frAccordion][data-border='true'] {
-  border: 1px solid var(--frame-border);
-  border-radius: var(--frame-radius-md);
-  padding-inline: var(--frame-spacing-md);
-}
-
-[frAccordionItem] {
-  border-bottom: 1px solid var(--frame-accordion-item-border, var(--frame-border));
-  padding-inline: var(--frame-accordion-item-padding-x, 0);
-}
-
-[frAccordionItem]:last-child {
-  border-bottom: 0;
-}
-
-[frAccordionTrigger] {
-  inline-size: 100%;
-  min-block-size: var(--frame-accordion-trigger-min-height, 3rem);
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--frame-accordion-trigger-gap, 1rem);
-  border: 0;
-  background: transparent;
-  color: var(--frame-accordion-trigger-color, var(--frame-foreground));
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--frame-accordion-trigger-font-size, 0.9375rem);
-  font-weight: var(--frame-accordion-trigger-font-weight, 500);
-  line-height: 1.4;
-  padding-block: var(--frame-accordion-trigger-padding-y, 1rem);
-  padding-inline: var(--frame-accordion-trigger-padding-x, 0);
-  text-align: start;
-}
-
-[frAccordionTrigger]:where(:not([data-disabled])):hover {
-  color: var(--frame-accordion-trigger-hover-color, var(--frame-foreground));
-}
-
-[frAccordionTrigger]:where(:disabled, [data-disabled]) {
-  cursor: not-allowed;
-  opacity: var(--frame-accordion-trigger-disabled-opacity, 0.55);
-}
-
-[frAccordionContent] {
-  color: var(--frame-accordion-content-color, var(--frame-muted-foreground));
-  font-size: var(--frame-accordion-content-font-size, 0.875rem);
-  line-height: var(--frame-accordion-content-line-height, 1.6);
-  overflow: clip;
-  padding-bottom: 0;
-  padding-inline: var(--frame-accordion-content-padding-inline, 0);
-  transition:
-    height var(--frame-accordion-content-transition-duration, 220ms)
-      var(--frame-accordion-content-transition-timing, ease),
-    opacity var(--frame-accordion-content-transition-duration, 220ms)
-      var(--frame-accordion-content-transition-timing, ease),
-    padding-bottom var(--frame-accordion-content-transition-duration, 220ms)
-      var(--frame-accordion-content-transition-timing, ease);
-  will-change: height, opacity;
-}
-
-[frAccordionContent][data-state='closed'] {
-  opacity: var(--frame-accordion-content-opacity-closed, 0);
-  padding-bottom: 0;
-}
-
-[frAccordionContent][data-state='open'] {
-  opacity: var(--frame-accordion-content-opacity-open, 1);
-  padding-bottom: var(--frame-accordion-content-padding-bottom, 1rem);
-}
-
-[frAccordionIcon] {
-  inline-size: var(--frame-accordion-icon-size, 1rem);
-  block-size: var(--frame-accordion-icon-size, 1rem);
-  flex: 0 0 auto;
-  transition: transform 180ms ease;
-}
-
-/*[frAccordionTrigger][data-state='open'] [frAccordionIcon] {
-  transform: rotate(var(--frame-accordion-icon-rotation, 180deg));
-}*/
+@import './_vars.css';
+
+[frAccordion] {
+  display: grid;
+  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+  background: var(--frame-surface);
+}
+
+[frAccordion][data-border='true'] {
+  border-color: var(--frame-border);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+[frAccordionItem] {
+  position: relative;
+  border-bottom: 1px solid var(--frame-accordion-item-border, var(--frame-border));
+  border-radius: var(--frame-accordion-item-radius, 0);
+  padding-inline: 0;
+}
+
+[frAccordionItem]:last-child {
+  border-bottom: 0;
+}
+
+[frAccordionTrigger] {
+  inline-size: 100%;
+  min-block-size: var(--frame-accordion-trigger-min-height, 3.25rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--frame-accordion-trigger-gap, 1rem);
+  border: 0;
+  background: transparent;
+  color: var(--frame-accordion-trigger-color, var(--frame-foreground));
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-accordion-trigger-font-size, 0.9375rem);
+  font-weight: var(--frame-accordion-trigger-font-weight, 500);
+  line-height: 1.4;
+  padding-block: var(--frame-accordion-trigger-padding-y, 1rem);
+  padding-inline: var(--frame-accordion-trigger-padding-x, 1rem);
+  text-align: start;
+  transition:
+    color 160ms ease,
+    background-color 160ms ease;
+}
+
+[frAccordionTrigger]:where(:not([data-disabled])):hover {
+  color: var(--frame-accordion-trigger-hover-color, var(--frame-foreground));
+  background: color-mix(in srgb, var(--frame-muted) 42%, transparent);
+}
+
+[frAccordionTrigger]:focus-visible {
+  outline: 1px solid var(--frame-frame-accent, var(--frame-ring));
+  outline-offset: -1px;
+}
+
+[frAccordionTrigger][data-state='open'] {
+  color: var(--frame-frame-accent, var(--frame-primary));
+}
+
+[frAccordionTrigger]:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-accordion-trigger-disabled-opacity, 0.55);
+}
+
+[frAccordionContent] {
+  box-sizing: border-box;
+  color: var(--frame-accordion-content-color, var(--frame-muted-foreground));
+  font-size: var(--frame-accordion-content-font-size, 0.875rem);
+  line-height: var(--frame-accordion-content-line-height, 1.6);
+  overflow: hidden;
+  padding-block: 0 var(--frame-accordion-content-padding-bottom, 1rem);
+  padding-inline: var(--frame-accordion-content-padding-inline, 1rem);
+  transition:
+    height var(--frame-accordion-content-transition-duration, 240ms)
+      var(--frame-accordion-content-transition-timing, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--frame-accordion-content-transition-duration, 220ms)
+      var(--frame-accordion-content-transition-timing, ease);
+  will-change: height, opacity;
+}
+
+[frAccordionContent][data-state='closed'] {
+  opacity: var(--frame-accordion-content-opacity-closed, 0);
+}
+
+[frAccordionContent][data-state='open'] {
+  opacity: var(--frame-accordion-content-opacity-open, 1);
+}
+
+[frAccordionIcon] {
+  inline-size: var(--frame-accordion-icon-size, 1rem);
+  block-size: var(--frame-accordion-icon-size, 1rem);
+  flex: 0 0 auto;
+  color: var(--frame-muted-foreground);
+  transition:
+    color 160ms ease,
+    transform 180ms ease;
+}
+
+[frAccordionTrigger][data-state='open'] [frAccordionIcon] {
+  color: var(--frame-frame-accent, var(--frame-primary));
+  transform: rotate(var(--frame-accordion-icon-rotation, 180deg));
+}

package/alert/src/styles/_vars.css

@@ -1,28 +1,28 @@
-:root {
-  --frame-alert-root-bg: var(--frame-surface);
-  --frame-alert-root-border: var(--frame-border);
-  --frame-alert-root-color: var(--frame-surface-foreground);
-  --frame-alert-root-radius: var(--frame-radius-md);
-  --frame-alert-root-padding-y: 1rem;
-  --frame-alert-root-padding-x: 1rem;
-  --frame-alert-root-gap: 0.25rem;
-  --frame-alert-root-icon-size: 1rem;
-  --frame-alert-root-shadow: none;
-  --frame-alert-root-destructive-bg: color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface));
-  --frame-alert-root-destructive-border: color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border));
-  --frame-alert-root-destructive-color: var(--frame-surface-foreground);
-  --frame-alert-root-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
-  --frame-alert-root-success-border: color-mix(in srgb, #16a34a 28%, var(--frame-border));
-  --frame-alert-root-success-color: var(--frame-surface-foreground);
-  --frame-alert-root-danger-bg: color-mix(in srgb, #d97706 10%, var(--frame-surface));
-  --frame-alert-root-danger-border: color-mix(in srgb, #d97706 30%, var(--frame-border));
-  --frame-alert-root-danger-color: var(--frame-surface-foreground);
-  --frame-alert-root-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
-  --frame-alert-root-info-border: color-mix(in srgb, #2563eb 28%, var(--frame-border));
-  --frame-alert-root-info-color: var(--frame-surface-foreground);
-  --frame-alert-title-font-size: 0.9375rem;
-  --frame-alert-title-font-weight: 600;
-  --frame-alert-description-color: var(--frame-muted-foreground);
-  --frame-alert-description-font-size: 0.875rem;
-  --frame-alert-description-line-height: 1.5;
-}
+:root {
+  --frame-alert-root-bg: var(--frame-surface);
+  --frame-alert-root-border: var(--frame-border);
+  --frame-alert-root-color: var(--frame-surface-foreground);
+  --frame-alert-root-radius: var(--frame-radius-md);
+  --frame-alert-root-padding-y: 1rem;
+  --frame-alert-root-padding-x: 1rem;
+  --frame-alert-root-gap: 0.25rem;
+  --frame-alert-root-icon-size: 1rem;
+  --frame-alert-root-shadow: none;
+  --frame-alert-root-destructive-bg: color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface));
+  --frame-alert-root-destructive-border: color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border));
+  --frame-alert-root-destructive-color: var(--frame-surface-foreground);
+  --frame-alert-root-success-bg: color-mix(in srgb, #16a34a 10%, var(--frame-surface));
+  --frame-alert-root-success-border: color-mix(in srgb, #16a34a 28%, var(--frame-border));
+  --frame-alert-root-success-color: var(--frame-surface-foreground);
+  --frame-alert-root-danger-bg: color-mix(in srgb, #d97706 10%, var(--frame-surface));
+  --frame-alert-root-danger-border: color-mix(in srgb, #d97706 30%, var(--frame-border));
+  --frame-alert-root-danger-color: var(--frame-surface-foreground);
+  --frame-alert-root-info-bg: color-mix(in srgb, #2563eb 10%, var(--frame-surface));
+  --frame-alert-root-info-border: color-mix(in srgb, #2563eb 28%, var(--frame-border));
+  --frame-alert-root-info-color: var(--frame-surface-foreground);
+  --frame-alert-title-font-size: 0.9375rem;
+  --frame-alert-title-font-weight: 600;
+  --frame-alert-description-color: var(--frame-muted-foreground);
+  --frame-alert-description-font-size: 0.875rem;
+  --frame-alert-description-line-height: 1.65;
+}

package/badge/src/styles/_vars.css

@@ -1,16 +1,19 @@
-:root {
-  --frame-badge-root-gap: 0.25rem;
-  --frame-badge-root-min-height: 1.375rem;
-  --frame-badge-root-radius: 999px;
-  --frame-badge-root-font-size: 0.75rem;
-  --frame-badge-root-font-weight: 600;
-  --frame-badge-root-bg: var(--frame-primary);
-  --frame-badge-root-color: var(--frame-primary-foreground);
-  --frame-badge-root-padding-block: 0.1875rem;
-  --frame-badge-root-padding-inline: 0.625rem;
-  --frame-badge-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-  --frame-badge-root-transition-duration: 150ms;
-  --frame-badge-link-underline-offset: 0.1875rem;
-  --frame-badge-icon-size: 0.475rem;
-  --frame-badge-icon-offset: -0.125rem;
-}
+:root {
+  --frame-badge-root-gap: 0.25rem;
+  --frame-badge-root-min-height: 1.375rem;
+  --frame-badge-root-radius: 0;
+  --frame-badge-root-font-size: 0.75rem;
+  --frame-badge-root-font-weight: 600;
+  --frame-badge-root-bg: var(--frame-primary);
+  --frame-badge-root-color: var(--frame-primary-foreground);
+  --frame-badge-success-bg: color-mix(in srgb, #16a34a 16%, var(--frame-surface));
+  --frame-badge-success-border: color-mix(in srgb, #16a34a 32%, transparent);
+  --frame-badge-success-color: color-mix(in srgb, #16a34a 78%, var(--frame-foreground));
+  --frame-badge-root-padding-block: 0.1875rem;
+  --frame-badge-root-padding-inline: 0.625rem;
+  --frame-badge-root-focus-shadow: none;
+  --frame-badge-root-transition-duration: 150ms;
+  --frame-badge-link-underline-offset: 0.1875rem;
+  --frame-badge-icon-size: 0.475rem;
+  --frame-badge-icon-offset: -0.125rem;
+}

package/badge/src/styles/badge.css

@@ -1,125 +1,132 @@
-@import './_vars.css';
-
-[frBadge],
-frame-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--frame-badge-root-gap);
-  width: fit-content;
-  min-block-size: var(--frame-badge-root-min-height);
-  border: 1px solid transparent;
-  border-radius: var(--frame-badge-root-radius);
-  background: var(--frame-badge-root-bg);
-  color: var(--frame-badge-root-color);
-  box-sizing: border-box;
-  font-size: var(--frame-badge-root-font-size);
-  font-weight: var(--frame-badge-root-font-weight);
-  line-height: 1;
-  padding-block: var(--frame-badge-root-padding-block);
-  padding-inline: var(--frame-badge-root-padding-inline);
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  transition:
-    background-color var(--frame-badge-root-transition-duration) ease,
-    border-color var(--frame-badge-root-transition-duration) ease,
-    color var(--frame-badge-root-transition-duration) ease,
-    box-shadow var(--frame-badge-root-transition-duration) ease;
-}
-
-[frBadge][href],
-frame-badge[href] {
-  cursor: pointer;
-}
-
-[frBadge][href]:hover,
-frame-badge[href]:hover {
-  text-decoration: none;
-}
-
-[frBadge]:focus-visible,
-frame-badge:focus-visible {
-  outline: none;
-  box-shadow: var(--frame-badge-root-focus-shadow);
-}
-
-[frBadge][data-variant='secondary'],
-frame-badge[data-variant='secondary'] {
-  background: var(--frame-muted);
-  color: var(--frame-foreground);
-}
-
-[frBadge][data-variant='destructive'],
-frame-badge[data-variant='destructive'] {
-  background: var(--frame-destructive);
-  color: var(--frame-destructive-foreground);
-}
-
-[frBadge][data-variant='outline'],
-frame-badge[data-variant='outline'] {
-  border-color: var(--frame-border);
-  background: transparent;
-  color: var(--frame-foreground);
-}
-
-[frBadge][data-variant='ghost'],
-frame-badge[data-variant='ghost'] {
-  background: transparent;
-  color: var(--frame-foreground);
-}
-
-[frBadge][data-variant='link'],
-frame-badge[data-variant='link'] {
-  background: transparent;
-  color: var(--frame-primary);
-  padding-inline: 0;
-}
-
-[frBadge][data-variant='link'][href]:hover,
-frame-badge[data-variant='link'][href]:hover {
-  text-decoration: underline;
-  text-underline-offset: var(--frame-badge-link-underline-offset);
-}
-
-[frBadgeIcon],
-[frBadgeSpinner],
-[frBadge] > [frSpinner],
-frame-badge > [frSpinner],
-frame-badge > .frame-spinner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  inline-size: var(--frame-badge-icon-size);
-  block-size: var(--frame-badge-icon-size);
-}
-
-[frBadgeIcon][data-icon='inline-start'],
-[frBadgeSpinner][data-icon='inline-start'],
-[frBadge] > [frSpinner]:first-child,
-frame-badge > [frSpinner]:first-child,
-frame-badge > .frame-spinner:first-child {
-  margin-inline-start: var(--frame-badge-icon-offset);
-}
-
-[frBadgeIcon][data-icon='inline-end'],
-[frBadgeSpinner][data-icon='inline-end'],
-[frBadge] > [frSpinner]:last-child,
-frame-badge > [frSpinner]:last-child,
-frame-badge > .frame-spinner:last-child {
-  margin-inline-end: var(--frame-badge-icon-offset);
-}
-
-[frBadgeSpinner],
-[frBadge] > [frSpinner],
-frame-badge > [frSpinner],
-frame-badge > .frame-spinner {
-  --frame-spinner-size: var(--frame-badge-icon-size);
-  --frame-spinner-stroke: 0.125rem;
-}
-
-[frBadgeLabel] {
-  min-width: 0;
-}
+@import './_vars.css';
+
+[frBadge],
+frame-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-badge-root-gap);
+  width: fit-content;
+  min-block-size: var(--frame-badge-root-min-height);
+  border: 1px solid transparent;
+  border-radius: var(--frame-badge-root-radius);
+  background: var(--frame-badge-root-bg);
+  color: var(--frame-badge-root-color);
+  box-sizing: border-box;
+  font-size: var(--frame-badge-root-font-size);
+  font-weight: var(--frame-badge-root-font-weight);
+  line-height: 1;
+  padding-block: var(--frame-badge-root-padding-block);
+  padding-inline: var(--frame-badge-root-padding-inline);
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  transition:
+    background-color var(--frame-badge-root-transition-duration) ease,
+    border-color var(--frame-badge-root-transition-duration) ease,
+    color var(--frame-badge-root-transition-duration) ease,
+    box-shadow var(--frame-badge-root-transition-duration) ease;
+}
+
+[frBadge][href],
+frame-badge[href] {
+  cursor: pointer;
+}
+
+[frBadge][href]:hover,
+frame-badge[href]:hover {
+  text-decoration: none;
+}
+
+[frBadge]:focus-visible,
+frame-badge:focus-visible {
+  outline: none;
+  box-shadow: var(--frame-badge-root-focus-shadow);
+}
+
+[frBadge][data-variant='secondary'],
+frame-badge[data-variant='secondary'] {
+  background: var(--frame-muted);
+  color: var(--frame-foreground);
+}
+
+[frBadge][data-variant='success'],
+frame-badge[data-variant='success'] {
+  border-color: var(--frame-badge-success-border);
+  background: var(--frame-badge-success-bg);
+  color: var(--frame-badge-success-color);
+}
+
+[frBadge][data-variant='destructive'],
+frame-badge[data-variant='destructive'] {
+  background: var(--frame-destructive);
+  color: var(--frame-destructive-foreground);
+}
+
+[frBadge][data-variant='outline'],
+frame-badge[data-variant='outline'] {
+  border-color: var(--frame-border);
+  background: transparent;
+  color: var(--frame-foreground);
+}
+
+[frBadge][data-variant='ghost'],
+frame-badge[data-variant='ghost'] {
+  background: transparent;
+  color: var(--frame-foreground);
+}
+
+[frBadge][data-variant='link'],
+frame-badge[data-variant='link'] {
+  background: transparent;
+  color: var(--frame-primary);
+  padding-inline: 0;
+}
+
+[frBadge][data-variant='link'][href]:hover,
+frame-badge[data-variant='link'][href]:hover {
+  text-decoration: underline;
+  text-underline-offset: var(--frame-badge-link-underline-offset);
+}
+
+[frBadgeIcon],
+[frBadgeSpinner],
+[frBadge] > [frSpinner],
+frame-badge > [frSpinner],
+frame-badge > .frame-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--frame-badge-icon-size);
+  block-size: var(--frame-badge-icon-size);
+}
+
+[frBadgeIcon][data-icon='inline-start'],
+[frBadgeSpinner][data-icon='inline-start'],
+[frBadge] > [frSpinner]:first-child,
+frame-badge > [frSpinner]:first-child,
+frame-badge > .frame-spinner:first-child {
+  margin-inline-start: var(--frame-badge-icon-offset);
+}
+
+[frBadgeIcon][data-icon='inline-end'],
+[frBadgeSpinner][data-icon='inline-end'],
+[frBadge] > [frSpinner]:last-child,
+frame-badge > [frSpinner]:last-child,
+frame-badge > .frame-spinner:last-child {
+  margin-inline-end: var(--frame-badge-icon-offset);
+}
+
+[frBadgeSpinner],
+[frBadge] > [frSpinner],
+frame-badge > [frSpinner],
+frame-badge > .frame-spinner {
+  --frame-spinner-size: var(--frame-badge-icon-size);
+  --frame-spinner-stroke: 0.125rem;
+}
+
+[frBadgeLabel] {
+  min-width: 0;
+}

package/breadcrumb/src/styles/_vars.css

@@ -1,16 +1,17 @@
-:root {
-  --frame-breadcrumb-root-color: var(--frame-muted-foreground);
-  --frame-breadcrumb-root-font-size: 0.875rem;
-  --frame-breadcrumb-root-line-height: 1.25rem;
-  --frame-breadcrumb-list-gap: 0.375rem;
-  --frame-breadcrumb-link-color: var(--frame-muted-foreground);
-  --frame-breadcrumb-link-hover-color: var(--frame-foreground);
-  --frame-breadcrumb-link-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-  --frame-breadcrumb-page-color: var(--frame-foreground);
-  --frame-breadcrumb-separator-color: var(--frame-muted-foreground);
-  --frame-breadcrumb-separator-size: 0.875rem;
-  --frame-breadcrumb-ellipsis-size: 1.5rem;
-  --frame-breadcrumb-ellipsis-radius: var(--frame-radius-sm);
-  --frame-breadcrumb-ellipsis-hover-bg: var(--frame-muted);
-  --frame-breadcrumb-transition-duration: 150ms;
-}
+:root {
+  --frame-breadcrumb-root-color: var(--frame-muted-foreground);
+  --frame-breadcrumb-root-font-size: 0.875rem;
+  --frame-breadcrumb-root-line-height: 1.25rem;
+  --frame-breadcrumb-list-gap: 0.375rem;
+  --frame-breadcrumb-link-radius: var(--frame-radius-sm);
+  --frame-breadcrumb-link-color: var(--frame-muted-foreground);
+  --frame-breadcrumb-link-hover-color: var(--frame-foreground);
+  --frame-breadcrumb-link-focus-shadow: none;
+  --frame-breadcrumb-page-color: var(--frame-foreground);
+  --frame-breadcrumb-separator-color: var(--frame-muted-foreground);
+  --frame-breadcrumb-separator-size: 0.875rem;
+  --frame-breadcrumb-ellipsis-size: 1.5rem;
+  --frame-breadcrumb-ellipsis-radius: var(--frame-radius-sm);
+  --frame-breadcrumb-ellipsis-hover-bg: var(--frame-muted);
+  --frame-breadcrumb-transition-duration: 150ms;
+}