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

package/modal/src/styles/modal.css

@@ -1,179 +1,202 @@
-@import "./_vars.css";
-
-.cdk-overlay-backdrop.frame-modal__backdrop {
-  backdrop-filter: blur(var(--frame-modal-backdrop-blur));
-  background: var(--frame-modal-backdrop-bg);
-}
-
-.cdk-global-overlay-wrapper:has(.frame-modal__overlay-pane) {
-  z-index: var(--frame-modal-z-index);
-}
-
-.frame-modal__overlay-pane .cdk-dialog-container {
-  display: contents;
-  outline: none;
-}
-
-.frame-modal__panel {
-  position: relative;
-  display: flex;
-  max-height: min(calc(100dvh - 2rem), 42rem);
-  width: min(calc(100vw - 2rem), 32rem);
-  flex-direction: column;
-  gap: var(--frame-modal-gap);
-  overflow: hidden;
-  border: 1px solid var(--frame-modal-border);
-  border-radius: var(--frame-modal-radius);
-  background: var(--frame-modal-bg);
-  box-shadow: var(--frame-modal-shadow);
-  color: var(--frame-modal-color);
-  animation: frame-modal-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.frame-modal__panel[data-size="sm"] {
-  width: min(calc(100vw - 2rem), 24rem);
-}
-
-.frame-modal__panel[data-size="lg"] {
-  width: min(calc(100vw - 2rem), 42rem);
-}
-
-.frame-modal__panel[data-size="xl"] {
-  width: min(calc(100vw - 2rem), 56rem);
-}
-
-.frame-modal__panel[data-size="full"] {
-  width: calc(100vw - 2rem);
-  height: calc(100dvh - 2rem);
-  max-height: calc(100dvh - 2rem);
-}
-
-.frame-modal__panel[data-scrollable] {
-  height: var(--frame-modal-scrollable-height);
-  min-height: 0;
-}
-
-.frame-modal__header,
-.frame-modal__body,
-.frame-modal__footer {
-  padding-inline: var(--frame-modal-padding);
-}
-
-.frame-modal__header {
-  display: grid;
-  flex: 0 0 auto;
-  gap: 0.375rem;
-  padding-block-start: var(--frame-modal-padding);
-  padding-inline-end: calc(var(--frame-modal-padding) + 2rem);
-}
-
-.frame-modal__body {
-  display: grid;
-  min-height: 0;
-  flex: 0 1 auto;
-  gap: 1rem;
-}
-
-.frame-modal__panel[data-scrollable] .frame-modal__body {
-  flex: 1 1 auto;
-  overflow: auto;
-  overscroll-behavior: contain;
-  padding-block-end: var(--frame-modal-padding);
-}
-
-.frame-modal__footer {
-  display: flex;
-  flex: 0 0 auto;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.625rem;
-  padding-block-end: var(--frame-modal-padding);
-}
-
-.frame-modal__panel[data-sticky-footer] .frame-modal__footer {
-  flex: 0 0 auto;
-  border-block-start: 1px solid var(--frame-modal-border);
-  background: color-mix(in srgb, var(--frame-modal-bg) 92%, transparent);
-  padding-block-start: 1rem;
-  backdrop-filter: blur(12px);
-}
-
-.frame-modal__title {
-  margin: 0;
-  color: var(--frame-modal-color);
-  font-size: 1.125rem;
-  font-weight: 650;
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-}
-
-.frame-modal__description {
-  margin: 0;
-  color: var(--frame-modal-muted-color);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.frame-modal__close {
-  position: absolute;
-  inset-block-start: 0.75rem;
-  inset-inline-end: 0.75rem;
-  display: inline-grid;
-  width: 2rem;
-  height: 2rem;
-  place-items: center;
-  border: 0;
-  border-radius: 999px;
-  background: var(--frame-modal-close-bg);
-  color: var(--frame-modal-close-color);
-  cursor: pointer;
-  font: inherit;
-  line-height: 1;
-  transition:
-    background-color 120ms ease,
-    color 120ms ease,
-    transform 120ms ease;
-}
-
-.frame-modal__close:hover {
-  background: var(--frame-modal-close-hover-bg);
-  color: var(--frame-modal-close-hover-color);
-}
-
-.frame-modal__close:active {
-  transform: scale(0.96);
-}
-
-.frame-modal__close:focus-visible,
-.frame-modal__close-control:focus-visible {
-  outline: 2px solid var(--frame-ring, currentColor);
-  outline-offset: 2px;
-}
-
-@media (max-width: 640px) {
-  .frame-modal__panel {
-    width: calc(100vw - 1rem);
-  }
-
-  .frame-modal__footer {
-    flex-direction: column-reverse;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .frame-modal__panel {
-    animation: none;
-  }
-}
-
-@keyframes frame-modal-enter {
-  from {
-    opacity: 0;
-    transform: translateY(10px) scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
+@import "./_vars.css";
+
+.cdk-overlay-backdrop.frame-modal__backdrop {
+  backdrop-filter: blur(var(--frame-modal-backdrop-blur));
+  background: var(--frame-modal-backdrop-bg);
+}
+
+.cdk-global-overlay-wrapper:has(.frame-modal__overlay-pane) {
+  z-index: var(--frame-modal-z-index);
+}
+
+.frame-modal__overlay-pane .cdk-dialog-container {
+  display: contents;
+  outline: none;
+}
+
+.frame-modal__panel {
+  position: relative;
+  display: flex;
+  max-height: min(calc(100dvh - 2rem), 42rem);
+  width: min(calc(100vw - 2rem), 32rem);
+  flex-direction: column;
+  gap: var(--frame-modal-gap);
+  overflow: hidden;
+  border: 1px solid var(--frame-modal-border);
+  border-radius: var(--frame-modal-radius);
+  background: var(--frame-modal-bg);
+  box-shadow: var(--frame-modal-shadow), var(--frame-shadow-frame);
+  color: var(--frame-modal-color);
+  animation: frame-modal-enter 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.frame-modal__panel::before {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  background:
+    linear-gradient(var(--frame-frame-accent), var(--frame-frame-accent)) left 0.5rem top 0.5rem /
+      var(--frame-frame-tick-size) 1px no-repeat,
+    linear-gradient(var(--frame-frame-accent), var(--frame-frame-accent)) left 0.5rem top 0.5rem / 1px
+      var(--frame-frame-tick-size) no-repeat,
+    linear-gradient(var(--frame-frame-accent), var(--frame-frame-accent)) right 0.5rem bottom 0.5rem /
+      var(--frame-frame-tick-size) 1px no-repeat,
+    linear-gradient(var(--frame-frame-accent), var(--frame-frame-accent)) right 0.5rem bottom 0.5rem / 1px
+      var(--frame-frame-tick-size)
+      no-repeat;
+  pointer-events: none;
+  content: "";
+}
+
+.frame-modal__panel[data-size="sm"] {
+  width: min(calc(100vw - 2rem), 24rem);
+}
+
+.frame-modal__panel[data-size="lg"] {
+  width: min(calc(100vw - 2rem), 42rem);
+}
+
+.frame-modal__panel[data-size="xl"] {
+  width: min(calc(100vw - 2rem), 56rem);
+}
+
+.frame-modal__panel[data-size="full"] {
+  width: calc(100vw - 2rem);
+  height: calc(100dvh - 2rem);
+  max-height: calc(100dvh - 2rem);
+}
+
+.frame-modal__panel[data-scrollable] {
+  height: var(--frame-modal-scrollable-height);
+  min-height: 0;
+}
+
+.frame-modal__header,
+.frame-modal__body,
+.frame-modal__footer {
+  padding-inline: var(--frame-modal-padding);
+}
+
+.frame-modal__header {
+  display: grid;
+  flex: 0 0 auto;
+  gap: 0.375rem;
+  border-block-end: 1px solid var(--frame-frame-line-muted);
+  padding-block-start: var(--frame-modal-padding);
+  padding-block-end: 1rem;
+  padding-inline-end: calc(var(--frame-modal-padding) + 2rem);
+}
+
+.frame-modal__body {
+  display: grid;
+  min-height: 0;
+  flex: 0 1 auto;
+  gap: 1rem;
+}
+
+.frame-modal__panel[data-scrollable] .frame-modal__body {
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding-block-end: var(--frame-modal-padding);
+}
+
+.frame-modal__footer {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.625rem;
+  border-block-start: 1px solid var(--frame-frame-line-muted);
+  padding-block-start: 1rem;
+  padding-block-end: var(--frame-modal-padding);
+}
+
+.frame-modal__panel[data-sticky-footer] .frame-modal__footer {
+  flex: 0 0 auto;
+  border-block-start: 1px solid var(--frame-modal-border);
+  background: color-mix(in srgb, var(--frame-modal-bg) 92%, transparent);
+  padding-block-start: 1rem;
+  backdrop-filter: blur(12px);
+}
+
+.frame-modal__title {
+  margin: 0;
+  color: var(--frame-modal-color);
+  font-size: 1.125rem;
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.frame-modal__description {
+  margin: 0;
+  color: var(--frame-modal-muted-color);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.frame-modal__close {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border: 1px solid var(--frame-frame-line-muted);
+  border-radius: var(--frame-modal-close-radius);
+  background: var(--frame-modal-close-bg);
+  color: var(--frame-modal-close-color);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+}
+
+.frame-modal__close:hover {
+  background: var(--frame-modal-close-hover-bg);
+  color: var(--frame-modal-close-hover-color);
+}
+
+.frame-modal__close:active {
+  transform: scale(0.96);
+}
+
+.frame-modal__close:focus-visible,
+.frame-modal__close-control:focus-visible {
+  outline: 2px solid var(--frame-ring, currentColor);
+  outline-offset: 2px;
+}
+
+@media (max-width: 640px) {
+  .frame-modal__panel {
+    width: calc(100vw - 1rem);
+  }
+
+  .frame-modal__footer {
+    flex-direction: column-reverse;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame-modal__panel {
+    animation: none;
+  }
+}
+
+@keyframes frame-modal-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}

package/navigation-menu/src/styles/_vars.css

@@ -1,45 +1,45 @@
-:root {
-  --frame-navigation-menu-gap: 0.25rem;
-  --frame-navigation-menu-padding: 0.25rem;
-  --frame-navigation-menu-radius: var(--frame-radius-md);
-  --frame-navigation-menu-bg: transparent;
-  --frame-navigation-menu-color: var(--frame-foreground);
-  --frame-navigation-menu-trigger-height: 2.25rem;
-  --frame-navigation-menu-trigger-padding-x: 0.875rem;
-  --frame-navigation-menu-trigger-gap: 0.375rem;
-  --frame-navigation-menu-trigger-radius: calc(var(--frame-navigation-menu-radius) - 0.125rem);
-  --frame-navigation-menu-trigger-font-size: 0.875rem;
-  --frame-navigation-menu-trigger-font-weight: 500;
-  --frame-navigation-menu-trigger-bg: transparent;
-  --frame-navigation-menu-trigger-color: var(--frame-navigation-menu-color);
-  --frame-navigation-menu-trigger-hover-bg: var(--frame-accent);
-  --frame-navigation-menu-trigger-hover-color: var(--frame-accent-foreground);
-  --frame-navigation-menu-trigger-open-bg: var(--frame-accent);
-  --frame-navigation-menu-trigger-open-color: var(--frame-accent-foreground);
-  --frame-navigation-menu-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-  --frame-navigation-menu-content-width: 36rem;
-  --frame-navigation-menu-content-gap: 0.25rem;
-  --frame-navigation-menu-link-gap: 0.25rem;
-  --frame-navigation-menu-link-padding: 0.75rem;
-  --frame-navigation-menu-link-radius: var(--frame-radius-md);
-  --frame-navigation-menu-link-bg: transparent;
-  --frame-navigation-menu-link-color: var(--frame-foreground);
-  --frame-navigation-menu-link-hover-bg: var(--frame-accent);
-  --frame-navigation-menu-link-hover-color: var(--frame-accent-foreground);
-  --frame-navigation-menu-link-active-bg: var(--frame-accent);
-  --frame-navigation-menu-link-active-color: var(--frame-accent-foreground);
-  --frame-navigation-menu-link-title-font-size: 0.875rem;
-  --frame-navigation-menu-link-title-font-weight: 600;
-  --frame-navigation-menu-link-description-color: var(--frame-muted-foreground);
-  --frame-navigation-menu-link-description-font-size: 0.8125rem;
-  --frame-navigation-menu-link-separator-color: var(--frame-border);
-  --frame-navigation-menu-link-separator-margin-y: 0.25rem;
-  --frame-navigation-menu-feature-bg: linear-gradient(135deg, var(--frame-muted), color-mix(in srgb, var(--frame-primary) 12%, var(--frame-surface)));
-  --frame-navigation-menu-feature-color: var(--frame-foreground);
-  --frame-navigation-menu-indicator-size: 0.625rem;
-  --frame-navigation-menu-indicator-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
-  --frame-navigation-menu-viewport-radius: var(--frame-dropdown-menu-panel-radius, var(--frame-radius-md));
-  --frame-navigation-menu-viewport-border: var(--frame-dropdown-menu-panel-border, var(--frame-border));
-  --frame-navigation-menu-viewport-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
-  --frame-navigation-menu-viewport-shadow: var(--frame-dropdown-menu-panel-shadow, var(--frame-shadow-md));
-}
+:root {
+  --frame-navigation-menu-gap: 0.25rem;
+  --frame-navigation-menu-padding: 0.25rem;
+  --frame-navigation-menu-radius: var(--frame-radius-md);
+  --frame-navigation-menu-bg: transparent;
+  --frame-navigation-menu-color: var(--frame-foreground);
+  --frame-navigation-menu-trigger-height: 2.25rem;
+  --frame-navigation-menu-trigger-padding-x: 0.875rem;
+  --frame-navigation-menu-trigger-gap: 0.375rem;
+  --frame-navigation-menu-trigger-radius: calc(var(--frame-navigation-menu-radius) - 0.125rem);
+  --frame-navigation-menu-trigger-font-size: 0.875rem;
+  --frame-navigation-menu-trigger-font-weight: 500;
+  --frame-navigation-menu-trigger-bg: transparent;
+  --frame-navigation-menu-trigger-color: var(--frame-navigation-menu-color);
+  --frame-navigation-menu-trigger-hover-bg: var(--frame-accent);
+  --frame-navigation-menu-trigger-hover-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-trigger-open-bg: var(--frame-accent);
+  --frame-navigation-menu-trigger-open-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-trigger-focus-shadow: none;
+  --frame-navigation-menu-content-width: 36rem;
+  --frame-navigation-menu-content-gap: 0.25rem;
+  --frame-navigation-menu-link-gap: 0.25rem;
+  --frame-navigation-menu-link-padding: 0.75rem;
+  --frame-navigation-menu-link-radius: var(--frame-radius-md);
+  --frame-navigation-menu-link-bg: transparent;
+  --frame-navigation-menu-link-color: var(--frame-foreground);
+  --frame-navigation-menu-link-hover-bg: var(--frame-accent);
+  --frame-navigation-menu-link-hover-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-link-active-bg: var(--frame-accent);
+  --frame-navigation-menu-link-active-color: var(--frame-accent-foreground);
+  --frame-navigation-menu-link-title-font-size: 0.875rem;
+  --frame-navigation-menu-link-title-font-weight: 600;
+  --frame-navigation-menu-link-description-color: var(--frame-muted-foreground);
+  --frame-navigation-menu-link-description-font-size: 0.8125rem;
+  --frame-navigation-menu-link-separator-color: var(--frame-border);
+  --frame-navigation-menu-link-separator-margin-y: 0.25rem;
+  --frame-navigation-menu-feature-bg: linear-gradient(135deg, var(--frame-muted), color-mix(in srgb, var(--frame-primary) 12%, var(--frame-surface)));
+  --frame-navigation-menu-feature-color: var(--frame-foreground);
+  --frame-navigation-menu-indicator-size: 0.625rem;
+  --frame-navigation-menu-indicator-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
+  --frame-navigation-menu-viewport-radius: var(--frame-dropdown-menu-panel-radius, var(--frame-radius-md));
+  --frame-navigation-menu-viewport-border: var(--frame-dropdown-menu-panel-border, var(--frame-border));
+  --frame-navigation-menu-viewport-bg: var(--frame-dropdown-menu-panel-bg, var(--frame-surface));
+  --frame-navigation-menu-viewport-shadow: var(--frame-dropdown-menu-panel-shadow, var(--frame-shadow-md));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-ui-ng/components",
-  "version": "0.1.0-beta.0",
+  "version": "0.2.0-beta.0",
   "description": "Angular components for FrameUI.",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "@angular/common": ">=21.0.0 <22.0.0",
     "@angular/core": ">=21.0.0 <22.0.0",
     "@angular/forms": ">=21.0.0 <22.0.0",
-    "@frame-ui-ng/foundation": "0.1.0-beta.0",
+    "@frame-ui-ng/foundation": "0.2.0-beta.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -37,6 +37,14 @@
       "style": "./styles.css",
       "default": "./styles.css"
     },
+    "./styles/components.css": {
+      "style": "./styles/components.css",
+      "default": "./styles/components.css"
+    },
+    "./styles/blueprint.css": {
+      "style": "./styles/blueprint.css",
+      "default": "./styles/blueprint.css"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -235,7 +243,8 @@
   },
   "sideEffects": [
     "./styles.css",
-    "./styles/components.css"
+    "./styles/components.css",
+    "./styles/blueprint.css"
   ],
   "module": "fesm2022/frame-ui-ng-components.mjs",
   "typings": "types/frame-ui-ng-components.d.ts",

package/pagination/src/styles/_vars.css

@@ -1,22 +1,22 @@
-:root {
-  --frame-pagination-gap: 0.25rem;
-  --frame-pagination-color: var(--frame-foreground);
-  --frame-pagination-link-size: 2.25rem;
-  --frame-pagination-link-min-width: 2.25rem;
-  --frame-pagination-link-padding-x: 0.75rem;
-  --frame-pagination-link-gap: 0.375rem;
-  --frame-pagination-link-radius: var(--frame-radius-md);
-  --frame-pagination-link-bg: transparent;
-  --frame-pagination-link-color: var(--frame-muted-foreground);
-  --frame-pagination-link-border: transparent;
-  --frame-pagination-link-hover-bg: var(--frame-accent);
-  --frame-pagination-link-hover-color: var(--frame-accent-foreground);
-  --frame-pagination-link-active-bg: var(--frame-surface);
-  --frame-pagination-link-active-color: var(--frame-foreground);
-  --frame-pagination-link-active-border: var(--frame-border);
-  --frame-pagination-link-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
-  --frame-pagination-link-disabled-opacity: 0.5;
-  --frame-pagination-font-size: 0.875rem;
-  --frame-pagination-font-weight: 500;
-  --frame-pagination-ellipsis-color: var(--frame-muted-foreground);
-}
+:root {
+  --frame-pagination-gap: 0.25rem;
+  --frame-pagination-color: var(--frame-foreground);
+  --frame-pagination-link-size: 2.25rem;
+  --frame-pagination-link-min-width: 2.25rem;
+  --frame-pagination-link-padding-x: 0.75rem;
+  --frame-pagination-link-gap: 0.375rem;
+  --frame-pagination-link-radius: var(--frame-radius-md);
+  --frame-pagination-link-bg: transparent;
+  --frame-pagination-link-color: var(--frame-muted-foreground);
+  --frame-pagination-link-border: transparent;
+  --frame-pagination-link-hover-bg: var(--frame-accent);
+  --frame-pagination-link-hover-color: var(--frame-accent-foreground);
+  --frame-pagination-link-active-bg: var(--frame-surface);
+  --frame-pagination-link-active-color: var(--frame-foreground);
+  --frame-pagination-link-active-border: var(--frame-border);
+  --frame-pagination-link-focus-shadow: none;
+  --frame-pagination-link-disabled-opacity: 0.5;
+  --frame-pagination-font-size: 0.875rem;
+  --frame-pagination-font-weight: 500;
+  --frame-pagination-ellipsis-color: var(--frame-muted-foreground);
+}