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

package/sheet/src/styles/_vars.css

@@ -1,20 +1,20 @@
-:root {
+:where(:root) {
   --frame-sheet-backdrop-blur: 2px;
   --frame-sheet-backdrop-bg: rgb(0 0 0 / 0.5);
-  --frame-sheet-bg: var(--frame-background, #fff);
-  --frame-sheet-border: var(--frame-border, #e5e7eb);
-  --frame-sheet-color: var(--frame-foreground, #09090b);
-  --frame-sheet-muted-color: var(--frame-muted-foreground, #71717a);
-  --frame-sheet-shadow: 0 24px 80px rgb(0 0 0 / 0.2), 0 8px 24px rgb(0 0 0 / 0.14);
-  --frame-sheet-radius: 0;
-  --frame-sheet-padding: 1.5rem;
-  --frame-sheet-gap: 1rem;
+  --frame-sheet-bg: var(--frame-background);
+  --frame-sheet-border: var(--frame-border);
+  --frame-sheet-color: var(--frame-foreground);
+  --frame-sheet-muted-color: var(--frame-muted-foreground);
+  --frame-sheet-shadow: var(--frame-shadow-lg);
+  --frame-sheet-radius: 0px;
+  --frame-sheet-padding: var(--frame-density-panel-padding-lg);
+  --frame-sheet-gap: var(--frame-density-gap-xl);
   --frame-sheet-inline-size: min(100vw, 28rem);
   --frame-sheet-block-size: min(100dvh, 28rem);
   --frame-sheet-close-bg: transparent;
-  --frame-sheet-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-sheet-close-color: var(--frame-muted-foreground);
   --frame-sheet-close-radius: var(--frame-radius-sm);
-  --frame-sheet-close-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-sheet-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-sheet-close-hover-bg: var(--frame-muted);
+  --frame-sheet-close-hover-color: var(--frame-foreground);
   --frame-sheet-z-index: 1000;
 }

package/sheet/src/styles/sheet.css

@@ -28,7 +28,7 @@
   border: 1px solid var(--frame-sheet-border);
   border-radius: var(--frame-sheet-radius);
   background: var(--frame-sheet-bg);
-  box-shadow: var(--frame-sheet-shadow), var(--frame-shadow-frame);
+  box-shadow: var(--frame-sheet-shadow);
   color: var(--frame-sheet-color);
 }
 

package/sidebar/src/styles/_vars.css

@@ -1,24 +1,24 @@
-:root {
-  --frame-sidebar-width: 16rem;
-  --frame-sidebar-width-icon: 3.5rem;
-  --frame-sidebar-width-mobile: 18rem;
-  --frame-sidebar-bg: var(--frame-background, #fff);
-  --frame-sidebar-color: var(--frame-foreground, #09090b);
-  --frame-sidebar-muted-color: var(--frame-muted-foreground, #71717a);
-  --frame-sidebar-border: var(--frame-border, #e5e7eb);
-  --frame-sidebar-accent: var(--frame-accent, #f4f4f5);
-  --frame-sidebar-accent-color: var(--frame-accent-foreground, #18181b);
-  --frame-sidebar-primary: var(--frame-primary, #18181b);
-  --frame-sidebar-primary-color: var(--frame-primary-foreground, #fff);
-  --frame-sidebar-ring: var(--frame-ring, #18181b);
-  --frame-sidebar-radius: var(--frame-radius-lg, 0.75rem);
-  --frame-sidebar-margin: 0.5rem;
-  --frame-sidebar-padding: 0.5rem;
-  --frame-sidebar-gap: 0.5rem;
-  --frame-sidebar-menu-button-height: 2rem;
-  --frame-sidebar-menu-button-radius: var(--frame-radius-md, 0.5rem);
-  --frame-sidebar-shadow: 0 20px 60px rgb(0 0 0 / 0.12);
-  --frame-sidebar-transition-duration: 200ms;
-  --frame-sidebar-z-index: 40;
-  --frame-sidebar-mobile-backdrop: rgb(0 0 0 / 0.42);
-}
+:where(:root) {
+  --frame-sidebar-width: 16rem;
+  --frame-sidebar-width-icon: 3.5rem;
+  --frame-sidebar-width-mobile: 18rem;
+  --frame-sidebar-bg: var(--frame-background);
+  --frame-sidebar-color: var(--frame-foreground);
+  --frame-sidebar-muted-color: var(--frame-muted-foreground);
+  --frame-sidebar-border: var(--frame-border);
+  --frame-sidebar-accent: var(--frame-accent);
+  --frame-sidebar-accent-color: var(--frame-accent-foreground);
+  --frame-sidebar-primary: var(--frame-primary);
+  --frame-sidebar-primary-color: var(--frame-primary-foreground);
+  --frame-sidebar-ring: var(--frame-ring);
+  --frame-sidebar-radius: var(--frame-radius-lg);
+  --frame-sidebar-margin: var(--frame-density-gap-md);
+  --frame-sidebar-padding: var(--frame-density-gap-md);
+  --frame-sidebar-gap: var(--frame-density-gap-md);
+  --frame-sidebar-menu-button-height: var(--frame-density-item-height);
+  --frame-sidebar-menu-button-radius: var(--frame-radius-md);
+  --frame-sidebar-shadow: var(--frame-shadow-lg);
+  --frame-sidebar-transition-duration: 200ms;
+  --frame-sidebar-z-index: 40;
+  --frame-sidebar-mobile-backdrop: rgb(0 0 0 / 0.42);
+}

package/sidebar/src/styles/sidebar.css

@@ -96,7 +96,7 @@ frame-sidebar[data-variant="inset"] {
   margin: var(--frame-sidebar-margin);
   border: 1px solid var(--frame-sidebar-border);
   border-radius: var(--frame-sidebar-radius);
-  box-shadow: var(--frame-sidebar-shadow), var(--frame-shadow-frame);
+  box-shadow: var(--frame-sidebar-shadow);
 }
 
 [frSidebar][data-collapsible="icon"][data-state="collapsed"],
@@ -404,7 +404,7 @@ frame-sidebar-menu-badge {
   inset-block-start: 0.375rem;
   inset-inline-end: 0.5rem;
   min-width: 1.25rem;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   color: var(--frame-sidebar-muted-color);
   font-size: 0.75rem;
   font-weight: 650;
@@ -439,7 +439,7 @@ frame-sidebar-menu-skeleton {
 frame-sidebar-menu-skeleton::after {
   width: var(--frame-sidebar-skeleton-width, 72%);
   height: 0.75rem;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: var(--frame-sidebar-accent);
   content: "";
 }
@@ -449,7 +449,7 @@ frame-sidebar-menu-skeleton[data-show-icon]::before {
   width: 1rem;
   height: 1rem;
   flex: 0 0 auto;
-  border-radius: 0.25rem;
+  border-radius: var(--frame-radius-sm);
   background: var(--frame-sidebar-accent);
   content: "";
 }
@@ -499,7 +499,7 @@ frame-sidebar-rail::after {
   inset-block: 1rem;
   inset-inline-start: 50%;
   width: 2px;
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
   background: transparent;
   content: "";
   transform: translateX(-50%);

package/skeleton/src/styles/_vars.css

@@ -1,8 +1,8 @@
-:root {
-  --frame-skeleton-bg: color-mix(in srgb, var(--frame-muted, #f4f4f5) 84%, var(--frame-foreground, #09090b) 8%);
-  --frame-skeleton-highlight: color-mix(in srgb, var(--frame-background, #fff) 64%, transparent);
-  --frame-skeleton-radius: var(--frame-radius-md, 0.5rem);
-  --frame-skeleton-width: 100%;
-  --frame-skeleton-height: 1rem;
-  --frame-skeleton-animation-duration: 1.4s;
-}
+:where(:root) {
+  --frame-skeleton-bg: color-mix(in srgb, var(--frame-muted) 84%, var(--frame-foreground) 8%);
+  --frame-skeleton-highlight: color-mix(in srgb, var(--frame-background) 64%, transparent);
+  --frame-skeleton-radius: var(--frame-radius-md);
+  --frame-skeleton-width: 100%;
+  --frame-skeleton-height: 1rem;
+  --frame-skeleton-animation-duration: 1.4s;
+}

package/slider/src/styles/_vars.css

@@ -1,17 +1,17 @@
-:root {
+:where(:root) {
   --frame-slider-width: 100%;
   --frame-slider-height: 1.25rem;
   --frame-slider-vertical-width: 1.25rem;
   --frame-slider-vertical-height: 12rem;
   --frame-slider-track-size: 0.5rem;
-  --frame-slider-track-bg: var(--frame-muted, #f4f4f5);
-  --frame-slider-range-bg: var(--frame-primary, #18181b);
+  --frame-slider-track-bg: var(--frame-muted);
+  --frame-slider-range-bg: var(--frame-primary);
   --frame-slider-thumb-size: 1.25rem;
-  --frame-slider-thumb-bg: var(--frame-background, #fff);
-  --frame-slider-thumb-border: var(--frame-primary, #18181b);
+  --frame-slider-thumb-bg: var(--frame-background);
+  --frame-slider-thumb-border: var(--frame-primary);
   --frame-slider-thumb-border-width: 2px;
   --frame-slider-thumb-shadow: none;
   --frame-slider-thumb-focus-shadow: none;
   --frame-slider-disabled-opacity: 0.5;
-  --frame-slider-radius: 0;
+  --frame-slider-radius: var(--frame-radius-sm);
 }

package/slider/src/styles/slider.css

@@ -1,147 +1,147 @@
-@import './_vars.css';
-
-frame-slider {
-  position: relative;
-  display: grid;
-  align-items: center;
-  inline-size: var(--frame-slider-width);
-  block-size: var(--frame-slider-height);
-  touch-action: none;
-  user-select: none;
-}
-
-frame-slider[data-disabled] {
-  cursor: not-allowed;
-  opacity: var(--frame-slider-disabled-opacity);
-}
-
-frame-slider[data-orientation='vertical'] {
-  inline-size: var(--frame-slider-vertical-width);
-  block-size: var(--frame-slider-vertical-height);
-  justify-items: center;
-}
-
-.frame-slider__track {
-  position: absolute;
-  border-radius: var(--frame-slider-radius);
-  background: var(--frame-slider-track-bg);
-  pointer-events: none;
-}
-
-frame-slider[data-orientation='horizontal'] .frame-slider__track {
-  inset-inline: 0;
-  inset-block-start: 50%;
-  block-size: var(--frame-slider-track-size);
-  transform: translateY(-50%);
-}
-
-frame-slider[data-orientation='vertical'] .frame-slider__track {
-  inset-block: 0;
-  inset-inline-start: 50%;
-  inline-size: var(--frame-slider-track-size);
-  transform: translateX(-50%);
-}
-
-.frame-slider__range {
-  position: absolute;
-  border-radius: inherit;
-  background: var(--frame-slider-range-bg);
-}
-
-frame-slider[data-orientation='horizontal'] .frame-slider__range {
-  inset-block: 0;
-  inset-inline-start: var(--frame-slider-start-percent);
-  inline-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
-}
-
-frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__range {
-  inset-inline-start: auto;
-  inset-inline-end: var(--frame-slider-start-percent);
-}
-
-frame-slider[data-orientation='vertical'] .frame-slider__range {
-  inset-inline: 0;
-  inset-block-end: var(--frame-slider-start-percent);
-  block-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
-}
-
-frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__range {
-  inset-block-start: var(--frame-slider-start-percent);
-  inset-block-end: auto;
-}
-
-.frame-slider__native {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.frame-slider__native:disabled {
-  cursor: not-allowed;
-}
-
-frame-slider[data-orientation='vertical'] .frame-slider__native {
-  writing-mode: vertical-lr;
-}
-
-.frame-slider__thumb {
-  position: absolute;
-  z-index: 1;
-  display: block;
-  inline-size: var(--frame-slider-thumb-size);
-  block-size: var(--frame-slider-thumb-size);
-  border: var(--frame-slider-thumb-border-width) solid var(--frame-slider-thumb-border);
-  border-radius: 999px;
-  background: var(--frame-slider-thumb-bg);
-  box-shadow: var(--frame-slider-thumb-shadow);
-  cursor: grab;
-}
-
-frame-slider[data-disabled] .frame-slider__thumb {
-  cursor: not-allowed;
-}
-
-.frame-slider__thumb[data-active] {
-  cursor: grabbing;
-}
-
-frame-slider[data-orientation='horizontal'] .frame-slider__thumb {
-  inset-inline-start: var(--frame-slider-thumb-percent);
-  inset-block-start: 50%;
-  transform: translate(-50%, -50%);
-}
-
-frame-slider[data-orientation='horizontal']:dir(rtl) .frame-slider__thumb {
-  transform: translate(50%, -50%);
-}
-
-frame-slider[data-orientation='vertical'] .frame-slider__thumb {
-  inset-inline-start: 50%;
-  inset-block-end: var(--frame-slider-thumb-percent);
-  transform: translate(-50%, 50%);
-}
-
-frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__thumb {
-  inset-inline-start: auto;
-  inset-inline-end: var(--frame-slider-thumb-percent);
-}
-
-frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__thumb {
-  inset-block-start: var(--frame-slider-thumb-percent);
-  inset-block-end: auto;
-  transform: translate(-50%, -50%);
-}
-
-.frame-slider__native:focus-visible + .frame-slider__thumb,
-.frame-slider__thumb[data-active] {
-  box-shadow: var(--frame-slider-thumb-shadow), var(--frame-slider-thumb-focus-shadow);
-}
-
-frame-slider[data-invalid] {
-  --frame-slider-range-bg: var(--frame-destructive, #dc2626);
-  --frame-slider-thumb-border: var(--frame-destructive, #dc2626);
-}
+@import './_vars.css';
+
+frame-slider {
+  position: relative;
+  display: grid;
+  align-items: center;
+  inline-size: var(--frame-slider-width);
+  block-size: var(--frame-slider-height);
+  touch-action: none;
+  user-select: none;
+}
+
+frame-slider[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-slider-disabled-opacity);
+}
+
+frame-slider[data-orientation='vertical'] {
+  inline-size: var(--frame-slider-vertical-width);
+  block-size: var(--frame-slider-vertical-height);
+  justify-items: center;
+}
+
+.frame-slider__track {
+  position: absolute;
+  border-radius: var(--frame-slider-radius);
+  background: var(--frame-slider-track-bg);
+  pointer-events: none;
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__track {
+  inset-inline: 0;
+  inset-block-start: 50%;
+  block-size: var(--frame-slider-track-size);
+  transform: translateY(-50%);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__track {
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: var(--frame-slider-track-size);
+  transform: translateX(-50%);
+}
+
+.frame-slider__range {
+  position: absolute;
+  border-radius: inherit;
+  background: var(--frame-slider-range-bg);
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__range {
+  inset-block: 0;
+  inset-inline-start: var(--frame-slider-start-percent);
+  inline-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
+}
+
+frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__range {
+  inset-inline-start: auto;
+  inset-inline-end: var(--frame-slider-start-percent);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__range {
+  inset-inline: 0;
+  inset-block-end: var(--frame-slider-start-percent);
+  block-size: calc(var(--frame-slider-end-percent) - var(--frame-slider-start-percent));
+}
+
+frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__range {
+  inset-block-start: var(--frame-slider-start-percent);
+  inset-block-end: auto;
+}
+
+.frame-slider__native {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.frame-slider__native:disabled {
+  cursor: not-allowed;
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__native {
+  writing-mode: vertical-lr;
+}
+
+.frame-slider__thumb {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  inline-size: var(--frame-slider-thumb-size);
+  block-size: var(--frame-slider-thumb-size);
+  border: var(--frame-slider-thumb-border-width) solid var(--frame-slider-thumb-border);
+  border-radius: var(--frame-radius-full);
+  background: var(--frame-slider-thumb-bg);
+  box-shadow: var(--frame-slider-thumb-shadow);
+  cursor: grab;
+}
+
+frame-slider[data-disabled] .frame-slider__thumb {
+  cursor: not-allowed;
+}
+
+.frame-slider__thumb[data-active] {
+  cursor: grabbing;
+}
+
+frame-slider[data-orientation='horizontal'] .frame-slider__thumb {
+  inset-inline-start: var(--frame-slider-thumb-percent);
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+frame-slider[data-orientation='horizontal']:dir(rtl) .frame-slider__thumb {
+  transform: translate(50%, -50%);
+}
+
+frame-slider[data-orientation='vertical'] .frame-slider__thumb {
+  inset-inline-start: 50%;
+  inset-block-end: var(--frame-slider-thumb-percent);
+  transform: translate(-50%, 50%);
+}
+
+frame-slider[data-orientation='horizontal'][data-inverted='true'] .frame-slider__thumb {
+  inset-inline-start: auto;
+  inset-inline-end: var(--frame-slider-thumb-percent);
+}
+
+frame-slider[data-orientation='vertical'][data-inverted='true'] .frame-slider__thumb {
+  inset-block-start: var(--frame-slider-thumb-percent);
+  inset-block-end: auto;
+  transform: translate(-50%, -50%);
+}
+
+.frame-slider__native:focus-visible + .frame-slider__thumb,
+.frame-slider__thumb[data-active] {
+  box-shadow: var(--frame-slider-thumb-shadow), var(--frame-slider-thumb-focus-shadow);
+}
+
+frame-slider[data-invalid] {
+  --frame-slider-range-bg: var(--frame-destructive);
+  --frame-slider-thumb-border: var(--frame-destructive);
+}

package/spinner/src/styles/_vars.css

@@ -1,9 +1,8 @@
-:root {
-  --frame-spinner-size: 1rem;
-  --frame-spinner-stroke: 2px;
-  --frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
-  --frame-spinner-indicator-color: currentColor;
-  --frame-spinner-radius: 999px;
-  --frame-spinner-duration: 700ms;
-}
-
+:where(:root) {
+  --frame-spinner-size: 1rem;
+  --frame-spinner-stroke: 2px;
+  --frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
+  --frame-spinner-indicator-color: currentColor;
+  --frame-spinner-radius: var(--frame-radius-full);
+  --frame-spinner-duration: 700ms;
+}

package/src/styles/blueprint.css

@@ -3,69 +3,6 @@
  * Loaded after component styles to give the library its technical frame language.
  */
 
-:root {
-  --frame-alert-root-radius: 0px;
-  --frame-breadcrumb-ellipsis-radius: 0px;
-  --frame-breadcrumb-link-radius: 0px;
-  --frame-button-root-radius: 0px;
-  --frame-calendar-radius: 0px;
-  --frame-calendar-cell-radius: 0px;
-  --frame-calendar-nav-radius: 0px;
-  --frame-calendar-select-radius: 0px;
-  --frame-card-radius: 0px;
-  --frame-carousel-viewport-radius: 0px;
-  --frame-checkbox-root-radius: 0px;
-  --frame-combobox-clear-radius: 0px;
-  --frame-combobox-control-radius: 0px;
-  --frame-combobox-item-radius: 0px;
-  --frame-combobox-panel-radius: 0px;
-  --frame-command-item-radius: 0px;
-  --frame-command-radius: 0px;
-  --frame-date-picker-content-radius: 0px;
-  --frame-date-picker-preset-radius: 0px;
-  --frame-date-picker-time-input-radius: 0px;
-  --frame-date-picker-trigger-radius: 0px;
-  --frame-dropdown-menu-item-radius: 0px;
-  --frame-dropdown-menu-panel-radius: 0px;
-  --frame-empty-media-radius: 0px;
-  --frame-empty-radius: 0px;
-  --frame-hover-card-content-radius: 0px;
-  --frame-input-group-radius: 0px;
-  --frame-input-otp-slot-radius: 0px;
-  --frame-input-root-radius: 0px;
-  --frame-item-media-radius: 0px;
-  --frame-item-radius: 0px;
-  --frame-menubar-radius: 0px;
-  --frame-menubar-trigger-radius: 0px;
-  --frame-modal-close-radius: 0px;
-  --frame-modal-radius: 0px;
-  --frame-navigation-menu-link-radius: 0px;
-  --frame-navigation-menu-radius: 0px;
-  --frame-navigation-menu-trigger-radius: 0px;
-  --frame-navigation-menu-viewport-radius: 0px;
-  --frame-pagination-link-radius: 0px;
-  --frame-popover-close-radius: 0px;
-  --frame-popover-content-radius: 0px;
-  --frame-radio-group-card-radius: 0px;
-  --frame-resizable-radius: 0px;
-  --frame-select-trigger-radius: 0px;
-  --frame-select-content-radius: 0px;
-  --frame-sheet-close-radius: 0px;
-  --frame-sheet-radius: 0px;
-  --frame-sidebar-menu-button-radius: 0px;
-  --frame-sidebar-radius: 0px;
-  --frame-skeleton-radius: 0px;
-  --frame-table-radius: 0px;
-  --frame-tabs-list-radius: 0px;
-  --frame-tabs-trigger-radius: 0px;
-  --frame-textarea-root-radius: 0px;
-  --frame-toast-action-radius: 0px;
-  --frame-toast-radius: 0px;
-  --frame-toggle-radius: 0px;
-  --frame-tooltip-content-radius: 0px;
-  --frame-virtual-list-radius: 0px;
-}
-
 :where(
   [frAccordion],
   [frAlert],
@@ -239,6 +176,12 @@
   --frame-blueprint-radius: var(--frame-tabs-list-radius);
 }
 
+:where(
+  frame-input-otp
+) {
+  --frame-blueprint-radius: var(--frame-input-otp-slot-radius);
+}
+
 :where(
   [frVirtualList],
   frame-virtual-list
@@ -391,6 +334,13 @@
   content: none;
 }
 
+:where(
+  [frTabsList][data-variant='line'],
+  frame-tabs-list[data-variant='line']
+)::before {
+  content: none;
+}
+
 .frame-date-picker__content .frame-calendar::before {
   content: none;
 }
@@ -506,7 +456,7 @@
 }
 
 [frRadioGroupItem]::before {
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
 }
 
 .frame-input-otp__separator::before {
@@ -539,7 +489,7 @@
   frame-spinner,
   .frame-slider__thumb
 ) {
-  border-radius: 999px;
+  border-radius: var(--frame-radius-full);
 }
 
 :where(