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

package/pagination/src/styles/pagination.css

@@ -1,138 +1,158 @@
-@import './_vars.css';
-
-[frPagination],
-nav[frPagination] {
-  display: flex;
-  justify-content: center;
-  color: var(--frame-pagination-color);
-}
-
-[frPaginationContent] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--frame-pagination-gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-[frPaginationItem] {
-  display: inline-flex;
-  align-items: center;
-}
-
-[frPaginationLink],
-[frPaginationPrevious],
-[frPaginationNext],
-.frame-pagination__link {
-  box-sizing: border-box;
-  display: inline-flex;
-  min-inline-size: var(--frame-pagination-link-min-width);
-  min-block-size: var(--frame-pagination-link-size);
-  align-items: center;
-  justify-content: center;
-  gap: var(--frame-pagination-link-gap);
-  border: 1px solid var(--frame-pagination-link-border);
-  border-radius: var(--frame-pagination-link-radius);
-  background: var(--frame-pagination-link-bg);
-  color: var(--frame-pagination-link-color);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--frame-pagination-font-size);
-  font-weight: var(--frame-pagination-font-weight);
-  line-height: 1;
-  padding-inline: var(--frame-pagination-link-padding-x);
-  text-decoration: none;
-  transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    box-shadow 140ms ease,
-    color 140ms ease,
-    opacity 140ms ease;
-  user-select: none;
-  white-space: nowrap;
-}
-
-[frPaginationLink]:where(button),
-[frPaginationPrevious]:where(button),
-[frPaginationNext]:where(button) {
-  padding-block: 0;
-}
-
-[frPaginationLink]:where(:not([data-disabled])):hover,
-[frPaginationPrevious]:where(:not([data-disabled])):hover,
-[frPaginationNext]:where(:not([data-disabled])):hover,
-.frame-pagination__link:where(:not([data-disabled])):hover {
-  background: var(--frame-pagination-link-hover-bg);
-  color: var(--frame-pagination-link-hover-color);
-}
-
-[frPaginationLink]:focus-visible,
-[frPaginationPrevious]:focus-visible,
-[frPaginationNext]:focus-visible,
-.frame-pagination__link:focus-visible {
-  outline: none;
-  box-shadow: var(--frame-pagination-link-focus-shadow);
-}
-
-[frPaginationLink][data-active],
-.frame-pagination__link[data-active] {
-  border-color: var(--frame-pagination-link-active-border);
-  background: var(--frame-pagination-link-active-bg);
-  color: var(--frame-pagination-link-active-color);
-}
-
-[frPaginationLink][data-disabled],
-[frPaginationPrevious][data-disabled],
-[frPaginationNext][data-disabled],
-.frame-pagination__link[data-disabled] {
-  cursor: not-allowed;
-  opacity: var(--frame-pagination-link-disabled-opacity);
-  pointer-events: none;
-}
-
-[frPaginationPrevious][data-icon-only],
-[frPaginationNext][data-icon-only] {
-  inline-size: var(--frame-pagination-link-size);
-  min-inline-size: var(--frame-pagination-link-size);
-  padding-inline: 0;
-}
-
-.frame-pagination__control-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25em;
-  line-height: 0.75;
-}
-
-[dir='rtl'] .frame-pagination__previous .frame-pagination__control-icon,
-[dir='rtl'] .frame-pagination__next .frame-pagination__control-icon {
-  transform: scaleX(-1);
-}
-
-[frPaginationEllipsis],
-frame-pagination-ellipsis {
-  display: inline-flex;
-  min-inline-size: var(--frame-pagination-link-size);
-  min-block-size: var(--frame-pagination-link-size);
-  align-items: center;
-  justify-content: center;
-  color: var(--frame-pagination-ellipsis-color);
-  letter-spacing: 0.08em;
-  user-select: none;
-}
-
-.frame-pagination__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+@import './_vars.css';
+
+[frPagination],
+nav[frPagination] {
+  display: flex;
+  justify-content: center;
+  color: var(--frame-pagination-color);
+}
+
+[frPaginationContent] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-pagination-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[frPaginationItem] {
+  display: inline-flex;
+  align-items: center;
+}
+
+[frPaginationLink],
+[frPaginationPrevious],
+[frPaginationNext],
+.frame-pagination__link {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  min-inline-size: var(--frame-pagination-link-min-width);
+  min-block-size: var(--frame-pagination-link-size);
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-pagination-link-gap);
+  border: 1px solid var(--frame-pagination-link-border);
+  border-radius: var(--frame-pagination-link-radius);
+  background: var(--frame-pagination-link-bg);
+  color: var(--frame-pagination-link-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-pagination-font-size);
+  font-weight: var(--frame-pagination-font-weight);
+  line-height: 1;
+  padding-inline: var(--frame-pagination-link-padding-x);
+  text-decoration: none;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease,
+    transform 140ms ease;
+  user-select: none;
+  white-space: nowrap;
+}
+
+[frPaginationLink]:where(button),
+[frPaginationPrevious]:where(button),
+[frPaginationNext]:where(button) {
+  padding-block: 0;
+}
+
+[frPaginationLink]:where(:not([data-disabled])):hover,
+[frPaginationPrevious]:where(:not([data-disabled])):hover,
+[frPaginationNext]:where(:not([data-disabled])):hover,
+.frame-pagination__link:where(:not([data-disabled])):hover {
+  background: var(--frame-pagination-link-hover-bg);
+  border-color: var(--frame-frame-accent, var(--frame-primary));
+  color: var(--frame-pagination-link-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);
+}
+
+[frPaginationLink]:focus-visible,
+[frPaginationPrevious]:focus-visible,
+[frPaginationNext]:focus-visible,
+.frame-pagination__link:focus-visible {
+  outline: none;
+  border-color: var(--frame-frame-accent, var(--frame-ring));
+  box-shadow: var(--frame-pagination-link-focus-shadow);
+  transform: translate(-1px, -1px);
+}
+
+[frPaginationLink][data-active],
+.frame-pagination__link[data-active] {
+  border-color: var(--frame-pagination-link-active-border);
+  background: var(--frame-pagination-link-active-bg);
+  color: var(--frame-pagination-link-active-color);
+}
+
+[frPaginationLink][data-active]::before,
+.frame-pagination__link[data-active]::before {
+  position: absolute;
+  inset-block-start: 0.1875rem;
+  inset-inline-start: 0.1875rem;
+  inline-size: 0.3125rem;
+  block-size: 0.3125rem;
+  border-block-start: 1px solid currentColor;
+  border-inline-start: 1px solid currentColor;
+  content: "";
+  pointer-events: none;
+}
+
+[frPaginationLink][data-disabled],
+[frPaginationPrevious][data-disabled],
+[frPaginationNext][data-disabled],
+.frame-pagination__link[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-pagination-link-disabled-opacity);
+  pointer-events: none;
+}
+
+[frPaginationPrevious][data-icon-only],
+[frPaginationNext][data-icon-only] {
+  inline-size: var(--frame-pagination-link-size);
+  min-inline-size: var(--frame-pagination-link-size);
+  padding-inline: 0;
+}
+
+.frame-pagination__control-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25em;
+  line-height: 0.75;
+}
+
+[dir='rtl'] .frame-pagination__previous .frame-pagination__control-icon,
+[dir='rtl'] .frame-pagination__next .frame-pagination__control-icon {
+  transform: scaleX(-1);
+}
+
+[frPaginationEllipsis],
+frame-pagination-ellipsis {
+  display: inline-flex;
+  min-inline-size: var(--frame-pagination-link-size);
+  min-block-size: var(--frame-pagination-link-size);
+  align-items: center;
+  justify-content: center;
+  color: var(--frame-pagination-ellipsis-color);
+  letter-spacing: 0.08em;
+  user-select: none;
+}
+
+.frame-pagination__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/progress/src/styles/_vars.css

@@ -1,15 +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;
-}
+:root {
+  --frame-progress-height: 0.5rem;
+  --frame-progress-width: 100%;
+  --frame-progress-radius: 0;
+  --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/radio-group/src/styles/_vars.css

@@ -1,29 +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;
-}
+: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: none;
+  --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: none;
+  --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;
+}