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

package/calendar/src/styles/calendar.css

@@ -1,226 +1,247 @@
-@import './_vars.css';
-
-.frame-calendar {
-  display: inline-grid;
-  gap: var(--frame-calendar-gap);
-  width: fit-content;
-  max-width: 100%;
-  padding: var(--frame-calendar-padding);
-  border: 1px solid var(--frame-calendar-border);
-  border-radius: var(--frame-calendar-radius);
-  background: var(--frame-calendar-bg);
-  color: var(--frame-calendar-color);
-  box-sizing: border-box;
-  font-size: 0.875rem;
-}
-
-.frame-calendar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.frame-calendar__caption,
-.frame-calendar__month-caption {
-  color: var(--frame-calendar-color);
-  font-weight: 600;
-  text-align: center;
-}
-
-.frame-calendar__month-caption {
-  margin: 0 0 0.75rem;
-  font-size: 0.875rem;
-}
-
-.frame-calendar__caption-controls {
-  display: flex;
-  min-width: 0;
-  flex: 1 1 auto;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.frame-calendar__select {
-  min-height: var(--frame-calendar-select-height);
-  border: 1px solid var(--frame-calendar-select-border);
-  border-radius: var(--frame-calendar-select-radius);
-  background: var(--frame-calendar-select-bg);
-  color: inherit;
-  font: inherit;
-  font-size: 0.8125rem;
-  padding-inline: 0.5rem;
-}
-
-.frame-calendar__select:focus-visible,
-.frame-calendar__nav-button:focus-visible,
-.frame-calendar__day:focus-visible {
-  outline: none;
-  box-shadow: var(--frame-calendar-focus-shadow);
-}
-
-.frame-calendar__nav-button {
-  display: inline-flex;
-  inline-size: var(--frame-calendar-nav-size);
-  block-size: var(--frame-calendar-nav-size);
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--frame-calendar-nav-radius);
-  background: transparent;
-  color: var(--frame-calendar-muted-color);
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.25rem;
-  line-height: 1;
-  transition:
-    background-color var(--frame-calendar-transition-duration) ease,
-    color var(--frame-calendar-transition-duration) ease;
-}
-
-.frame-calendar__nav-button:hover:not(:disabled) {
-  background: var(--frame-calendar-nav-hover-bg);
-  color: var(--frame-calendar-color);
-}
-
-.frame-calendar__nav-button:disabled,
-.frame-calendar__select:disabled {
-  cursor: not-allowed;
-  opacity: var(--frame-calendar-day-disabled-opacity);
-}
-
-.frame-calendar__months {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--frame-calendar-gap);
-}
-
-.frame-calendar__month {
-  min-width: 0;
-}
-
-.frame-calendar__table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-.frame-calendar__weekday,
-.frame-calendar__week-number-header,
-.frame-calendar__week-number {
-  inline-size: var(--frame-calendar-cell-size);
-  block-size: 1.75rem;
-  color: var(--frame-calendar-muted-color);
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-}
-
-.frame-calendar__week-number {
-  font-variant-numeric: tabular-nums;
-}
-
-.frame-calendar__cell {
-  position: relative;
-  padding-block: 0.125rem;
-  padding-inline: 0;
-  text-align: center;
-}
-
-.frame-calendar__day {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  inline-size: var(--frame-calendar-cell-size);
-  block-size: var(--frame-calendar-cell-size);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: var(--frame-calendar-cell-radius);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-  transition:
-    background-color var(--frame-calendar-transition-duration) ease,
-    border-color var(--frame-calendar-transition-duration) ease,
-    color var(--frame-calendar-transition-duration) ease,
-    opacity var(--frame-calendar-transition-duration) ease;
-}
-
-.frame-calendar__day:hover:not(:disabled) {
-  background: var(--frame-calendar-day-hover-bg);
-  color: var(--frame-calendar-day-hover-color);
-}
-
-.frame-calendar__cell[data-outside] .frame-calendar__day {
-  color: var(--frame-calendar-muted-color);
-}
-
-.frame-calendar__cell[data-today] .frame-calendar__day {
-  border-color: var(--frame-calendar-day-today-border);
-}
-
-.frame-calendar__cell[data-selected] .frame-calendar__day {
-  background: var(--frame-calendar-day-selected-bg);
-  color: var(--frame-calendar-day-selected-color);
-}
-
-.frame-calendar__cell[data-range-middle]::before,
-.frame-calendar__cell[data-range-start]::before,
-.frame-calendar__cell[data-range-end]::before {
-  content: '';
-  position: absolute;
-  inset-block: 0.125rem;
-  inset-inline: 0;
-  background: var(--frame-calendar-day-range-bg);
-}
-
-.frame-calendar__cell[data-range-middle] .frame-calendar__day {
-  background: transparent;
-  color: var(--frame-calendar-color);
-}
-
-.frame-calendar__cell[data-range-start]::before {
-  inset-inline-start: 50%;
-}
-
-.frame-calendar__cell[data-range-end]::before {
-  inset-inline-end: 50%;
-}
-
-.frame-calendar__cell[data-range-start][data-range-end]::before {
-  display: none;
-}
-
-.frame-calendar__cell[data-range-start] .frame-calendar__day,
-.frame-calendar__cell[data-range-end] .frame-calendar__day {
-  box-shadow: 0 0 0 2px var(--frame-calendar-day-range-outline);
-}
-
-.frame-calendar__cell[data-disabled-date] .frame-calendar__day-number {
-  text-decoration: line-through;
-  text-decoration-color: var(--frame-calendar-day-disabled-date-decoration);
-}
-
-.frame-calendar__day:disabled {
-  cursor: not-allowed;
-  opacity: var(--frame-calendar-day-disabled-opacity);
-}
-
-.frame-calendar__day-number {
-  font-weight: 500;
-}
-
-.frame-calendar__day-meta {
-  margin-top: 0.25rem;
-  color: currentColor;
-  font-size: 0.625rem;
-  opacity: 0.72;
-}
-
-.frame-calendar[data-disabled] {
-  opacity: 0.72;
-}
+@import './_vars.css';
+
+.frame-calendar {
+  display: inline-grid;
+  gap: var(--frame-calendar-gap);
+  width: fit-content;
+  max-width: 100%;
+  padding: var(--frame-calendar-padding);
+  border: 1px solid var(--frame-calendar-border);
+  border-radius: var(--frame-calendar-radius);
+  background: var(--frame-calendar-bg);
+  color: var(--frame-calendar-color);
+  box-sizing: border-box;
+  font-size: 0.875rem;
+}
+
+.frame-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-block-end: 1px solid var(--frame-frame-line-muted, var(--frame-calendar-border));
+  padding-block-end: 0.75rem;
+}
+
+.frame-calendar__caption,
+.frame-calendar__month-caption {
+  color: var(--frame-calendar-color);
+  font-weight: 600;
+  text-align: center;
+}
+
+.frame-calendar__month-caption {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+}
+
+.frame-calendar__caption-controls {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.frame-calendar__select {
+  min-height: var(--frame-calendar-select-height);
+  border: 1px solid var(--frame-calendar-select-border);
+  border-radius: var(--frame-calendar-select-radius);
+  background: var(--frame-calendar-select-bg);
+  color: inherit;
+  font: inherit;
+  font-size: 0.8125rem;
+  padding-inline: 0.5rem;
+  transition:
+    border-color var(--frame-calendar-transition-duration) ease,
+    transform var(--frame-calendar-transition-duration) ease,
+    box-shadow var(--frame-calendar-transition-duration) ease;
+}
+
+.frame-calendar__select:focus-visible,
+.frame-calendar__nav-button:focus-visible,
+.frame-calendar__day:focus-visible {
+  outline: none;
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+  transform: translate(-1px, -1px);
+}
+
+.frame-calendar__nav-button {
+  display: inline-flex;
+  inline-size: var(--frame-calendar-nav-size);
+  block-size: var(--frame-calendar-nav-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--frame-frame-line-muted, var(--frame-calendar-border));
+  border-radius: var(--frame-calendar-nav-radius);
+  background: transparent;
+  color: var(--frame-calendar-muted-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition:
+    background-color var(--frame-calendar-transition-duration) ease,
+    border-color var(--frame-calendar-transition-duration) ease,
+    color var(--frame-calendar-transition-duration) ease,
+    transform var(--frame-calendar-transition-duration) ease,
+    box-shadow var(--frame-calendar-transition-duration) ease;
+}
+
+.frame-calendar__nav-button:hover:not(:disabled) {
+  background: var(--frame-calendar-nav-hover-bg);
+  border-color: var(--frame-frame-accent, var(--frame-primary));
+  color: var(--frame-calendar-color);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+.frame-calendar__nav-button:disabled,
+.frame-calendar__select:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-calendar-day-disabled-opacity);
+}
+
+.frame-calendar__months {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--frame-calendar-gap);
+}
+
+.frame-calendar__month {
+  min-width: 0;
+}
+
+.frame-calendar__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-block-start: 0.25rem;
+}
+
+.frame-calendar__weekday,
+.frame-calendar__week-number-header,
+.frame-calendar__week-number {
+  inline-size: var(--frame-calendar-cell-size);
+  block-size: 1.75rem;
+  color: var(--frame-calendar-muted-color);
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.frame-calendar__week-number {
+  font-variant-numeric: tabular-nums;
+}
+
+.frame-calendar__cell {
+  position: relative;
+  padding-block: 0.125rem;
+  padding-inline: 0;
+  text-align: center;
+}
+
+.frame-calendar__day {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  inline-size: var(--frame-calendar-cell-size);
+  block-size: var(--frame-calendar-cell-size);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--frame-calendar-border) 42%, transparent);
+  border-radius: var(--frame-calendar-cell-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  transition:
+    background-color var(--frame-calendar-transition-duration) ease,
+    border-color var(--frame-calendar-transition-duration) ease,
+    color var(--frame-calendar-transition-duration) ease,
+    opacity var(--frame-calendar-transition-duration) ease,
+    transform var(--frame-calendar-transition-duration) ease,
+    box-shadow var(--frame-calendar-transition-duration) ease;
+}
+
+.frame-calendar__day:hover:not(:disabled) {
+  background: var(--frame-calendar-day-hover-bg);
+  border-color: var(--frame-frame-accent, var(--frame-primary));
+  color: var(--frame-calendar-day-hover-color);
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
+}
+
+.frame-calendar__cell[data-outside] .frame-calendar__day {
+  color: var(--frame-calendar-muted-color);
+}
+
+.frame-calendar__cell[data-today] .frame-calendar__day {
+  border-color: var(--frame-calendar-day-today-border);
+}
+
+.frame-calendar__cell[data-selected] .frame-calendar__day {
+  border-color: var(--frame-frame-accent, var(--frame-primary));
+  background: var(--frame-calendar-day-selected-bg);
+  color: var(--frame-calendar-day-selected-color);
+}
+
+.frame-calendar__cell[data-range-middle]::before,
+.frame-calendar__cell[data-range-start]::before,
+.frame-calendar__cell[data-range-end]::before {
+  content: '';
+  position: absolute;
+  inset-block: 0.125rem;
+  inset-inline: 0;
+  background: var(--frame-calendar-day-range-bg);
+}
+
+.frame-calendar__cell[data-range-middle] .frame-calendar__day {
+  background: transparent;
+  color: var(--frame-calendar-color);
+}
+
+.frame-calendar__cell[data-range-start]::before {
+  inset-inline-start: 50%;
+}
+
+.frame-calendar__cell[data-range-end]::before {
+  inset-inline-end: 50%;
+}
+
+.frame-calendar__cell[data-range-start][data-range-end]::before {
+  display: none;
+}
+
+.frame-calendar__cell[data-range-start] .frame-calendar__day,
+.frame-calendar__cell[data-range-end] .frame-calendar__day {
+  box-shadow: 0 0 0 2px var(--frame-calendar-day-range-outline);
+}
+
+.frame-calendar__cell[data-disabled-date] .frame-calendar__day-number {
+  text-decoration: line-through;
+  text-decoration-color: var(--frame-calendar-day-disabled-date-decoration);
+}
+
+.frame-calendar__day:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-calendar-day-disabled-opacity);
+}
+
+.frame-calendar__day-number {
+  font-weight: 500;
+}
+
+.frame-calendar__day-meta {
+  margin-top: 0.25rem;
+  color: currentColor;
+  font-size: 0.625rem;
+  opacity: 0.72;
+}
+
+.frame-calendar[data-disabled] {
+  opacity: 0.72;
+}

package/card/src/styles/_vars.css

@@ -1,17 +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);
-}
+: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-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/checkbox/src/styles/_vars.css

@@ -1,22 +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);
-}
+: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: 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-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/collapsible/src/styles/collapsible.css

@@ -1,42 +1,55 @@
-@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);
-}
+@import './_vars.css';
+
+[frCollapsible],
+frame-collapsible {
+  display: block;
+  background: transparent;
+}
+
+[frCollapsibleTrigger] {
+  gap: var(--frame-collapsible-trigger-gap, 0.5rem);
+  color: var(--frame-collapsible-trigger-color, var(--frame-foreground));
+  transition:
+    color 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease;
+}
+
+[frCollapsibleTrigger]:where(:not(:disabled, [data-disabled])):hover,
+[frCollapsibleTrigger]:focus-visible,
+[frCollapsibleTrigger][data-state='open'] {
+  outline: none;
+  transform: translateX(0.25rem);
+  box-shadow: none;
+}
+
+[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);
+}