@frame-ui-ng/components 0.5.1-beta.0 → 0.6.0-beta.0

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

@@ -93,7 +93,6 @@ frame-input-group-addon:has(> .frame-button) {
 .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;
@@ -101,12 +100,6 @@ frame-input-group-addon > .frame-button {
   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 {

package/input/src/styles/input.css

@@ -24,29 +24,6 @@ frame-input-control {
   width: 100%;
 }
 
-[frInputControl]::before,
-frame-input-control::before {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: var(--frame-input-root-radius);
-  background:
-    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
-      left var(--frame-frame-tick-inset, 0.25rem) top var(--frame-frame-tick-inset, 0.25rem) /
-      var(--frame-frame-tick-size, 0.5rem) 1px no-repeat,
-    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
-      left var(--frame-frame-tick-inset, 0.25rem) top var(--frame-frame-tick-inset, 0.25rem) / 1px
-      var(--frame-frame-tick-size, 0.5rem) no-repeat,
-    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
-      right var(--frame-frame-tick-inset, 0.25rem) bottom var(--frame-frame-tick-inset, 0.25rem) /
-      var(--frame-frame-tick-size, 0.5rem) 1px no-repeat,
-    linear-gradient(var(--frame-input-frame-color), var(--frame-input-frame-color))
-      right var(--frame-frame-tick-inset, 0.25rem) bottom var(--frame-frame-tick-inset, 0.25rem) / 1px
-      var(--frame-frame-tick-size, 0.5rem) no-repeat;
-  pointer-events: none;
-  content: '';
-}
-
 [frInputFieldGroup],
 frame-input-field-group {
   display: grid;

package/modal/src/styles/modal.css

@@ -30,25 +30,6 @@
   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);
 }
@@ -176,6 +157,11 @@
   transform: scale(0.96);
 }
 
+.frame-modal__close svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .frame-modal__close:focus-visible,
 .frame-modal__close-control:focus-visible {
   outline: 2px solid var(--frame-ring, currentColor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-ui-ng/components",
-  "version": "0.5.1-beta.0",
+  "version": "0.6.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.5.1-beta.0",
+    "@frame-ui-ng/foundation": "0.6.0-beta.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {
@@ -41,9 +41,9 @@
       "style": "./styles/components.css",
       "default": "./styles/components.css"
     },
-    "./styles/blueprint.css": {
-      "style": "./styles/blueprint.css",
-      "default": "./styles/blueprint.css"
+    "./styles/corner-handles.css": {
+      "style": "./styles/corner-handles.css",
+      "default": "./styles/corner-handles.css"
     },
     "./package.json": {
       "default": "./package.json"
@@ -260,7 +260,7 @@
   "sideEffects": [
     "./styles.css",
     "./styles/components.css",
-    "./styles/blueprint.css"
+    "./styles/corner-handles.css"
   ],
   "module": "fesm2022/frame-ui-ng-components.mjs",
   "typings": "types/frame-ui-ng-components.d.ts",

package/pagination/src/styles/pagination.css

@@ -134,8 +134,12 @@ nav[frPagination] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.25em;
-  line-height: 0.75;
+  line-height: 1;
+}
+
+.frame-pagination__control-icon svg {
+  inline-size: 1em;
+  block-size: 1em;
 }
 
 [dir='rtl'] .frame-pagination__previous .frame-pagination__control-icon,

package/popover/src/styles/popover.css

@@ -16,9 +16,9 @@ frame-popover {
   background: transparent;
 }
 
-.frame-popover__content {
-  display: grid;
-  gap: var(--frame-popover-content-gap);
+.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);

package/select/src/styles/select-item.css

@@ -1,69 +1,68 @@
-.frame-select__group,
-[frSelectGroup],
-frame-select-group {
-  display: grid;
-  gap: var(--frame-select-group-gap);
-}
-
-.frame-select__item {
-  position: relative;
-  padding-inline-start: var(--frame-select-item-padding-start);
-}
-
-.frame-select__item[data-indicator-position='end'] {
-  padding-inline-start: var(--frame-select-item-padding-inline);
-  padding-inline-end: var(--frame-select-item-padding-end);
-}
-
-.frame-select__item::before,
-.frame-select__item::after {
-  position: absolute;
-  inset-block-start: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--frame-select-item-indicator-size);
-  block-size: var(--frame-select-item-indicator-size);
-  color: currentColor;
-  font-size: var(--frame-select-item-indicator-font-size);
-  font-weight: 700;
-  line-height: 1;
-  opacity: 0;
-  transform: translateY(-50%);
-}
-
-.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='start']::before {
-  content: '✓';
-  inset-inline-start: var(--frame-select-item-indicator-offset);
-  opacity: 1;
-}
-
-.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='end']::after {
-  content: '✓';
-  inset-inline-end: var(--frame-select-item-indicator-offset);
-  opacity: 1;
-}
-
-.frame-select__item-indicator {
-  position: absolute;
-  inset-block-start: 50%;
-  display: inline-flex;
-  align-items: center;
+.frame-select__group,
+[frSelectGroup],
+frame-select-group {
+  display: grid;
+  gap: var(--frame-select-group-gap);
+}
+
+.frame-select__item {
+  position: relative;
+  padding-inline-start: var(--frame-select-item-padding-start);
+}
+
+.frame-select__item[data-indicator-position='end'] {
+  padding-inline-start: var(--frame-select-item-padding-inline);
+  padding-inline-end: var(--frame-select-item-padding-end);
+}
+
+.frame-select__item::before,
+.frame-select__item::after {
+  position: absolute;
+  inset-block-start: 50%;
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
-  width: var(--frame-select-item-indicator-size);
-  height: var(--frame-select-item-indicator-size);
-  opacity: 0;
-  transform: translateY(-50%);
-}
-
-.frame-select__item[data-indicator-position='start'] .frame-select__item-indicator {
-  inset-inline-start: var(--frame-select-item-indicator-offset);
-}
-
-.frame-select__item[data-indicator-position='end'] .frame-select__item-indicator {
-  inset-inline-end: var(--frame-select-item-indicator-offset);
-}
-
-.frame-select__item[data-state='checked'] .frame-select__item-indicator {
-  opacity: 1;
-}
+  inline-size: var(--frame-select-item-indicator-size);
+  block-size: var(--frame-select-item-indicator-size);
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E") center / contain no-repeat;
+  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='start']::before {
+  content: '';
+  inset-inline-start: var(--frame-select-item-indicator-offset);
+  opacity: 1;
+}
+
+.frame-select__item[data-state='checked']:not([data-has-custom-indicator])[data-indicator-position='end']::after {
+  content: '';
+  inset-inline-end: var(--frame-select-item-indicator-offset);
+  opacity: 1;
+}
+
+.frame-select__item-indicator {
+  position: absolute;
+  inset-block-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--frame-select-item-indicator-size);
+  height: var(--frame-select-item-indicator-size);
+  opacity: 0;
+  transform: translateY(-50%);
+}
+
+.frame-select__item[data-indicator-position='start'] .frame-select__item-indicator {
+  inset-inline-start: var(--frame-select-item-indicator-offset);
+}
+
+.frame-select__item[data-indicator-position='end'] .frame-select__item-indicator {
+  inset-inline-end: var(--frame-select-item-indicator-offset);
+}
+
+.frame-select__item[data-state='checked'] .frame-select__item-indicator {
+  opacity: 1;
+}

package/sheet/src/styles/sheet.css

@@ -10,19 +10,25 @@
 }
 
 .frame-sheet__overlay-pane {
-  pointer-events: auto;
+  max-width: 100vw;
+  max-height: 100dvh;
+  pointer-events: none;
 }
 
 .frame-sheet__overlay-pane .cdk-dialog-container {
-  display: contents;
+  display: block;
+  width: 100%;
+  height: 100%;
   outline: none;
 }
 
 .frame-sheet__panel {
-  position: fixed;
+  position: relative;
   z-index: var(--frame-sheet-z-index);
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
   gap: var(--frame-sheet-gap);
   overflow: hidden;
   border: 1px solid var(--frame-sheet-border);
@@ -30,42 +36,39 @@
   background: var(--frame-sheet-bg);
   box-shadow: var(--frame-sheet-shadow);
   color: var(--frame-sheet-color);
+  pointer-events: auto;
 }
 
-.frame-sheet__panel[data-side="right"],
-.frame-sheet__panel[data-side="left"] {
-  inset-block: 0;
-  inline-size: var(--frame-sheet-inline-size);
+.frame-sheet__overlay-pane--right,
+.frame-sheet__overlay-pane--left {
+  width: var(--frame-sheet-inline-size);
+  height: 100dvh;
   max-inline-size: 100vw;
 }
 
+.frame-sheet__overlay-pane--top,
+.frame-sheet__overlay-pane--bottom {
+  width: 100vw;
+  height: var(--frame-sheet-block-size);
+  max-block-size: 100dvh;
+}
+
 .frame-sheet__panel[data-side="right"] {
-  inset-inline-end: 0;
   border-inline-end: 0;
   animation: frame-sheet-enter-right 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .frame-sheet__panel[data-side="left"] {
-  inset-inline-start: 0;
   border-inline-start: 0;
   animation: frame-sheet-enter-left 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.frame-sheet__panel[data-side="top"],
-.frame-sheet__panel[data-side="bottom"] {
-  inset-inline: 0;
-  block-size: var(--frame-sheet-block-size);
-  max-block-size: 100dvh;
-}
-
 .frame-sheet__panel[data-side="top"] {
-  inset-block-start: 0;
   border-block-start: 0;
   animation: frame-sheet-enter-top 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .frame-sheet__panel[data-side="bottom"] {
-  inset-block-end: 0;
   border-block-end: 0;
   animation: frame-sheet-enter-bottom 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
@@ -156,6 +159,11 @@
   transform: scale(0.96);
 }
 
+.frame-sheet__close svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .frame-sheet__close:focus-visible,
 .frame-sheet__close-control:focus-visible {
   outline: 2px solid var(--frame-ring, currentColor);
@@ -165,7 +173,12 @@
 @media (max-width: 640px) {
   .frame-sheet__panel[data-side="right"],
   .frame-sheet__panel[data-side="left"] {
-    inline-size: min(100vw, var(--frame-sheet-inline-size));
+    width: 100%;
+  }
+
+  .frame-sheet__overlay-pane--right,
+  .frame-sheet__overlay-pane--left {
+    width: min(100vw, var(--frame-sheet-inline-size));
   }
 
   .frame-sheet__footer {

package/src/styles/components.css

@@ -1,5 +1,5 @@
-@import '../../alert/src/styles/alert.css';
 @import '../../accordion/src/styles/accordion.css';
+@import '../../alert/src/styles/alert.css';
 @import '../../avatar/src/styles/avatar.css';
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
@@ -46,4 +46,4 @@
 @import '../../toast/src/styles/toast.css';
 @import '../../virtual-scroll/src/styles/virtual-scroll.css';
 @import '../../badge/src/styles/badge.css';
-@import './blueprint.css';
+@import './corner-handles.css';

package/src/styles/corner-handles.css

@@ -0,0 +1,217 @@
+/*
+ * Shared corner-handle renderer.
+ * Components opt in by applying `.frame-corner-handles`.
+ */
+
+.frame-corner-handles {
+  position: relative;
+}
+
+.frame-corner-handles::before {
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  position: absolute;
+  display: block;
+  inset: var(--frame-corner-handle-offset);
+  z-index: 1;
+  border-radius: inherit;
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left top,
+    left top,
+    right bottom,
+    right bottom;
+  background-repeat: no-repeat;
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+  content: "";
+  pointer-events: none;
+}
+
+:root[data-frame-corner-handles='false'] .frame-corner-handles::before {
+  content: none;
+}
+
+.frame-button.frame-corner-handles::before {
+  content: none;
+}
+
+.frame-button.frame-corner-handles {
+  --frame-corner-handle-color: color-mix(in srgb, var(--frame-primary-foreground) 88%, transparent);
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset);
+  background-repeat: no-repeat;
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+}
+
+.frame-button.frame-corner-handles.frame-carousel__control {
+  position: absolute;
+}
+
+:root[data-frame-corner-handles='false'] .frame-button.frame-corner-handles {
+  background-image: none;
+}
+
+.frame-button.frame-corner-handles[data-appearance='outline'],
+.frame-button.frame-corner-handles[data-appearance='ghost'] {
+  --frame-corner-handle-color: var(--frame-frame-accent);
+}
+
+.frame-button.frame-corner-handles[data-appearance='ghost'] {
+  --frame-corner-handle-size: 0px;
+}
+
+.frame-button.frame-corner-handles[data-appearance='ghost']:where(:not(:disabled, [data-disabled])):hover,
+.frame-button.frame-corner-handles[data-appearance='ghost']:focus-visible {
+  --frame-corner-handle-size: var(--frame-frame-tick-size, 0.375rem);
+}
+
+.frame-button-group.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-button-group-radius);
+}
+
+.frame-button-group > .frame-button.frame-corner-handles,
+.frame-button-group > [frButton].frame-corner-handles,
+[frButtonGroup] > .frame-button.frame-corner-handles,
+[frButtonGroup] > [frButton].frame-corner-handles,
+frame-button-group > .frame-button.frame-corner-handles,
+frame-button-group > [frButton].frame-corner-handles,
+.frame-input-group__addon > .frame-button.frame-corner-handles,
+[frInputGroupAddon] > .frame-button.frame-corner-handles,
+frame-input-group-addon > .frame-button.frame-corner-handles {
+  --frame-corner-handle-size: 0;
+}
+
+[frInputControl].frame-corner-handles,
+frame-input-control.frame-corner-handles {
+  --frame-corner-handle-color: var(--frame-input-frame-color);
+  --frame-corner-handle-inset: var(--frame-frame-tick-inset, 0.25rem);
+  --frame-corner-handle-radius: var(--frame-input-root-radius);
+}
+
+.frame-popover__content.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-popover-content-radius);
+}
+
+.frame-sheet__panel.frame-corner-handles {
+  --frame-corner-handle-radius: var(--frame-sheet-radius);
+}
+
+.frame-corner-handles:where(
+  .frame-table-container,
+  .frame-table-virtual,
+  .frame-virtual-scroll__viewport,
+  .frame-virtual-scroll__list,
+  .frame-combobox__panel,
+  .frame-dropdown-menu__content,
+  .frame-navigation-menu__viewport,
+  .frame-select__content
+)::before,
+.frame-corner-handles.frame-tabs__list[data-variant='line']::before,
+.frame-date-picker__content .frame-calendar::before {
+  content: none;
+}
+
+.frame-corner-handles:where(
+  .frame-table-container,
+  .frame-table-virtual,
+  .frame-virtual-scroll__viewport,
+  .frame-virtual-scroll__list,
+  .frame-combobox__panel,
+  .frame-navigation-menu__viewport
+) {
+  --frame-corner-handle-offset: var(--frame-corner-handle-inset, 0px);
+  --frame-corner-handle-active-size: var(
+    --frame-corner-handle-size,
+    var(--frame-frame-tick-size, 0.375rem)
+  );
+  background-image:
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent))),
+    linear-gradient(var(--frame-corner-handle-color, var(--frame-frame-accent)), var(--frame-corner-handle-color, var(--frame-frame-accent)));
+  background-position:
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    left var(--frame-corner-handle-offset) top var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset),
+    right var(--frame-corner-handle-offset) bottom var(--frame-corner-handle-offset);
+  background-size:
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size),
+    var(--frame-corner-handle-active-size) 1px,
+    1px var(--frame-corner-handle-active-size);
+  background-repeat: no-repeat;
+  background-attachment: local;
+}
+
+:root[data-frame-corner-handles='false']
+  .frame-corner-handles:where(
+    .frame-table-container,
+    .frame-table-virtual,
+    .frame-virtual-scroll__viewport,
+    .frame-virtual-scroll__list,
+    .frame-combobox__panel,
+    .frame-navigation-menu__viewport
+  ) {
+  background-image: none;
+}
+
+:where(
+  .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
+) :where(.frame-corner-handles) {
+  --frame-corner-handle-inset: 0px;
+}
+
+:where(
+  .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-corner-handle-inset: 0.5rem;
+}
+
+.frame-tooltip__content.frame-corner-handles {
+  --frame-corner-handle-inset: 0.125rem;
+}

package/styles/components.css

@@ -1,5 +1,5 @@
-@import '../../alert/src/styles/alert.css';
 @import '../../accordion/src/styles/accordion.css';
+@import '../../alert/src/styles/alert.css';
 @import '../../avatar/src/styles/avatar.css';
 @import '../../button/src/styles/button.css';
 @import '../../button-group/src/styles/button-group.css';
@@ -46,4 +46,4 @@
 @import '../../toast/src/styles/toast.css';
 @import '../../virtual-scroll/src/styles/virtual-scroll.css';
 @import '../../badge/src/styles/badge.css';
-@import './blueprint.css';
+@import './corner-handles.css';