@frame-ui-ng/components 0.3.0-beta.0 → 0.4.1

package/item/src/styles/item.css

@@ -1,187 +1,188 @@
-@import './_vars.css';
-
-[frItem],
-frame-item {
-  box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--frame-item-gap);
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--frame-item-border);
-  border-radius: var(--frame-item-radius);
-  background: var(--frame-item-bg);
-  color: var(--frame-item-color);
-  padding: var(--frame-item-padding);
-  text-align: start;
-  text-decoration: none;
-  transition:
-    background-color 140ms ease,
-    border-color 140ms ease,
-    box-shadow 140ms ease,
-    color 140ms ease,
-    opacity 140ms ease;
-}
-
-[frItem][data-variant='outline'],
-frame-item[data-variant='outline'] {
-  --frame-item-border: var(--frame-item-outline-border);
-}
-
-[frItem][data-variant='muted'],
-frame-item[data-variant='muted'] {
-  --frame-item-bg: var(--frame-item-muted-bg);
-}
-
-[frItem][data-size='sm'],
-frame-item[data-size='sm'] {
-  --frame-item-padding: var(--frame-item-sm-padding);
-  --frame-item-media-size: var(--frame-item-sm-media-size);
-  --frame-item-title-font-size: var(--frame-item-sm-title-font-size);
-}
-
-[frItem][data-size='xs'],
-frame-item[data-size='xs'] {
-  --frame-item-padding: var(--frame-item-xs-padding);
-  --frame-item-media-size: var(--frame-item-xs-media-size);
-  --frame-item-title-font-size: var(--frame-item-xs-title-font-size);
-}
-
-[frItem][data-interactive]:where(:not([data-disabled])):hover,
-frame-item[data-interactive]:where(:not([data-disabled])):hover {
-  background: var(--frame-item-hover-bg);
-  color: var(--frame-item-hover-color);
-}
-
-[frItem][data-interactive]:where(:not([data-disabled])):focus-visible,
-frame-item[data-interactive]:where(:not([data-disabled])):focus-visible {
-  outline: none;
-  box-shadow: var(--frame-item-focus-shadow);
-}
-
-[frItem][data-disabled],
-frame-item[data-disabled] {
-  cursor: not-allowed;
-  opacity: var(--frame-item-disabled-opacity);
-}
-
-.frame-item-group,
-[frItemGroup],
-frame-item-group {
-  display: grid;
-  gap: 0;
-  width: 100%;
-  border: 1px solid var(--frame-item-outline-border);
-  border-radius: var(--frame-item-radius);
-  overflow: hidden;
-}
-
-.frame-item-group > [frItem],
-.frame-item-group > frame-item,
-[frItemGroup] > [frItem],
-[frItemGroup] > frame-item,
-frame-item-group > [frItem],
-frame-item-group > frame-item {
-  border: 0;
-  border-radius: 0;
-}
-
-[frItemSeparator],
-frame-item-separator {
-  display: block;
-  height: 1px;
-  margin-inline: var(--frame-item-padding);
-  background: var(--frame-item-outline-border);
-}
-
-[frItemHeader],
-frame-item-header,
-[frItemFooter],
-frame-item-footer {
-  display: grid;
-  min-width: 0;
-}
-
-[frItemHeader],
-frame-item-header {
-  gap: var(--frame-item-header-gap);
-}
-
-[frItemFooter],
-frame-item-footer {
-  gap: var(--frame-item-footer-gap);
-}
-
-[frItemMedia],
-frame-item-media {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--frame-item-media-size);
-  block-size: var(--frame-item-media-size);
-  border-radius: var(--frame-item-media-radius);
-  color: var(--frame-item-media-color);
-  overflow: hidden;
-}
-
-[frItemMedia][data-variant='icon'],
-frame-item-media[data-variant='icon'] {
-  background: var(--frame-item-media-bg);
-}
-
-[frItemMedia][data-variant='image'],
-frame-item-media[data-variant='image'],
-[frItemMedia][data-variant='avatar'],
-frame-item-media[data-variant='avatar'] {
-  background: transparent;
-}
-
-[frItemMedia] > ng-icon,
-frame-item-media > ng-icon,
-[frItemMedia] > svg,
-frame-item-media > svg {
-  inline-size: var(--frame-item-media-icon-size);
-  block-size: var(--frame-item-media-icon-size);
-}
-
-[frItemMedia] img,
-frame-item-media img {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-[frItemContent],
-frame-item-content {
-  display: grid;
-  flex: 1 1 auto;
-  gap: var(--frame-item-content-gap);
-  min-width: 0;
-}
-
-[frItemTitle],
-frame-item-title {
-  color: var(--frame-item-title-color);
-  font-size: var(--frame-item-title-font-size);
-  font-weight: var(--frame-item-title-font-weight);
-  line-height: 1.25;
-  margin: 0;
-}
-
-[frItemDescription],
-frame-item-description {
-  color: var(--frame-item-description-color);
-  font-size: var(--frame-item-description-font-size);
-  line-height: 1.45;
-  margin: 0;
-}
-
-[frItemActions],
-frame-item-actions {
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  gap: var(--frame-item-actions-gap);
-  margin-inline-start: auto;
-}
+@import './_vars.css';
+
+[frItem],
+frame-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--frame-item-gap);
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--frame-item-border);
+  border-radius: var(--frame-item-radius);
+  background: var(--frame-item-bg);
+  color: var(--frame-item-color);
+  padding: var(--frame-item-padding);
+  text-align: start;
+  text-decoration: none;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    color 140ms ease,
+    opacity 140ms ease;
+}
+
+[frItem][data-variant='outline'],
+frame-item[data-variant='outline'] {
+  --frame-item-border: var(--frame-item-outline-border);
+}
+
+[frItem][data-variant='muted'],
+frame-item[data-variant='muted'] {
+  --frame-item-bg: var(--frame-item-muted-bg);
+}
+
+[frItem][data-size='sm'],
+frame-item[data-size='sm'] {
+  --frame-item-padding: var(--frame-item-sm-padding);
+  --frame-item-media-size: var(--frame-item-sm-media-size);
+  --frame-item-title-font-size: var(--frame-item-sm-title-font-size);
+}
+
+[frItem][data-size='xs'],
+frame-item[data-size='xs'] {
+  --frame-item-padding: var(--frame-item-xs-padding);
+  --frame-item-media-size: var(--frame-item-xs-media-size);
+  --frame-item-title-font-size: var(--frame-item-xs-title-font-size);
+}
+
+[frItem][data-interactive]:where(:not([data-disabled])):hover,
+frame-item[data-interactive]:where(:not([data-disabled])):hover {
+  cursor: pointer;
+  background: var(--frame-item-hover-bg);
+  color: var(--frame-item-hover-color);
+}
+
+[frItem][data-interactive]:where(:not([data-disabled])):focus-visible,
+frame-item[data-interactive]:where(:not([data-disabled])):focus-visible {
+  outline: none;
+  box-shadow: var(--frame-item-focus-shadow);
+}
+
+[frItem][data-disabled],
+frame-item[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--frame-item-disabled-opacity);
+}
+
+.frame-item-group,
+[frItemGroup],
+frame-item-group {
+  display: grid;
+  gap: 0;
+  width: 100%;
+  border: 1px solid var(--frame-item-outline-border);
+  border-radius: var(--frame-item-radius);
+  overflow: hidden;
+}
+
+.frame-item-group > [frItem],
+.frame-item-group > frame-item,
+[frItemGroup] > [frItem],
+[frItemGroup] > frame-item,
+frame-item-group > [frItem],
+frame-item-group > frame-item {
+  border: 0;
+  border-radius: 0;
+}
+
+[frItemSeparator],
+frame-item-separator {
+  display: block;
+  height: 1px;
+  margin-inline: var(--frame-item-padding);
+  background: var(--frame-item-outline-border);
+}
+
+[frItemHeader],
+frame-item-header,
+[frItemFooter],
+frame-item-footer {
+  display: grid;
+  min-width: 0;
+}
+
+[frItemHeader],
+frame-item-header {
+  gap: var(--frame-item-header-gap);
+}
+
+[frItemFooter],
+frame-item-footer {
+  gap: var(--frame-item-footer-gap);
+}
+
+[frItemMedia],
+frame-item-media {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--frame-item-media-size);
+  block-size: var(--frame-item-media-size);
+  border-radius: var(--frame-item-media-radius);
+  color: var(--frame-item-media-color);
+  overflow: hidden;
+}
+
+[frItemMedia][data-variant='icon'],
+frame-item-media[data-variant='icon'] {
+  background: var(--frame-item-media-bg);
+}
+
+[frItemMedia][data-variant='image'],
+frame-item-media[data-variant='image'],
+[frItemMedia][data-variant='avatar'],
+frame-item-media[data-variant='avatar'] {
+  background: transparent;
+}
+
+[frItemMedia] > ng-icon,
+frame-item-media > ng-icon,
+[frItemMedia] > svg,
+frame-item-media > svg {
+  inline-size: var(--frame-item-media-icon-size);
+  block-size: var(--frame-item-media-icon-size);
+}
+
+[frItemMedia] img,
+frame-item-media img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+[frItemContent],
+frame-item-content {
+  display: grid;
+  flex: 1 1 auto;
+  gap: var(--frame-item-content-gap);
+  min-width: 0;
+}
+
+[frItemTitle],
+frame-item-title {
+  color: var(--frame-item-title-color);
+  font-size: var(--frame-item-title-font-size);
+  font-weight: var(--frame-item-title-font-weight);
+  line-height: 1.25;
+  margin: 0;
+}
+
+[frItemDescription],
+frame-item-description {
+  color: var(--frame-item-description-color);
+  font-size: var(--frame-item-description-font-size);
+  line-height: 1.45;
+  margin: 0;
+}
+
+[frItemActions],
+frame-item-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--frame-item-actions-gap);
+  margin-inline-start: auto;
+}

package/modal/src/styles/modal.css

@@ -17,7 +17,7 @@
 .frame-modal__panel {
   position: relative;
   display: flex;
-  max-height: min(calc(100dvh - 2rem), 42rem);
+  max-height: 80dvh;
   width: min(calc(100vw - 2rem), 32rem);
   flex-direction: column;
   gap: var(--frame-modal-gap);
@@ -72,6 +72,10 @@
   min-height: 0;
 }
 
+.frame-modal__panel[data-confirm-modal] {
+  gap: 0;
+}
+
 .frame-modal__header,
 .frame-modal__body,
 .frame-modal__footer {
@@ -93,6 +97,7 @@
   min-height: 0;
   flex: 0 1 auto;
   gap: 1rem;
+  overflow-y: auto;
 }
 
 .frame-modal__panel[data-scrollable] .frame-modal__body {
@@ -113,6 +118,10 @@
   padding-block-end: var(--frame-modal-padding);
 }
 
+.frame-modal__panel[data-confirm-modal] .frame-modal__footer {
+  border-block-start: 0;
+}
+
 .frame-modal__panel[data-sticky-footer] .frame-modal__footer {
   flex: 0 0 auto;
   border-block-start: 1px solid var(--frame-modal-border);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-ui-ng/components",
-  "version": "0.3.0-beta.0",
+  "version": "0.4.1",
   "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.3.0-beta.0",
+    "@frame-ui-ng/foundation": "0.4.1",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -108,6 +108,14 @@
       "types": "./types/frame-ui-ng-components-command.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-command.mjs"
     },
+    "./confirm-modal": {
+      "types": "./types/frame-ui-ng-components-confirm-modal.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-confirm-modal.mjs"
+    },
+    "./confirm-popover": {
+      "types": "./types/frame-ui-ng-components-confirm-popover.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-confirm-popover.mjs"
+    },
     "./context-menu": {
       "types": "./types/frame-ui-ng-components-context-menu.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-context-menu.mjs"
@@ -116,6 +124,10 @@
       "types": "./types/frame-ui-ng-components-date-picker.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-date-picker.mjs"
     },
+    "./drag-drop": {
+      "types": "./types/frame-ui-ng-components-drag-drop.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-drag-drop.mjs"
+    },
     "./dropdown-menu": {
       "types": "./types/frame-ui-ng-components-dropdown-menu.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-dropdown-menu.mjs"
@@ -236,6 +248,10 @@
       "types": "./types/frame-ui-ng-components-tooltip.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-tooltip.mjs"
     },
+    "./utils": {
+      "types": "./types/frame-ui-ng-components-utils.d.ts",
+      "default": "./fesm2022/frame-ui-ng-components-utils.mjs"
+    },
     "./virtual-scroll": {
       "types": "./types/frame-ui-ng-components-virtual-scroll.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-virtual-scroll.mjs"

package/popover/src/styles/popover.css

@@ -1,101 +1,106 @@
-@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);
-  }
-}
+@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],
+.frame-popover__header {
+  display: grid;
+  gap: var(--frame-popover-header-gap);
+}
+
+[frPopoverTitle],
+.frame-popover__title {
+  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],
+.frame-popover__description {
+  margin: 0;
+  color: var(--frame-popover-description-color);
+  font-size: var(--frame-popover-description-font-size);
+  line-height: 1.45;
+}
+
+[frPopoverBody],
+.frame-popover__body {
+  display: grid;
+  gap: var(--frame-popover-body-gap);
+}
+
+[frPopoverFooter],
+.frame-popover__footer {
+  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);
+  }
+}