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

package/card/src/styles/_vars.css

@@ -0,0 +1,17 @@
+: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: 0 1px 2px rgb(0 0 0 / 0.04);
+  --frame-card-font-size: 0.875rem;
+  --frame-card-title-color: var(--frame-foreground);
+  --frame-card-title-font-size: 1rem;
+  --frame-card-title-font-weight: 600;
+  --frame-card-title-line-height: 1.25;
+  --frame-card-description-color: var(--frame-muted-foreground);
+  --frame-card-description-font-size: 0.875rem;
+  --frame-card-description-line-height: 1.45;
+  --frame-card-footer-bg: color-mix(in srgb, var(--frame-muted) 48%, transparent);
+  --frame-card-footer-border: var(--frame-border);
+}

package/card/src/styles/card.css

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

package/carousel/src/styles/_vars.css

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

package/carousel/src/styles/carousel.css

@@ -0,0 +1,89 @@
+@import './_vars.css';
+
+[frCarousel],
+frame-carousel {
+  position: relative;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[frCarouselContent] {
+  display: flex;
+  gap: var(--frame-carousel-gap);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--frame-carousel-viewport-radius);
+}
+
+[frCarouselContent]::-webkit-scrollbar {
+  display: none;
+}
+
+[frCarouselContent][data-orientation='vertical'] {
+  max-block-size: var(--frame-carousel-vertical-size, 20rem);
+  flex-direction: column;
+  scroll-snap-type: y mandatory;
+}
+
+[frCarouselItem],
+[data-frame-carousel-clone] {
+  flex: 0 0 var(--frame-carousel-item-size);
+  min-width: 0;
+  min-height: 0;
+  scroll-snap-align: var(--frame-carousel-snap-align, start);
+}
+
+[frCarousel][data-align='center'] [frCarouselItem],
+[frCarousel][data-align='center'] [data-frame-carousel-clone],
+frame-carousel[data-align='center'] [frCarouselItem],
+frame-carousel[data-align='center'] [data-frame-carousel-clone] {
+  --frame-carousel-snap-align: center;
+}
+
+[frCarousel][data-align='end'] [frCarouselItem],
+[frCarousel][data-align='end'] [data-frame-carousel-clone],
+frame-carousel[data-align='end'] [frCarouselItem],
+frame-carousel[data-align='end'] [data-frame-carousel-clone] {
+  --frame-carousel-snap-align: end;
+}
+
+[frCarouselPrevious],
+[frCarouselNext] {
+  position: absolute;
+  z-index: 1;
+  inline-size: var(--frame-carousel-control-size);
+  block-size: var(--frame-carousel-control-size);
+  padding: 0;
+}
+
+[frCarousel][data-orientation='horizontal'] [frCarouselPrevious],
+frame-carousel[data-orientation='horizontal'] [frCarouselPrevious] {
+  inset-block-start: 50%;
+  inset-inline-start: var(--frame-carousel-control-offset);
+  transform: translateY(-50%);
+}
+
+[frCarousel][data-orientation='horizontal'] [frCarouselNext],
+frame-carousel[data-orientation='horizontal'] [frCarouselNext] {
+  inset-block-start: 50%;
+  inset-inline-end: var(--frame-carousel-control-offset);
+  transform: translateY(-50%);
+}
+
+[frCarousel][data-orientation='vertical'] [frCarouselPrevious],
+frame-carousel[data-orientation='vertical'] [frCarouselPrevious] {
+  inset-block-start: var(--frame-carousel-control-offset);
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+[frCarousel][data-orientation='vertical'] [frCarouselNext],
+frame-carousel[data-orientation='vertical'] [frCarouselNext] {
+  inset-block-end: var(--frame-carousel-control-offset);
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}

package/checkbox/src/styles/_vars.css

@@ -0,0 +1,22 @@
+:root {
+    --frame-checkbox-root-size: 1rem;
+    --frame-checkbox-root-bg: var(--frame-surface);
+    --frame-checkbox-root-border: var(--frame-border);
+    --frame-checkbox-root-color: var(--frame-primary-foreground);
+    --frame-checkbox-root-radius: var(--frame-radius-sm);
+    --frame-checkbox-root-hover-bg: var(--frame-checkbox-root-bg);
+    --frame-checkbox-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
+    --frame-checkbox-root-checked-bg: var(--frame-primary);
+    --frame-checkbox-root-checked-border: var(--frame-primary);
+    --frame-checkbox-root-checked-color: var(--frame-primary-foreground);
+    --frame-checkbox-root-ring-color: var(--frame-ring);
+    --frame-checkbox-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-checkbox-root-ring-color) 35%, transparent);
+    --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-indicator-size: 0.5rem;
+    --frame-checkbox-indeterminate-width: 0.5rem;
+    --frame-checkbox-indeterminate-height: 0.125rem;
+    --frame-checkbox-field-gap: 0.75rem;
+    --frame-checkbox-label-color: var(--frame-foreground);
+    --frame-checkbox-label-disabled-color: var(--frame-muted-foreground);
+}

package/checkbox/src/styles/checkbox.css

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

package/collapsible/src/styles/_vars.css

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

package/collapsible/src/styles/collapsible.css

@@ -0,0 +1,42 @@
+@import './_vars.css';
+
+[frCollapsible],
+frame-collapsible {
+  display: block;
+}
+
+[frCollapsibleTrigger] {
+  gap: var(--frame-collapsible-trigger-gap, 0.5rem);
+  color: var(--frame-collapsible-trigger-color, var(--frame-foreground));
+}
+
+[frCollapsibleTrigger]:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-collapsible-trigger-disabled-opacity, 0.55);
+}
+
+[frCollapsibleContent] {
+  color: var(--frame-collapsible-content-color, var(--frame-muted-foreground));
+  font-size: var(--frame-collapsible-content-font-size, 0.875rem);
+  line-height: var(--frame-collapsible-content-line-height, 1.6);
+  overflow: clip;
+  padding-block-start: 0;
+  transition:
+    height var(--frame-collapsible-content-transition-duration, 220ms)
+      var(--frame-collapsible-content-transition-timing, ease),
+    opacity var(--frame-collapsible-content-transition-duration, 220ms)
+      var(--frame-collapsible-content-transition-timing, ease),
+    padding-block-start var(--frame-collapsible-content-transition-duration, 220ms)
+      var(--frame-collapsible-content-transition-timing, ease);
+  will-change: height, opacity;
+}
+
+[frCollapsibleContent][data-state='closed'] {
+  opacity: var(--frame-collapsible-content-opacity-closed, 0);
+  padding-block-start: 0;
+}
+
+[frCollapsibleContent][data-state='open'] {
+  opacity: var(--frame-collapsible-content-opacity-open, 1);
+  padding-block-start: var(--frame-collapsible-content-padding-block-start, 0.75rem);
+}

package/combobox/src/styles/_vars.css

@@ -0,0 +1,60 @@
+:root {
+  --frame-combobox-control-height: 2.5rem;
+  --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-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;
+  --frame-combobox-control-focus-border: color-mix(in srgb, var(--frame-ring) 70%, var(--frame-border));
+  --frame-combobox-control-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 22%, transparent);
+  --frame-combobox-control-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-combobox-control-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
+  --frame-combobox-control-transition-duration: 150ms;
+  --frame-combobox-clear-offset: 0.375rem;
+  --frame-combobox-panel-max-height: min(18rem, 50vh);
+  --frame-combobox-panel-radius: var(--frame-radius-md);
+  --frame-combobox-panel-bg: var(--frame-surface);
+  --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-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-item-font-size: 0.875rem;
+  --frame-combobox-item-padding: 0.375rem 0.5rem 0.375rem 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-separator-bg: var(--frame-border);
+  --frame-combobox-chip-gap: 0.25rem;
+  --frame-combobox-chip-height: 1.375rem;
+  --frame-combobox-chip-radius: 999px;
+  --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-remove-size: 1rem;
+  --frame-combobox-chip-remove-radius: 999px;
+  --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-input-min-width: 8rem;
+  --frame-combobox-chips-input-padding: 0.25rem;
+  --frame-combobox-error-color: var(--frame-destructive);
+  --frame-combobox-error-font-size: 0.8125rem;
+}