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

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 FrameUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# FrameUI Components
+
+Accessible Angular UI primitives for FrameUI.
+
+## Install
+
+```bash
+npm install @frame-ui-ng/components @frame-ui-ng/foundation
+```
+
+## Styles
+
+Import the bundled FrameUI styles once in your global stylesheet:
+
+```css
+@import '@frame-ui-ng/components/styles.css';
+```
+
+This includes the foundation token styles and all component styles.
+
+## Usage
+
+```ts
+import { FrButton } from '@frame-ui-ng/components/button';
+```
+
+```html
+<button frButton>Save changes</button>
+```
+
+Documentation: https://frame-ui.com

package/accordion/src/styles/_vars.css

@@ -0,0 +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;
+}

package/accordion/src/styles/accordion.css

@@ -0,0 +1,87 @@
+@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));
+}*/

package/alert/src/styles/_vars.css

@@ -0,0 +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;
+}

package/alert/src/styles/alert.css

@@ -0,0 +1,77 @@
+@import './_vars.css';
+
+[frAlert] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--frame-alert-root-gap, 0.75rem);
+  align-items: start;
+  border: 1px solid var(--frame-alert-root-border, var(--frame-border));
+  border-radius: var(--frame-alert-root-radius);
+  background: var(--frame-alert-root-bg, var(--frame-surface));
+  /* box-shadow: var(--frame-alert-root-shadow, none); */
+  color: var(--frame-alert-root-color, var(--frame-surface-foreground));
+  padding-block: var(--frame-alert-root-padding-y, 1rem);
+  padding-inline: var(--frame-alert-root-padding-x, 1rem);
+}
+
+[frAlertIcon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  grid-column: 1;
+  grid-row: 1;
+  inline-size: var(--frame-alert-root-icon-size, 1rem);
+  block-size: var(--frame-alert-root-icon-size, 1rem);
+  margin-block-start: 0.125rem;
+  flex: 0 0 auto;
+  margin-right: 0.125rem;
+}
+
+[frAlert] > :not([frAlertIcon]) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+[frAlert][data-variant='destructive'] {
+  background: var(--frame-alert-root-destructive-bg, color-mix(in srgb, var(--frame-destructive) 10%, var(--frame-surface)));
+  border-color: var(--frame-alert-root-destructive-border, color-mix(in srgb, var(--frame-destructive) 28%, var(--frame-border)));
+  color: var(--frame-alert-root-destructive-color, var(--frame-surface-foreground));
+}
+
+[frAlert][data-variant='success'] {
+  background: var(--frame-alert-root-success-bg, color-mix(in srgb, #16a34a 10%, var(--frame-surface)));
+  border-color: var(--frame-alert-root-success-border, color-mix(in srgb, #16a34a 28%, var(--frame-border)));
+  color: var(--frame-alert-root-success-color, var(--frame-surface-foreground));
+}
+
+[frAlert][data-variant='danger'] {
+  background: var(--frame-alert-root-danger-bg, color-mix(in srgb, #d97706 10%, var(--frame-surface)));
+  border-color: var(--frame-alert-root-danger-border, color-mix(in srgb, #d97706 30%, var(--frame-border)));
+  color: var(--frame-alert-root-danger-color, var(--frame-surface-foreground));
+}
+
+[frAlert][data-variant='info'] {
+  background: var(--frame-alert-root-info-bg, color-mix(in srgb, #2563eb 10%, var(--frame-surface)));
+  border-color: var(--frame-alert-root-info-border, color-mix(in srgb, #2563eb 28%, var(--frame-border)));
+  color: var(--frame-alert-root-info-color, var(--frame-surface-foreground));
+}
+
+[frAlertTitle] {
+  margin: 0;
+  font-size: var(--frame-alert-title-font-size, 0.9375rem);
+  font-weight: var(--frame-alert-title-font-weight, 600);
+  line-height: 1.2;
+}
+
+[frAlertDescription] {
+  color: var(--frame-alert-description-color, var(--frame-muted-foreground));
+  font-size: var(--frame-alert-description-font-size, 0.875rem);
+  line-height: var(--frame-alert-description-line-height, 1.5);
+}
+
+[frAlert][data-variant='destructive'] [frAlertDescription],
+[frAlert][data-variant='success'] [frAlertDescription],
+[frAlert][data-variant='danger'] [frAlertDescription],
+[frAlert][data-variant='info'] [frAlertDescription] {
+  color: color-mix(in srgb, currentColor 72%, var(--frame-muted-foreground));
+}

package/avatar/src/styles/_vars.css

@@ -0,0 +1,34 @@
+:root {
+  --frame-avatar-root-size: 2.5rem;
+  --frame-avatar-root-radius: 999px;
+  --frame-avatar-root-bg: var(--frame-muted);
+  --frame-avatar-root-border: transparent;
+  --frame-avatar-root-color: var(--frame-muted-foreground);
+  --frame-avatar-root-font-size: 0.875rem;
+  --frame-avatar-root-font-weight: 600;
+  --frame-avatar-root-shadow: none;
+  --frame-avatar-size-xs: 1.5rem;
+  --frame-avatar-size-sm: 2rem;
+  --frame-avatar-size-md: 2.5rem;
+  --frame-avatar-size-lg: 3.5rem;
+  --frame-avatar-font-size-xs: 0.5rem;
+  --frame-avatar-font-size-sm: 0.75rem;
+  --frame-avatar-font-size-md: 0.875rem;
+  --frame-avatar-font-size-lg: 1rem;
+  --frame-avatar-image-fit: cover;
+  --frame-avatar-fallback-padding: 0.25rem;
+  --frame-avatar-icon-size: 1rem;
+  --frame-avatar-badge-size: 1.25rem;
+  --frame-avatar-badge-radius: 999px;
+  --frame-avatar-badge-bg: var(--frame-primary);
+  --frame-avatar-badge-border: var(--frame-surface);
+  --frame-avatar-badge-color: var(--frame-primary-foreground);
+  --frame-avatar-badge-font-size: 0.675rem;
+  --frame-avatar-badge-font-weight: 700;
+  --frame-avatar-group-overlap: 0.625rem;
+  --frame-avatar-group-transition-duration: 180ms;
+  --frame-avatar-group-transition-timing: ease;
+  --frame-avatar-group-count-bg: var(--frame-surface);
+  --frame-avatar-group-count-border: var(--frame-border);
+  --frame-avatar-group-count-color: var(--frame-muted-foreground);
+}

package/avatar/src/styles/avatar.css

@@ -0,0 +1,209 @@
+@import './_vars.css';
+
+[frAvatar] {
+  --frame-avatar-badge-size-current: var(
+    --frame-avatar-badge-size,
+    calc(var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem)) * 0.35)
+  );
+  --frame-avatar-badge-font-size-current: var(
+    --frame-avatar-badge-font-size,
+    calc(var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem)) * 0.72)
+  );
+  position: relative;
+  inline-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
+  block-size: var(--frame-avatar-size-current, var(--frame-avatar-root-size, 2.5rem));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+  flex: 0 0 auto;
+  border: 1px solid var(--frame-avatar-root-border, transparent);
+  border-radius: var(--frame-avatar-root-radius, 999px);
+  background: var(--frame-avatar-root-bg, var(--frame-muted));
+  box-shadow: var(--frame-avatar-root-shadow, none);
+  color: var(--frame-avatar-root-color, var(--frame-muted-foreground));
+  font-size: var(--frame-avatar-font-size-current, var(--frame-avatar-root-font-size, 0.875rem));
+  font-weight: var(--frame-avatar-root-font-weight, 600);
+  line-height: 1;
+  text-transform: uppercase;
+  user-select: none;
+  vertical-align: middle;
+}
+
+[frAvatar][data-size='xs'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-xs, 1rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-xs, 0.5rem);
+}
+
+[frAvatar][data-size='sm'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatar][data-size='md'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatar][data-size='lg'] {
+  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarImage],
+[frAvatarFallback],
+[frAvatarIcon] {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+
+[frAvatarImage] {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: var(--frame-avatar-image-fit, cover);
+  opacity: 0;
+  transition: opacity 160ms ease;
+}
+
+[frAvatar][data-status='loaded'] [frAvatarImage] {
+  opacity: 1;
+}
+
+[frAvatarFallback] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: var(--frame-avatar-fallback-padding, 0.25rem);
+  line-height: inherit;
+  text-align: center;
+  transition: opacity 160ms ease;
+}
+
+[frAvatarIcon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  font-size: var(--frame-avatar-icon-size, 1rem);
+  line-height: inherit;
+  transition: opacity 160ms ease;
+}
+
+[frAvatarIcon] > * {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+[frAvatarFallback][data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[frAvatarIcon][data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[frAvatarBadge] {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  z-index: 2;
+  min-inline-size: var(--frame-avatar-badge-size-current);
+  block-size: var(--frame-avatar-badge-size-current);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 0.25rem;
+  border: 2px solid var(--frame-avatar-badge-border, var(--frame-surface));
+  border-radius: var(--frame-avatar-badge-radius, 999px);
+  background: var(--frame-avatar-badge-bg, var(--frame-primary));
+  color: var(--frame-avatar-badge-color, var(--frame-primary-foreground));
+  font-size: var(--frame-avatar-badge-font-size-current);
+  font-weight: var(--frame-avatar-badge-font-weight, 700);
+  line-height: 1;
+  transform: translate(18%, 18%);
+}
+
+[frAvatarGroup] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[frAvatarGroup] > [frAvatar],
+[frAvatarGroup] > [frAvatarGroupCount] {
+  margin-inline-start: calc(var(--frame-avatar-group-overlap) * -1);
+  box-shadow: var(--frame-shadow-sm);
+  transition:
+    margin-inline-start var(--frame-avatar-group-transition-duration, 180ms)
+      var(--frame-avatar-group-transition-timing, ease),
+    transform var(--frame-avatar-group-transition-duration, 180ms)
+      var(--frame-avatar-group-transition-timing, ease);
+}
+
+[frAvatarGroup] > :first-child {
+  margin-inline-start: 0;
+}
+
+[frAvatarGroup] > [frAvatar],
+[frAvatarGroup] > [frAvatarGroupCount] {
+  position: relative;
+}
+
+[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
+  > [frAvatar]:not(:first-child),
+[frAvatarGroup][data-expand-on-hover='true']:where(:hover, :focus-within)
+  > [frAvatarGroupCount]:not(:first-child) {
+  margin-inline-start: 0;
+}
+
+[frAvatarGroup][data-size='sm'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-sm, 2rem);
+  block-size: var(--frame-avatar-size-sm, 2rem);
+  font-size: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatarGroup][data-size='md'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-md, 2.5rem);
+  block-size: var(--frame-avatar-size-md, 2.5rem);
+  font-size: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatarGroup][data-size='lg'] > [frAvatarGroupCount] {
+  inline-size: var(--frame-avatar-size-lg, 3.5rem);
+  block-size: var(--frame-avatar-size-lg, 3.5rem);
+  font-size: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarGroup][data-size='sm'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-sm, 2rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-sm, 0.75rem);
+}
+
+[frAvatarGroup][data-size='md'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-md, 2.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-md, 0.875rem);
+}
+
+[frAvatarGroup][data-size='lg'] > [frAvatar] {
+  --frame-avatar-size-current: var(--frame-avatar-size-lg, 3.5rem);
+  --frame-avatar-font-size-current: var(--frame-avatar-font-size-lg, 1rem);
+}
+
+[frAvatarGroupCount] {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--frame-avatar-group-count-border, var(--frame-border));
+  border-radius: var(--frame-avatar-root-radius, 999px);
+  background: var(--frame-avatar-group-count-bg, var(--frame-surface));
+  color: var(--frame-avatar-group-count-color, var(--frame-muted-foreground));
+  font-weight: var(--frame-avatar-root-font-weight, 600);
+  box-shadow: var(--frame-avatar-root-shadow, none);
+}

package/badge/src/styles/_vars.css

@@ -0,0 +1,16 @@
+: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;
+}

package/badge/src/styles/badge.css

@@ -0,0 +1,125 @@
+@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;
+}

package/breadcrumb/src/styles/_vars.css

@@ -0,0 +1,16 @@
+: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;
+}