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

package/input/src/styles/input.css

@@ -1,163 +1,197 @@
-@import './_vars.css';
-
-[frInputField],
-frame-input-field {
-  display: grid;
-  gap: var(--frame-input-field-gap);
-  width: 100%;
-}
-
-[frInputHeader],
-frame-input-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--frame-input-header-gap);
-}
-
-[frInputControl],
-frame-input-control {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-[frInputFieldGroup],
-frame-input-field-group {
-  display: grid;
-  gap: var(--frame-input-field-group-gap);
-}
-
-[frInputLabel],
-frame-input-label {
-  font-size: var(--frame-input-label-font-size);
-  font-weight: var(--frame-input-label-font-weight);
-  line-height: 1.3;
-}
-
-[frInputDescription],
-frame-input-description {
-  color: var(--frame-input-description-color);
-  font-size: var(--frame-input-description-font-size);
-  line-height: 1.45;
-  margin: 0;
-}
-
-[frInputError],
-frame-input-error {
-  color: var(--frame-input-error-color);
-  font-size: var(--frame-input-error-font-size);
-  line-height: 1.45;
-  margin: 0;
-}
-
-[frInput] {
-  box-sizing: border-box;
-  appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  min-width: 0;
-  height: var(--frame-input-root-height);
-  border: 1px solid var(--frame-input-root-border);
-  border-radius: var(--frame-input-root-radius);
-  background: var(--frame-input-root-bg);
-  color: var(--frame-input-root-color);
-  box-shadow: none;
-  cursor: text;
-  font: inherit;
-  font-size: var(--frame-input-root-font-size);
-  line-height: 1.4;
-  margin: 0;
-  outline: none;
-  padding-block: 0;
-  padding-inline: var(--frame-input-root-padding-inline);
-  text-overflow: ellipsis;
-  transition:
-    background-color var(--frame-input-root-transition-duration) ease,
-    border-color var(--frame-input-root-transition-duration) ease,
-    box-shadow var(--frame-input-root-transition-duration) ease,
-    color var(--frame-input-root-transition-duration) ease,
-    opacity var(--frame-input-root-transition-duration) ease;
-}
-
-[frInput]::placeholder {
-  color: var(--frame-input-root-placeholder-color);
-}
-
-[frInput]:where(:not(:disabled)):hover {
-  border-color: var(--frame-input-root-hover-border);
-}
-
-[frInput]:focus-visible {
-  border-color: var(--frame-input-root-focus-border);
-  box-shadow: var(--frame-input-root-focus-shadow);
-}
-
-[frInput][aria-invalid='true'],
-[frInput].ng-invalid.ng-touched,
-[frInput].ng-invalid.ng-dirty {
-  border-color: var(--frame-input-root-invalid-border);
-  box-shadow: var(--frame-input-root-invalid-shadow);
-}
-
-[frInput]:disabled {
-  cursor: not-allowed;
-  background: var(--frame-input-root-disabled-bg);
-  border-color: var(--frame-input-root-disabled-border);
-  color: var(--frame-input-root-disabled-color);
-  opacity: var(--frame-input-root-disabled-opacity);
-}
-
-[frInput]:disabled::placeholder {
-  color: var(--frame-input-root-disabled-color);
-}
-
-[frInput]:read-only {
-  background: var(--frame-input-root-readonly-bg);
-}
-
-[frInput][type='file'] {
-  cursor: pointer;
-  padding-block: var(--frame-input-file-padding-block);
-}
-
-[frInput][type='file']::file-selector-button {
-  border: 1px solid var(--frame-border);
-  border-radius: var(--frame-input-file-button-radius);
-  background: var(--frame-input-file-button-bg);
-  color: var(--frame-foreground);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--frame-input-file-button-font-size);
-  font-weight: var(--frame-input-file-button-font-weight);
-  margin-inline-end: var(--frame-input-file-button-margin-inline-end);
-  padding: var(--frame-input-file-button-padding);
-  transition:
-    background-color var(--frame-input-file-button-transition-duration) ease,
-    border-color var(--frame-input-file-button-transition-duration) ease,
-    color var(--frame-input-file-button-transition-duration) ease;
-}
-
-[frInput][type='file']:where(:not(:disabled))::file-selector-button:hover {
-  background: var(--frame-input-file-button-hover-bg);
-  border-color: var(--frame-input-root-hover-border);
-}
-
-[frInputBadge],
-frame-input-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /*min-inline-size: 2.5rem;*/
-  padding-inline: var(--frame-input-badge-padding-inline);
-  block-size: var(--frame-input-badge-height);
-  border-radius: var(--frame-input-badge-radius);
-  border: 1px solid var(--frame-input-badge-border);
-  background: var(--frame-input-badge-bg);
-  color: var(--frame-input-badge-color);
-  font-size: var(--frame-input-badge-font-size);
-  font-weight: var(--frame-input-badge-font-weight);
-  line-height: 1;
-  white-space: nowrap;
-}
+@import './_vars.css';
+
+[frInputField],
+frame-input-field {
+  display: grid;
+  gap: var(--frame-input-field-gap);
+  width: 100%;
+}
+
+[frInputHeader],
+frame-input-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--frame-input-header-gap);
+}
+
+[frInputControl],
+frame-input-control {
+  --frame-input-frame-color: var(--frame-frame-line-muted);
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+[frInputControl]::before,
+frame-input-control::before {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: var(--frame-input-root-radius);
+  background:
+    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
+      left var(--frame-frame-tick-inset, 0.25rem) top var(--frame-frame-tick-inset, 0.25rem) /
+      var(--frame-frame-tick-size, 0.5rem) 1px no-repeat,
+    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
+      left var(--frame-frame-tick-inset, 0.25rem) top var(--frame-frame-tick-inset, 0.25rem) / 1px
+      var(--frame-frame-tick-size, 0.5rem) no-repeat,
+    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
+      right var(--frame-frame-tick-inset, 0.25rem) bottom var(--frame-frame-tick-inset, 0.25rem) /
+      var(--frame-frame-tick-size, 0.5rem) 1px no-repeat,
+    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
+      right var(--frame-frame-tick-inset, 0.25rem) bottom var(--frame-frame-tick-inset, 0.25rem) / 1px
+      var(--frame-frame-tick-size, 0.5rem) no-repeat;
+  pointer-events: none;
+  content: '';
+}
+
+[frInputControl]:focus-within,
+frame-input-control:focus-within {
+  --frame-input-frame-color: var(--frame-frame-accent);
+}
+
+[frInputFieldGroup],
+frame-input-field-group {
+  display: grid;
+  gap: var(--frame-input-field-group-gap);
+}
+
+[frInputLabel],
+frame-input-label {
+  font-size: var(--frame-input-label-font-size);
+  font-weight: var(--frame-input-label-font-weight);
+  line-height: 1.3;
+}
+
+[frInputDescription],
+frame-input-description {
+  color: var(--frame-input-description-color);
+  font-size: var(--frame-input-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frInputError],
+frame-input-error {
+  color: var(--frame-input-error-color);
+  font-size: var(--frame-input-error-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frInput] {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  min-width: 0;
+  height: var(--frame-input-root-height);
+  border: 1px solid var(--frame-input-root-border);
+  border-radius: var(--frame-input-root-radius);
+  background:
+    linear-gradient(var(--frame-input-root-bg), var(--frame-input-root-bg)) padding-box,
+    linear-gradient(135deg, color-mix(in srgb, var(--frame-frame-line-muted) 70%, transparent), transparent 42%)
+      border-box;
+  color: var(--frame-input-root-color);
+  box-shadow: none;
+  cursor: text;
+  font: inherit;
+  font-size: var(--frame-input-root-font-size);
+  line-height: 1.4;
+  margin: 0;
+  outline: none;
+  padding-block: 0;
+  padding-inline: var(--frame-input-root-padding-inline);
+  text-overflow: ellipsis;
+  transition:
+    background-color var(--frame-input-root-transition-duration) ease,
+    border-color var(--frame-input-root-transition-duration) ease,
+    box-shadow var(--frame-input-root-transition-duration) ease,
+    color var(--frame-input-root-transition-duration) ease,
+    opacity var(--frame-input-root-transition-duration) ease;
+}
+
+[frInput]::placeholder {
+  color: var(--frame-input-root-placeholder-color);
+}
+
+[frInput]:where(:not(:disabled)):hover {
+  border-color: var(--frame-input-root-hover-border);
+}
+
+[frInput]:focus-visible {
+  border-color: var(--frame-input-root-focus-border);
+  box-shadow: none;
+  outline: 1px solid var(--frame-ring);
+  outline-offset: 2px;
+}
+
+[frInput][aria-invalid='true'],
+[frInput].ng-invalid.ng-touched,
+[frInput].ng-invalid.ng-dirty {
+  border-color: var(--frame-input-root-invalid-border);
+  box-shadow: none;
+}
+
+[frInput]:disabled {
+  cursor: not-allowed;
+  background: var(--frame-input-root-disabled-bg);
+  border-color: var(--frame-input-root-disabled-border);
+  color: var(--frame-input-root-disabled-color);
+  opacity: var(--frame-input-root-disabled-opacity);
+}
+
+[frInput]:disabled::placeholder {
+  color: var(--frame-input-root-disabled-color);
+}
+
+[frInput]:read-only {
+  background: var(--frame-input-root-readonly-bg);
+}
+
+[frInput][type='file'] {
+  cursor: pointer;
+  padding-block: var(--frame-input-file-padding-block);
+}
+
+[frInput][type='file']::file-selector-button {
+  border: 1px solid var(--frame-border);
+  border-radius: var(--frame-input-file-button-radius);
+  background: var(--frame-input-file-button-bg);
+  color: var(--frame-foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-input-file-button-font-size);
+  font-weight: var(--frame-input-file-button-font-weight);
+  margin-inline-end: var(--frame-input-file-button-margin-inline-end);
+  padding: var(--frame-input-file-button-padding);
+  transition:
+    background-color var(--frame-input-file-button-transition-duration) ease,
+    border-color var(--frame-input-file-button-transition-duration) ease,
+    color var(--frame-input-file-button-transition-duration) ease;
+}
+
+[frInput][type='file']:where(:not(:disabled))::file-selector-button:hover {
+  background: var(--frame-input-file-button-hover-bg);
+  border-color: var(--frame-input-root-hover-border);
+}
+
+[frInputBadge],
+frame-input-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /*min-inline-size: 2.5rem;*/
+  padding-inline: var(--frame-input-badge-padding-inline);
+  block-size: var(--frame-input-badge-height);
+  border-radius: var(--frame-input-badge-radius);
+  border: 1px solid var(--frame-input-badge-border);
+  background: var(--frame-input-badge-bg);
+  color: var(--frame-input-badge-color);
+  font-size: var(--frame-input-badge-font-size);
+  font-weight: var(--frame-input-badge-font-weight);
+  line-height: 1;
+  white-space: nowrap;
+}

package/input-otp/src/styles/_vars.css

@@ -1,21 +1,21 @@
-:root {
-  --frame-input-otp-gap: 0.5rem;
-  --frame-input-otp-group-gap: 0;
-  --frame-input-otp-slot-size: 2.5rem;
-  --frame-input-otp-slot-radius: var(--frame-input-root-radius);
-  --frame-input-otp-slot-bg: var(--frame-input-root-bg);
-  --frame-input-otp-slot-color: var(--frame-input-root-color);
-  --frame-input-otp-slot-border: var(--frame-input-root-border);
-  --frame-input-otp-slot-font-size: 1rem;
-  --frame-input-otp-slot-font-weight: 500;
-  --frame-input-otp-slot-focus-border: var(--frame-input-root-focus-border);
-  --frame-input-otp-slot-focus-shadow: var(--frame-input-root-focus-shadow);
-  --frame-input-otp-slot-invalid-border: var(--frame-input-root-invalid-border);
-  --frame-input-otp-slot-invalid-shadow: var(--frame-input-root-invalid-shadow);
-  --frame-input-otp-slot-disabled-bg: var(--frame-input-root-disabled-bg);
-  --frame-input-otp-slot-disabled-color: var(--frame-input-root-disabled-color);
-  --frame-input-otp-slot-disabled-opacity: var(--frame-input-root-disabled-opacity);
-  --frame-input-otp-slot-placeholder-color: var(--frame-input-root-placeholder-color);
-  --frame-input-otp-separator-color: var(--frame-muted-foreground);
-  --frame-input-otp-separator-size: 0.375rem;
-}
+:root {
+  --frame-input-otp-gap: 0.5rem;
+  --frame-input-otp-group-gap: 0;
+  --frame-input-otp-slot-size: 2.5rem;
+  --frame-input-otp-slot-radius: var(--frame-input-root-radius);
+  --frame-input-otp-slot-bg: var(--frame-input-root-bg);
+  --frame-input-otp-slot-color: var(--frame-input-root-color);
+  --frame-input-otp-slot-border: var(--frame-input-root-border);
+  --frame-input-otp-slot-font-size: 1rem;
+  --frame-input-otp-slot-font-weight: 500;
+  --frame-input-otp-slot-focus-border: var(--frame-input-root-focus-border);
+  --frame-input-otp-slot-focus-shadow: none;
+  --frame-input-otp-slot-invalid-border: var(--frame-input-root-invalid-border);
+  --frame-input-otp-slot-invalid-shadow: none;
+  --frame-input-otp-slot-disabled-bg: var(--frame-input-root-disabled-bg);
+  --frame-input-otp-slot-disabled-color: var(--frame-input-root-disabled-color);
+  --frame-input-otp-slot-disabled-opacity: var(--frame-input-root-disabled-opacity);
+  --frame-input-otp-slot-placeholder-color: var(--frame-input-root-placeholder-color);
+  --frame-input-otp-separator-color: var(--frame-muted-foreground);
+  --frame-input-otp-separator-size: 0.375rem;
+}

package/item/src/styles/_vars.css

@@ -1,34 +1,34 @@
-:root {
-  --frame-item-gap: 0.875rem;
-  --frame-item-padding: 1rem;
-  --frame-item-radius: var(--frame-radius-lg);
-  --frame-item-bg: transparent;
-  --frame-item-color: var(--frame-foreground);
-  --frame-item-border: transparent;
-  --frame-item-outline-border: var(--frame-border);
-  --frame-item-muted-bg: var(--frame-muted);
-  --frame-item-hover-bg: var(--frame-accent);
-  --frame-item-hover-color: var(--frame-accent-foreground);
-  --frame-item-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-  --frame-item-disabled-opacity: 0.5;
-  --frame-item-content-gap: 0.25rem;
-  --frame-item-header-gap: 0.625rem;
-  --frame-item-footer-gap: 0.5rem;
-  --frame-item-actions-gap: 0.5rem;
-  --frame-item-media-size: 2.5rem;
-  --frame-item-media-radius: var(--frame-radius-md);
-  --frame-item-media-bg: var(--frame-muted);
-  --frame-item-media-color: var(--frame-muted-foreground);
-  --frame-item-media-icon-size: 1.25rem;
-  --frame-item-title-color: var(--frame-foreground);
-  --frame-item-title-font-size: 0.9375rem;
-  --frame-item-title-font-weight: 600;
-  --frame-item-description-color: var(--frame-muted-foreground);
-  --frame-item-description-font-size: 0.875rem;
-  --frame-item-sm-padding: 0.75rem;
-  --frame-item-sm-media-size: 2rem;
-  --frame-item-sm-title-font-size: 0.875rem;
-  --frame-item-xs-padding: 0.5rem;
-  --frame-item-xs-media-size: 1.75rem;
-  --frame-item-xs-title-font-size: 0.8125rem;
-}
+:root {
+  --frame-item-gap: 0.875rem;
+  --frame-item-padding: 1rem;
+  --frame-item-radius: var(--frame-radius-lg);
+  --frame-item-bg: transparent;
+  --frame-item-color: var(--frame-foreground);
+  --frame-item-border: transparent;
+  --frame-item-outline-border: var(--frame-border);
+  --frame-item-muted-bg: var(--frame-muted);
+  --frame-item-hover-bg: var(--frame-accent);
+  --frame-item-hover-color: var(--frame-accent-foreground);
+  --frame-item-focus-shadow: none;
+  --frame-item-disabled-opacity: 0.5;
+  --frame-item-content-gap: 0.25rem;
+  --frame-item-header-gap: 0.625rem;
+  --frame-item-footer-gap: 0.5rem;
+  --frame-item-actions-gap: 0.5rem;
+  --frame-item-media-size: 2.5rem;
+  --frame-item-media-radius: var(--frame-radius-md);
+  --frame-item-media-bg: var(--frame-muted);
+  --frame-item-media-color: var(--frame-muted-foreground);
+  --frame-item-media-icon-size: 1.25rem;
+  --frame-item-title-color: var(--frame-foreground);
+  --frame-item-title-font-size: 0.9375rem;
+  --frame-item-title-font-weight: 600;
+  --frame-item-description-color: var(--frame-muted-foreground);
+  --frame-item-description-font-size: 0.875rem;
+  --frame-item-sm-padding: 0.75rem;
+  --frame-item-sm-media-size: 2rem;
+  --frame-item-sm-title-font-size: 0.875rem;
+  --frame-item-xs-padding: 0.5rem;
+  --frame-item-xs-media-size: 1.75rem;
+  --frame-item-xs-title-font-size: 0.8125rem;
+}

package/menubar/src/styles/_vars.css

@@ -1,22 +1,22 @@
-:root {
-  --frame-menubar-bg: var(--frame-surface);
-  --frame-menubar-color: var(--frame-surface-foreground);
-  --frame-menubar-border: var(--frame-border);
-  --frame-menubar-radius: var(--frame-radius-md);
-  --frame-menubar-padding: 0.25rem;
-  --frame-menubar-gap: 0.25rem;
-  --frame-menubar-shadow: none;
-  --frame-menubar-trigger-height: 2rem;
-  --frame-menubar-trigger-padding-x: 0.75rem;
-  --frame-menubar-trigger-gap: 0.375rem;
-  --frame-menubar-trigger-radius: calc(var(--frame-menubar-radius) - 0.125rem);
-  --frame-menubar-trigger-font-size: 0.875rem;
-  --frame-menubar-trigger-font-weight: 500;
-  --frame-menubar-trigger-bg: transparent;
-  --frame-menubar-trigger-color: var(--frame-menubar-color);
-  --frame-menubar-trigger-hover-bg: color-mix(in srgb, var(--frame-accent) 48%, transparent);
-  --frame-menubar-trigger-hover-color: var(--frame-menubar-color);
-  --frame-menubar-trigger-open-bg: var(--frame-accent);
-  --frame-menubar-trigger-open-color: var(--frame-accent-foreground);
-  --frame-menubar-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-}
+:root {
+  --frame-menubar-bg: var(--frame-surface);
+  --frame-menubar-color: var(--frame-surface-foreground);
+  --frame-menubar-border: var(--frame-border);
+  --frame-menubar-radius: var(--frame-radius-md);
+  --frame-menubar-padding: 0.25rem;
+  --frame-menubar-gap: 0.25rem;
+  --frame-menubar-shadow: none;
+  --frame-menubar-trigger-height: 2rem;
+  --frame-menubar-trigger-padding-x: 0.75rem;
+  --frame-menubar-trigger-gap: 0.375rem;
+  --frame-menubar-trigger-radius: calc(var(--frame-menubar-radius) - 0.125rem);
+  --frame-menubar-trigger-font-size: 0.875rem;
+  --frame-menubar-trigger-font-weight: 500;
+  --frame-menubar-trigger-bg: transparent;
+  --frame-menubar-trigger-color: var(--frame-menubar-color);
+  --frame-menubar-trigger-hover-bg: color-mix(in srgb, var(--frame-accent) 48%, transparent);
+  --frame-menubar-trigger-hover-color: var(--frame-menubar-color);
+  --frame-menubar-trigger-open-bg: var(--frame-accent);
+  --frame-menubar-trigger-open-color: var(--frame-accent-foreground);
+  --frame-menubar-trigger-focus-shadow: none;
+}

package/modal/src/styles/_vars.css

@@ -1,18 +1,19 @@
-:root {
-  --frame-modal-backdrop-blur: 3px;
-  --frame-modal-backdrop-bg: rgb(0 0 0 / 0.52);
-  --frame-modal-bg: var(--frame-background, #fff);
-  --frame-modal-border: var(--frame-border, #e5e7eb);
-  --frame-modal-color: var(--frame-foreground, #09090b);
-  --frame-modal-muted-color: var(--frame-muted-foreground, #71717a);
-  --frame-modal-radius: var(--frame-radius-lg, 0.75rem);
-  --frame-modal-shadow: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
-  --frame-modal-padding: 1.5rem;
-  --frame-modal-gap: 1rem;
-  --frame-modal-scrollable-height: min(calc(100dvh - 2rem), 28rem);
-  --frame-modal-close-bg: transparent;
-  --frame-modal-close-color: var(--frame-muted-foreground, #71717a);
-  --frame-modal-close-hover-bg: var(--frame-muted, #f4f4f5);
-  --frame-modal-close-hover-color: var(--frame-foreground, #09090b);
-  --frame-modal-z-index: 1000;
-}
+:root {
+  --frame-modal-backdrop-blur: 3px;
+  --frame-modal-backdrop-bg: rgb(0 0 0 / 0.52);
+  --frame-modal-bg: var(--frame-background, #fff);
+  --frame-modal-border: var(--frame-border, #e5e7eb);
+  --frame-modal-color: var(--frame-foreground, #09090b);
+  --frame-modal-muted-color: var(--frame-muted-foreground, #71717a);
+  --frame-modal-radius: var(--frame-radius-lg, 0.75rem);
+  --frame-modal-shadow: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
+  --frame-modal-padding: 1.5rem;
+  --frame-modal-gap: 1rem;
+  --frame-modal-scrollable-height: min(calc(100dvh - 2rem), 28rem);
+  --frame-modal-close-bg: transparent;
+  --frame-modal-close-color: var(--frame-muted-foreground, #71717a);
+  --frame-modal-close-radius: var(--frame-radius-sm);
+  --frame-modal-close-hover-bg: var(--frame-muted, #f4f4f5);
+  --frame-modal-close-hover-color: var(--frame-foreground, #09090b);
+  --frame-modal-z-index: 1000;
+}