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

package/popover/src/styles/popover.css

@@ -0,0 +1,101 @@
+@import './_vars.css';
+
+frame-popover {
+  display: inline-block;
+}
+
+.frame-popover__anchor {
+  display: inline-flex;
+}
+
+[frPopoverTrigger] {
+  cursor: pointer;
+}
+
+.frame-popover__backdrop {
+  background: transparent;
+}
+
+.frame-popover__content {
+  display: grid;
+  gap: var(--frame-popover-content-gap);
+  width: var(--frame-popover-content-width);
+  max-width: min(var(--frame-popover-content-width), calc(100vw - 2rem));
+  border: 1px solid var(--frame-popover-content-border);
+  border-radius: var(--frame-popover-content-radius);
+  background: var(--frame-popover-content-bg);
+  box-shadow: var(--frame-popover-content-shadow);
+  color: var(--frame-popover-content-color);
+  padding: var(--frame-popover-content-padding);
+  outline: none;
+  transform-origin: var(--frame-popover-transform-origin, center);
+  animation: frame-popover-in var(--frame-popover-motion-duration) var(--frame-popover-motion-easing);
+}
+
+.frame-popover-overlay--top .frame-popover__content {
+  --frame-popover-transform-origin: bottom;
+}
+
+.frame-popover-overlay--right .frame-popover__content {
+  --frame-popover-transform-origin: left;
+}
+
+.frame-popover-overlay--bottom .frame-popover__content {
+  --frame-popover-transform-origin: top;
+}
+
+.frame-popover-overlay--left .frame-popover__content {
+  --frame-popover-transform-origin: right;
+}
+
+[frPopoverHeader] {
+  display: grid;
+  gap: var(--frame-popover-header-gap);
+}
+
+[frPopoverTitle] {
+  margin: 0;
+  color: var(--frame-popover-title-color);
+  font-size: var(--frame-popover-title-font-size);
+  font-weight: var(--frame-popover-title-font-weight);
+  line-height: 1.2;
+}
+
+[frPopoverDescription] {
+  margin: 0;
+  color: var(--frame-popover-description-color);
+  font-size: var(--frame-popover-description-font-size);
+  line-height: 1.45;
+}
+
+[frPopoverBody] {
+  display: grid;
+  gap: var(--frame-popover-body-gap);
+}
+
+[frPopoverFooter] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--frame-popover-footer-gap);
+}
+
+[frPopoverClose] {
+  border-radius: var(--frame-popover-close-radius);
+}
+
+[frPopoverClose]:where(:hover, :focus-visible) {
+  background: var(--frame-popover-close-hover-bg);
+}
+
+@keyframes frame-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--frame-popover-motion-distance)) scale(var(--frame-popover-motion-scale));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/progress/src/styles/_vars.css

@@ -0,0 +1,15 @@
+:root {
+  --frame-progress-height: 0.5rem;
+  --frame-progress-width: 100%;
+  --frame-progress-radius: 999px;
+  --frame-progress-bg: var(--frame-accent);
+  --frame-progress-border: transparent;
+  --frame-progress-shadow: none;
+  --frame-progress-indicator-bg: var(--frame-primary);
+  --frame-progress-indicator-radius: inherit;
+  --frame-progress-indicator-shadow: none;
+  --frame-progress-transition-duration: 300ms;
+  --frame-progress-transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --frame-progress-indeterminate-size: 35%;
+  --frame-progress-indeterminate-duration: 1.25s;
+}

package/progress/src/styles/progress.css

@@ -0,0 +1,64 @@
+@import './_vars.css';
+
+[frProgress],
+frame-progress {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  inline-size: var(--frame-progress-width);
+  block-size: var(--frame-progress-height);
+  border: 1px solid var(--frame-progress-border);
+  border-radius: var(--frame-progress-radius);
+  background: var(--frame-progress-bg);
+  box-shadow: var(--frame-progress-shadow);
+}
+
+[frProgressIndicator],
+frame-progress-indicator {
+  display: block;
+  inline-size: var(--frame-progress-percent, 0%);
+  block-size: 100%;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  border-radius: var(--frame-progress-indicator-radius);
+  background: var(--frame-progress-indicator-bg);
+  box-shadow: var(--frame-progress-indicator-shadow);
+  transition:
+    inline-size var(--frame-progress-transition-duration) var(--frame-progress-transition-easing),
+    background-color var(--frame-progress-transition-duration) ease;
+}
+
+[frProgress][data-state='complete'] [frProgressIndicator],
+frame-progress[data-state='complete'] frame-progress-indicator {
+  inline-size: 100%;
+}
+
+[frProgress][data-state='indeterminate'] [frProgressIndicator],
+frame-progress[data-state='indeterminate'] frame-progress-indicator {
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--frame-progress-indeterminate-size);
+  animation: frame-progress-indeterminate var(--frame-progress-indeterminate-duration) infinite linear;
+}
+
+@keyframes frame-progress-indeterminate {
+  from {
+    inset-inline-start: calc(-1 * var(--frame-progress-indeterminate-size));
+  }
+
+  to {
+    inset-inline-start: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frProgressIndicator],
+  frame-progress-indicator {
+    transition-duration: 1ms;
+  }
+
+  [frProgress][data-state='indeterminate'] [frProgressIndicator],
+  frame-progress[data-state='indeterminate'] frame-progress-indicator {
+    animation-duration: 3s;
+  }
+}

package/radio-group/src/styles/_vars.css

@@ -0,0 +1,29 @@
+:root {
+  --frame-radio-group-gap: 0.75rem;
+  --frame-radio-group-horizontal-gap: 1rem;
+  --frame-radio-group-card-gap: 0.75rem;
+  --frame-radio-group-card-padding: 1rem;
+  --frame-radio-group-card-radius: var(--frame-radius-lg);
+  --frame-radio-group-card-bg: var(--frame-surface);
+  --frame-radio-group-card-border: var(--frame-border);
+  --frame-radio-group-card-hover-border: color-mix(in srgb, var(--frame-border) 70%, var(--frame-foreground));
+  --frame-radio-group-card-checked-border: var(--frame-primary);
+  --frame-radio-group-card-checked-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-primary) 14%, transparent);
+  --frame-radio-group-card-disabled-opacity: 0.55;
+  --frame-radio-group-card-meta-color: var(--frame-muted-foreground);
+  --frame-radio-group-card-meta-font-size: 0.875rem;
+  --frame-radio-group-card-meta-font-weight: 600;
+  --frame-radio-group-item-size: 1rem;
+  --frame-radio-group-item-bg: var(--frame-surface);
+  --frame-radio-group-item-border: var(--frame-border);
+  --frame-radio-group-item-color: var(--frame-primary);
+  --frame-radio-group-item-hover-border: color-mix(in srgb, var(--frame-border) 72%, var(--frame-foreground));
+  --frame-radio-group-item-checked-border: var(--frame-primary);
+  --frame-radio-group-item-checked-bg: var(--frame-surface);
+  --frame-radio-group-item-dot-size: 0.5rem;
+  --frame-radio-group-item-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 32%, transparent);
+  --frame-radio-group-item-invalid-border: var(--frame-destructive);
+  --frame-radio-group-item-disabled-opacity: 0.5;
+  --frame-radio-group-transition-duration: 150ms;
+  --frame-radio-group-transition-easing: ease;
+}

package/radio-group/src/styles/radio-group.css

@@ -0,0 +1,137 @@
+@import './_vars.css';
+
+[frRadioGroup],
+frame-radio-group {
+  display: grid;
+  gap: var(--frame-radio-group-gap);
+  min-width: 0;
+}
+
+[frRadioGroup][data-orientation='horizontal'],
+frame-radio-group[data-orientation='horizontal'] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--frame-radio-group-horizontal-gap);
+}
+
+[frRadioGroup][data-disabled],
+frame-radio-group[data-disabled] {
+  cursor: not-allowed;
+}
+
+[frRadioGroup][data-variant='cards'],
+frame-radio-group[data-variant='cards'] {
+  gap: var(--frame-radio-group-card-gap);
+}
+
+[frRadioGroupItem] {
+  appearance: none;
+  -webkit-appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: 0 0 auto;
+  inline-size: var(--frame-radio-group-item-size);
+  block-size: var(--frame-radio-group-item-size);
+  margin: 0;
+  border: 1px solid var(--frame-radio-group-item-border);
+  border-radius: 999px;
+  background: var(--frame-radio-group-item-bg);
+  color: var(--frame-radio-group-item-color);
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  transition:
+    background-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
+}
+
+[frRadioGroupItem]::before {
+  content: '';
+  inline-size: var(--frame-radio-group-item-dot-size);
+  block-size: var(--frame-radio-group-item-dot-size);
+  border-radius: 999px;
+  background: currentColor;
+  transform: scale(0);
+  transition: transform 120ms ease;
+}
+
+[frRadioGroupItem]:where(:not(:disabled)):hover {
+  border-color: var(--frame-radio-group-item-hover-border);
+}
+
+[frRadioGroupItem]:focus-visible {
+  box-shadow: var(--frame-radio-group-item-focus-shadow);
+}
+
+[frRadioGroupItem]:checked {
+  border-color: var(--frame-radio-group-item-checked-border);
+  background: var(--frame-radio-group-item-checked-bg);
+}
+
+[frRadioGroupItem]:checked::before {
+  transform: scale(1);
+}
+
+[frRadioGroupItem]:disabled {
+  cursor: not-allowed;
+  opacity: var(--frame-radio-group-item-disabled-opacity);
+}
+
+[frRadioGroupField] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-field-gap);
+  min-width: 0;
+}
+
+[frRadioGroupItem][aria-invalid='true'],
+[frRadioGroupItem].ng-invalid.ng-touched,
+[frRadioGroupItem].ng-invalid.ng-dirty {
+  border-color: var(--frame-radio-group-item-invalid-border);
+}
+
+[frRadioGroupCard] {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-radio-group-card-gap);
+  min-width: 0;
+  padding: var(--frame-radio-group-card-padding);
+  border: 1px solid var(--frame-radio-group-card-border);
+  border-radius: var(--frame-radio-group-card-radius);
+  background: var(--frame-radio-group-card-bg);
+  cursor: pointer;
+  transition:
+    border-color var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    box-shadow var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing),
+    opacity var(--frame-radio-group-transition-duration) var(--frame-radio-group-transition-easing);
+}
+
+[frRadioGroupCard]:has([frRadioGroupCardMeta]) {
+  [frFieldContent] {
+    flex-grow: 1;
+  }
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:where(:not(:disabled)):hover) {
+  border-color: var(--frame-radio-group-card-hover-border);
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:checked) {
+  border-color: var(--frame-radio-group-card-checked-border);
+  box-shadow: var(--frame-radio-group-card-checked-shadow);
+}
+
+[frRadioGroupCard]:has([frRadioGroupItem]:disabled) {
+  cursor: not-allowed;
+  opacity: var(--frame-radio-group-card-disabled-opacity);
+}
+
+[frRadioGroupCardMeta] {
+  color: var(--frame-radio-group-card-meta-color);
+  font-size: var(--frame-radio-group-card-meta-font-size);
+  font-weight: var(--frame-radio-group-card-meta-font-weight);
+  white-space: nowrap;
+}

package/resizable/src/styles/_vars.css

@@ -0,0 +1,20 @@
+:root {
+  --frame-resizable-border: var(--frame-border);
+  --frame-resizable-radius: var(--frame-radius-lg);
+  --frame-resizable-bg: var(--frame-surface);
+  --frame-resizable-color: var(--frame-foreground);
+  --frame-resizable-panel-padding: 1rem;
+  --frame-resizable-panel-min-size: 0;
+  --frame-resizable-handle-size: 0.625rem;
+  --frame-resizable-handle-hit-size: 1rem;
+  --frame-resizable-handle-bg: transparent;
+  --frame-resizable-handle-hover-bg: color-mix(in srgb, var(--frame-primary) 16%, transparent);
+  --frame-resizable-handle-active-bg: color-mix(in srgb, var(--frame-primary) 24%, transparent);
+  --frame-resizable-handle-border: var(--frame-border);
+  --frame-resizable-handle-indicator-size: 2rem;
+  --frame-resizable-handle-indicator-thickness: 0.25rem;
+  --frame-resizable-handle-indicator-bg: var(--frame-border);
+  --frame-resizable-handle-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
+  --frame-resizable-transition-duration: 150ms;
+  --frame-resizable-transition-easing: ease;
+}

package/resizable/src/styles/resizable.css

@@ -0,0 +1,130 @@
+@import './_vars.css';
+
+[frResizablePanelGroup],
+frame-resizable-panel-group {
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  min-inline-size: var(--frame-resizable-panel-min-size);
+  min-block-size: var(--frame-resizable-panel-min-size);
+  border: 1px solid var(--frame-resizable-border);
+  border-radius: var(--frame-resizable-radius);
+  background: var(--frame-resizable-bg);
+  color: var(--frame-resizable-color);
+}
+
+[frResizablePanelGroup][data-orientation='vertical'],
+frame-resizable-panel-group[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+[frResizablePanel],
+frame-resizable-panel {
+  box-sizing: border-box;
+  position: relative;
+  overflow: auto;
+  min-inline-size: var(--frame-resizable-panel-min-size);
+  min-block-size: var(--frame-resizable-panel-min-size);
+}
+
+[frResizablePanel]:not([data-no-padding]),
+frame-resizable-panel:not([data-no-padding]) {
+  padding: var(--frame-resizable-panel-padding);
+}
+
+[frResizablePanel][data-collapsed],
+frame-resizable-panel[data-collapsed] {
+  overflow: hidden;
+}
+
+[frResizablePanel][data-collapsed]:not([data-no-padding]),
+frame-resizable-panel[data-collapsed]:not([data-no-padding]) {
+  padding: 0;
+}
+
+[frResizableHandle],
+frame-resizable-handle {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: 0 0 var(--frame-resizable-handle-size);
+  align-self: stretch;
+  border: 0;
+  background: var(--frame-resizable-handle-bg);
+  cursor: col-resize;
+  outline: none;
+  touch-action: none;
+  transition:
+    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
+    box-shadow var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
+}
+
+[frResizableHandle]::before,
+frame-resizable-handle::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--frame-resizable-handle-hit-size);
+}
+
+[frResizableHandle][data-orientation='vertical'],
+frame-resizable-handle[data-orientation='vertical'] {
+  flex-basis: var(--frame-resizable-handle-size);
+  inline-size: auto;
+  block-size: var(--frame-resizable-handle-size);
+  cursor: row-resize;
+}
+
+[frResizableHandle][data-orientation='vertical']::before,
+frame-resizable-handle[data-orientation='vertical']::before {
+  inset-inline: 0;
+  inset-block: auto;
+  block-size: var(--frame-resizable-handle-hit-size);
+  inline-size: auto;
+}
+
+[frResizableHandle]::after,
+frame-resizable-handle::after {
+  content: '';
+  display: block;
+  inline-size: var(--frame-resizable-handle-indicator-thickness);
+  block-size: var(--frame-resizable-handle-indicator-size);
+  border-radius: 999px;
+  background: var(--frame-resizable-handle-indicator-bg);
+  opacity: 0;
+  transition:
+    opacity var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing),
+    background-color var(--frame-resizable-transition-duration) var(--frame-resizable-transition-easing);
+}
+
+[frResizableHandle][data-orientation='vertical']::after,
+frame-resizable-handle[data-orientation='vertical']::after {
+  inline-size: var(--frame-resizable-handle-indicator-size);
+  block-size: var(--frame-resizable-handle-indicator-thickness);
+}
+
+[frResizableHandle][data-handle]::after,
+frame-resizable-handle[data-handle]::after {
+  opacity: 1;
+}
+
+[frResizableHandle]:where(:hover, [data-dragging]),
+frame-resizable-handle:where(:hover, [data-dragging]) {
+  background: var(--frame-resizable-handle-hover-bg);
+}
+
+[frResizableHandle][data-dragging],
+frame-resizable-handle[data-dragging] {
+  background: var(--frame-resizable-handle-active-bg);
+}
+
+[frResizableHandle]:focus-visible,
+frame-resizable-handle:focus-visible {
+  box-shadow: var(--frame-resizable-handle-focus-shadow);
+}
+
+[frResizableHandle][data-disabled],
+frame-resizable-handle[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/select/src/styles/_vars.css

@@ -0,0 +1,28 @@
+:root {
+  --frame-select-trigger-height: 2.5rem;
+  --frame-select-trigger-min-width: 12rem;
+  --frame-select-trigger-gap: 0.5rem;
+  --frame-select-trigger-radius: var(--frame-radius-md);
+  --frame-select-trigger-padding-inline: 1rem;
+  --frame-select-trigger-font-size: 0.875rem;
+  --frame-select-trigger-font-weight: 600;
+  --frame-select-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 28%, transparent);
+  --frame-select-trigger-invalid-border: color-mix(in srgb, var(--frame-destructive) 65%, var(--frame-border));
+  --frame-select-trigger-invalid-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-destructive) 14%, transparent);
+  --frame-select-trigger-disabled-opacity: 0.55;
+  --frame-select-trigger-hover-filter: brightness(0.98);
+  --frame-select-trigger-active-filter: brightness(0.96);
+  --frame-select-trigger-transition-duration: 150ms;
+  --frame-select-content-min-width: 12rem;
+  --frame-select-content-max-height: min(18rem, 50vh);
+  --frame-select-content-popper-shadow: 0 16px 32px -18px rgb(0 0 0 / 0.28);
+  --frame-select-group-gap: 0.125rem;
+  --frame-select-item-indicator-size: 1rem;
+  --frame-select-item-indicator-offset: 0.625rem;
+  --frame-select-item-padding-start: 2rem;
+  --frame-select-item-padding-end: 2rem;
+  --frame-select-item-padding-inline: 0.75rem;
+  --frame-select-item-indicator-font-size: 0.875rem;
+  --frame-select-error-color: var(--frame-destructive);
+  --frame-select-error-font-size: 0.8125rem;
+}

package/select/src/styles/select-content.css

@@ -0,0 +1,19 @@
+.frame-select__content,
+[frSelectPanel],
+frame-select-panel {
+  min-width: var(--frame-select-content-min-width);
+  max-height: var(--frame-select-content-max-height);
+  overflow: auto;
+}
+
+.frame-select__content[data-position='item-aligned'],
+[frSelectPanel][data-position='item-aligned'],
+frame-select-panel[data-position='item-aligned'] {
+  min-width: var(--frame-select-content-min-width);
+}
+
+.frame-select__content[data-position='popper'],
+[frSelectPanel][data-position='popper'],
+frame-select-panel[data-position='popper'] {
+  box-shadow: var(--frame-select-content-popper-shadow);
+}

package/select/src/styles/select-feedback.css

@@ -0,0 +1,6 @@
+.frame-select__error {
+  margin: 0;
+  color: var(--frame-select-error-color);
+  font-size: var(--frame-select-error-font-size);
+  line-height: 1.4;
+}

package/select/src/styles/select-item.css

@@ -0,0 +1,69 @@
+.frame-select__group,
+[frSelectGroup],
+frame-select-group {
+  display: grid;
+  gap: var(--frame-select-group-gap);
+}
+
+.frame-select__item {
+  position: relative;
+  padding-inline-start: var(--frame-select-item-padding-start);
+}
+
+.frame-select__item[data-indicator-position='end'] {
+  padding-inline-start: var(--frame-select-item-padding-inline);
+  padding-inline-end: var(--frame-select-item-padding-end);
+}
+
+.frame-select__item::before,
+.frame-select__item::after {
+  position: absolute;
+  inset-block-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-select-item-indicator-size);
+  block-size: var(--frame-select-item-indicator-size);
+  color: currentColor;
+  font-size: var(--frame-select-item-indicator-font-size);
+  font-weight: 700;
+  line-height: 1;
+  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='start']::before {
+  content: '✓';
+  inset-inline-start: var(--frame-select-item-indicator-offset);
+  opacity: 1;
+}
+
+.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='end']::after {
+  content: '✓';
+  inset-inline-end: var(--frame-select-item-indicator-offset);
+  opacity: 1;
+}
+
+.frame-select__item-indicator {
+  position: absolute;
+  inset-block-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--frame-select-item-indicator-size);
+  height: var(--frame-select-item-indicator-size);
+  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.frame-select__item[data-indicator-position='start'] .frame-select__item-indicator {
+  inset-inline-start: var(--frame-select-item-indicator-offset);
+}
+
+.frame-select__item[data-indicator-position='end'] .frame-select__item-indicator {
+  inset-inline-end: var(--frame-select-item-indicator-offset);
+}
+
+.frame-select__item[data-state='checked'] .frame-select__item-indicator {
+  opacity: 1;
+}