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

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.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.3.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/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;

package/src/styles/blueprint.css

@@ -657,3 +657,101 @@
 .frame-tooltip__content {
   --frame-blueprint-corner-inset: 0.125rem;
 }
+
+:root[data-frame-corner-handles='false']
+  :where(
+    [frAccordion],
+    [frAlert],
+    frame-alert,
+    [frAvatar],
+    frame-avatar,
+    [frBadge],
+    frame-badge,
+    [frBreadcrumb],
+    frame-breadcrumb,
+    [frCalendar],
+    frame-calendar,
+    [frCard],
+    frame-card,
+    [frCheckbox],
+    frame-checkbox,
+    [frCombobox],
+    [frCommand],
+    [frCommandInput],
+    [frCommandItem],
+    [frCommandList],
+    [frCommandGroup],
+    [frCommandFooter],
+    frame-command,
+    frame-command-input,
+    frame-command-item,
+    frame-command-list,
+    frame-command-group,
+    frame-command-footer,
+    [frInput],
+    frame-input,
+    [frInputGroup],
+    frame-input-group,
+    [frItem],
+    frame-item,
+    [frProgress],
+    frame-progress,
+    [frRadioGroup],
+    frame-radio-group,
+    [frSelect],
+    [frSeparator],
+    frame-separator,
+    [frSkeleton],
+    frame-skeleton,
+    [frSlider],
+    frame-slider,
+    [frSwitch],
+    frame-switch,
+    [frTable],
+    [frTableContainer],
+    [frTableVirtual],
+    frame-table,
+    frame-table-container,
+    frame-table-virtual,
+    [frTabsList],
+    frame-tabs-list,
+    [frToggle],
+    frame-toggle,
+    [frVirtualViewport],
+    frame-virtual-viewport,
+    [frVirtualList],
+    frame-virtual-list,
+    frame-input-otp,
+    .frame-button,
+    .frame-button-group,
+    [frButtonGroup],
+    frame-button-group,
+    .frame-combobox__panel,
+    .frame-date-picker__content,
+    .frame-dropdown-menu__content,
+    .frame-hover-card__content,
+    .frame-modal__panel,
+    .frame-navigation-menu__viewport,
+    .frame-popover__content,
+    .frame-sheet__panel,
+    .frame-toast,
+    .frame-tooltip__content
+  )::before {
+  content: none;
+}
+
+:root[data-frame-corner-handles='false']
+  :where(
+    [frTableContainer],
+    frame-table-container,
+    [frTableVirtual],
+    frame-table-virtual,
+    [frVirtualViewport],
+    frame-virtual-viewport,
+    [frVirtualList],
+    frame-virtual-list,
+    .frame-combobox__panel,
+    .frame-navigation-menu__viewport
+  ) {
+  background-image: none;
+}

package/src/styles/components.css

@@ -4,10 +4,10 @@
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
 @import '../../breadcrumb/src/styles/breadcrumb.css';
-@import '../../calendar/src/styles/calendar.css';
-@import '../../card/src/styles/card.css';
-@import '../../carousel/src/styles/carousel.css';
-@import '../../checkbox/src/styles/checkbox.css';
+@import '../../calendar/src/styles/calendar.css';
+@import '../../card/src/styles/card.css';
+@import '../../carousel/src/styles/carousel.css';
+@import '../../checkbox/src/styles/checkbox.css';
 @import '../../collapsible/src/styles/collapsible.css';
 @import '../../command/src/styles/command.css';
 @import '../../combobox/src/styles/combobox.css';