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

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

@@ -83,6 +83,36 @@ frame-input-group-addon {
   white-space: nowrap;
 }
 
+.frame-input-group__addon:has(> .frame-button),
+[frInputGroupAddon]:has(> .frame-button),
+frame-input-group-addon:has(> .frame-button) {
+  align-items: stretch;
+  padding-inline: 0;
+}
+
+.frame-input-group__addon > .frame-button,
+[frInputGroupAddon] > .frame-button,
+frame-input-group-addon > .frame-button {
+  --frame-button-root-corner-size: 0;
+  block-size: 100%;
+  min-block-size: 100%;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.frame-input-group__addon > .frame-button::before,
+[frInputGroupAddon] > .frame-button::before,
+frame-input-group-addon > .frame-button::before {
+  display: none;
+}
+
+.frame-input-group__addon > .frame-button:focus-visible,
+[frInputGroupAddon] > .frame-button:focus-visible,
+frame-input-group-addon > .frame-button:focus-visible {
+  outline-offset: -2px;
+}
+
 .frame-input-group:has([frInputGroupInput]:disabled) .frame-input-group__addon,
 .frame-input-group:has([frInputGroupInput]:disabled) [frInputGroupAddon],
 [frInputGroup]:has([frInputGroupInput]:disabled) .frame-input-group__addon,
@@ -104,6 +134,26 @@ frame-input-group-addon[data-align='inline-end'] {
   border-inline-start: 1px solid var(--frame-input-group-addon-border);
 }
 
+.frame-input-group__addon[data-variant='ghost'],
+[frInputGroupAddon][data-variant='ghost'],
+frame-input-group-addon[data-variant='ghost'] {
+  min-inline-size: auto;
+  border-inline: 0;
+  background: transparent;
+}
+
+.frame-input-group__addon[data-align='inline-start'][data-variant='ghost'],
+[frInputGroupAddon][data-align='inline-start'][data-variant='ghost'],
+frame-input-group-addon[data-align='inline-start'][data-variant='ghost'] {
+  padding-inline-end: 0;
+}
+
+.frame-input-group__addon[data-align='inline-end'][data-variant='ghost'],
+[frInputGroupAddon][data-align='inline-end'][data-variant='ghost'],
+frame-input-group-addon[data-align='inline-end'][data-variant='ghost'] {
+  padding-inline-start: 0.25rem;
+}
+
 .frame-input-group__text,
 [frInputGroupText],
 frame-input-group-text {

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.2.0-beta.0",
+  "version": "0.4.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.2.0-beta.0",
+    "@frame-ui-ng/foundation": "0.4.0-beta.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -108,6 +108,10 @@
       "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"
+    },
     "./context-menu": {
       "types": "./types/frame-ui-ng-components-context-menu.d.ts",
       "default": "./fesm2022/frame-ui-ng-components-context-menu.mjs"
@@ -236,6 +240,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/select/src/styles/select-trigger.css

@@ -8,13 +8,6 @@
   --frame-select-trigger-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
   --frame-select-trigger-active-border: var(--frame-select-trigger-hover-border);
   --frame-select-trigger-active-color: var(--frame-select-trigger-hover-color);
-  --frame-select-trigger-corner-color: var(--frame-frame-line-muted);
-  --frame-select-trigger-corner-inset: var(--frame-frame-tick-inset, 0px);
-  --frame-select-trigger-corner-size: clamp(
-    0px,
-    calc((1px - var(--frame-select-trigger-radius, 0px)) * 9999),
-    var(--frame-frame-tick-size, 0.5rem)
-  );
   appearance: none;
   -webkit-appearance: none;
   display: inline-flex;
@@ -25,7 +18,7 @@
   min-height: var(--frame-select-trigger-height);
   min-width: var(--frame-select-trigger-min-width);
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: var(--frame-select-trigger-gap);
   border: 1px solid var(--frame-select-trigger-border);
   border-radius: var(--frame-select-trigger-radius);
@@ -42,7 +35,6 @@
   text-align: left;
   text-decoration: none;
   box-shadow: none;
-  position: relative;
   transition:
     border-color var(--frame-select-trigger-transition-duration) ease,
     box-shadow var(--frame-select-trigger-transition-duration) ease,
@@ -52,27 +44,6 @@
     transform var(--frame-select-trigger-transition-duration) ease;
 }
 
-.frame-select__trigger::before {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background:
-    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
-      left var(--frame-select-trigger-corner-inset) top var(--frame-select-trigger-corner-inset) /
-      var(--frame-select-trigger-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
-      left var(--frame-select-trigger-corner-inset) top var(--frame-select-trigger-corner-inset) / 1px
-      var(--frame-select-trigger-corner-size) no-repeat,
-    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
-      right var(--frame-select-trigger-corner-inset) bottom var(--frame-select-trigger-corner-inset) /
-      var(--frame-select-trigger-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-select-trigger-corner-color), var(--frame-select-trigger-corner-color))
-      right var(--frame-select-trigger-corner-inset) bottom var(--frame-select-trigger-corner-inset) / 1px
-      var(--frame-select-trigger-corner-size) no-repeat;
-  pointer-events: none;
-  content: '';
-}
-
 .frame-select__trigger:where(:not([data-disabled])):hover {
   background: var(--frame-select-trigger-hover-bg);
   border-color: var(--frame-select-trigger-hover-border);
@@ -93,11 +64,6 @@
   box-shadow: none;
 }
 
-.frame-select__trigger:focus-visible,
-.frame-select__trigger[data-state='open'] {
-  --frame-select-trigger-corner-color: var(--frame-frame-accent);
-}
-
 .frame-select__trigger[data-state='open'] {
   background: var(--frame-select-trigger-active-bg);
   border-color: var(--frame-select-trigger-active-border);
@@ -117,6 +83,7 @@
 }
 
 .frame-select__value {
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -133,6 +100,10 @@
   color: var(--frame-muted-foreground);
 }
 
-.frame-select__trigger[data-state='open'] .frame-select__icon {
+.frame-select__icon[data-position='trailing'] {
+  margin-inline-start: auto;
+}
+
+.frame-select__trigger[data-state='open'] .frame-select__icon[data-position='trailing'] {
   transform: rotate(180deg);
 }

package/sidebar/src/styles/sidebar.css

@@ -284,10 +284,10 @@ frame-sidebar-menu-button[data-variant="outline"] {
   border: 1px solid var(--frame-sidebar-border);
 }
 
-[frSidebarMenuButton]:hover,
-frame-sidebar-menu-button:hover,
-[frSidebarMenuSubButton]:hover,
-frame-sidebar-menu-sub-button:hover {
+[frSidebarMenuButton]:not([data-disabled]):hover,
+frame-sidebar-menu-button:not([data-disabled]):hover,
+[frSidebarMenuSubButton]:not([data-disabled]):hover,
+frame-sidebar-menu-sub-button:not([data-disabled]):hover {
   border-color: var(--frame-frame-line-muted);
   background: var(--frame-sidebar-accent);
   color: var(--frame-sidebar-accent-color);
@@ -319,6 +319,7 @@ frame-sidebar-menu-button[data-disabled],
 frame-sidebar-menu-sub-button[data-disabled] {
   cursor: not-allowed;
   opacity: 0.5;
+  transition: none;
 }
 
 [frSidebarMenuButton] > span,
@@ -487,6 +488,11 @@ frame-sidebar[data-side="right"] frame-sidebar-rail {
   inset-inline: -0.375rem auto;
 }
 
+[frSidebar]:not([data-resizable]) [frSidebarRail],
+frame-sidebar:not([data-resizable]) frame-sidebar-rail {
+  cursor: default;
+}
+
 [frSidebarRail]::after,
 frame-sidebar-rail::after {
   position: absolute;