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

package/checkbox/src/styles/checkbox.css

@@ -37,15 +37,20 @@
     border-color 150ms ease,
     box-shadow 150ms ease,
     color 150ms ease,
-    opacity 150ms ease;
+    opacity 150ms ease,
+    transform 150ms ease;
 }
 
 [frCheckbox]::before {
   content: '';
   inline-size: var(--frame-checkbox-indicator-size, 0.625rem);
   block-size: var(--frame-checkbox-indicator-size, 0.625rem);
-  transform: scale(0);
-  transition: transform 120ms ease;
+  opacity: 0;
+  transform: scale(0.65) rotate(-8deg);
+  transform-origin: center;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
   clip-path: polygon(14% 44%, 0 59%, 43% 100%, 100% 18%, 84% 4%, 43% 62%);
   box-shadow: inset 1rem 1rem currentColor;
 }
@@ -53,6 +58,8 @@
 [frCheckbox]:where(:not(:disabled)):hover {
   background: var(--frame-checkbox-root-hover-bg, var(--frame-checkbox-root-bg, var(--frame-surface)));
   border-color: var(--frame-checkbox-root-hover-border, var(--frame-checkbox-root-border, var(--frame-border)));
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
 }
 
 [frCheckbox]:focus-visible {
@@ -72,13 +79,15 @@
 }
 
 [frCheckbox]:checked::before {
-  transform: scale(1);
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
 }
 
 [frCheckbox]:indeterminate::before {
   inline-size: var(--frame-checkbox-indeterminate-width, 0.5rem);
   block-size: var(--frame-checkbox-indeterminate-height, 0.125rem);
-  transform: scale(1);
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
   border-radius: var(--frame-radius-full);
   clip-path: none;
   box-shadow: none;

package/collapsible/src/styles/_vars.css

@@ -1,6 +1,7 @@
 :where(:root) {
   --frame-collapsible-trigger-gap: var(--frame-density-gap-md);
   --frame-collapsible-trigger-color: var(--frame-foreground);
+  --frame-collapsible-trigger-open-color: var(--frame-foreground);
   --frame-collapsible-trigger-disabled-opacity: 0.55;
   --frame-collapsible-content-color: var(--frame-muted-foreground);
   --frame-collapsible-content-font-size: 0.875rem;

package/collapsible/src/styles/collapsible.css

@@ -11,16 +11,16 @@ frame-collapsible {
   color: var(--frame-collapsible-trigger-color, var(--frame-foreground));
   transition:
     color 160ms ease,
-    transform 160ms ease,
     box-shadow 160ms ease;
 }
 
-[frCollapsibleTrigger]:where(:not(:disabled, [data-disabled])):hover,
-[frCollapsibleTrigger]:focus-visible,
 [frCollapsibleTrigger][data-state='open'] {
-  outline: none;
-  transform: translateX(0.25rem);
-  box-shadow: none;
+  color: var(--frame-collapsible-trigger-open-color, var(--frame-collapsible-trigger-color, var(--frame-foreground)));
+}
+
+[frCollapsibleTrigger]:focus-visible {
+  outline: 1px solid var(--frame-ring);
+  outline-offset: 2px;
 }
 
 [frCollapsibleTrigger]:where(:disabled, [data-disabled]) {
@@ -29,27 +29,31 @@ frame-collapsible {
 }
 
 [frCollapsibleContent] {
+  box-sizing: border-box;
   color: var(--frame-collapsible-content-color, var(--frame-muted-foreground));
+  display: flow-root;
   font-size: var(--frame-collapsible-content-font-size, 0.875rem);
   line-height: var(--frame-collapsible-content-line-height, 1.6);
-  overflow: clip;
+  overflow: hidden;
   padding-block-start: 0;
   transition:
     height var(--frame-collapsible-content-transition-duration, 220ms)
       var(--frame-collapsible-content-transition-timing, ease),
     opacity var(--frame-collapsible-content-transition-duration, 220ms)
-      var(--frame-collapsible-content-transition-timing, ease),
-    padding-block-start var(--frame-collapsible-content-transition-duration, 220ms)
       var(--frame-collapsible-content-transition-timing, ease);
   will-change: height, opacity;
 }
 
+[frCollapsibleContent]::after {
+  content: '';
+  display: block;
+  height: var(--frame-collapsible-content-padding-block-start, 0.75rem);
+}
+
 [frCollapsibleContent][data-state='closed'] {
   opacity: var(--frame-collapsible-content-opacity-closed, 0);
-  padding-block-start: 0;
 }
 
 [frCollapsibleContent][data-state='open'] {
   opacity: var(--frame-collapsible-content-opacity-open, 1);
-  padding-block-start: var(--frame-collapsible-content-padding-block-start, 0.75rem);
 }

package/combobox/src/styles/combobox.css

@@ -163,7 +163,6 @@ frame-combobox[data-disabled] .frame-combobox__chips {
 .frame-combobox__item:hover {
   background: var(--frame-accent);
   color: var(--frame-accent-foreground);
-  transform: translateX(0.25rem);
 }
 
 .frame-combobox__item[disabled] {
@@ -172,9 +171,14 @@ frame-combobox[data-disabled] .frame-combobox__chips {
 }
 
 .frame-combobox__item:not(:has([frComboboxItemIndicator], .frame-combobox__item-indicator))::before {
-  content: '✓';
+  content: '';
   position: absolute;
   inset-inline-start: var(--frame-combobox-item-indicator-offset);
+  inline-size: 1rem;
+  block-size: 1rem;
+  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;
 }
 
@@ -264,6 +268,11 @@ frame-combobox[data-disabled] .frame-combobox__chips {
   background: var(--frame-combobox-chip-remove-hover-bg);
 }
 
+.frame-combobox__chip-remove-icon {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
 .frame-combobox__chips-input {
   flex: 1 1 var(--frame-combobox-chips-input-min-width);
   min-inline-size: var(--frame-combobox-chips-input-min-width);

package/confirm-popover/src/styles/confirm-popover.css

@@ -3,7 +3,6 @@
 }
 
 .frame-confirm-popover__content {
-  --frame-blueprint-radius: var(--frame-popover-content-radius);
   gap: var(--frame-confirm-popover-gap, var(--frame-popover-content-gap));
 }
 

package/date-picker/src/styles/date-picker.css

@@ -60,10 +60,17 @@
 .frame-date-picker__icon {
   display: inline-flex;
   flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
   color: var(--frame-date-picker-trigger-placeholder-color);
   line-height: 1;
 }
 
+.frame-date-picker__icon svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .frame-date-picker__trigger-label {
   min-width: 0;
   flex: 1 1 auto;
@@ -147,19 +154,16 @@
   inline-size: calc(var(--frame-calendar-cell-size) * 7);
 }
 
-.frame-date-picker__content .frame-calendar__day {
-  inline-size: var(--frame-calendar-cell-size);
-  block-size: var(--frame-calendar-cell-size);
-}
-
 .frame-date-picker__presets {
-  display: grid;
-  gap: 0.125rem;
-  border-block-end: 1px solid var(--frame-date-picker-presets-border);
+  display: flex;
+  gap: 0.25rem;
+  border-block-start: 1px solid var(--frame-date-picker-presets-border);
+  overflow-x: auto;
   padding: 0.25rem;
 }
 
 .frame-date-picker__preset {
+  flex: 1 0 max-content;
   min-block-size: var(--frame-date-picker-preset-height);
   border: 1px solid transparent;
   border-radius: var(--frame-date-picker-preset-radius);
@@ -168,7 +172,8 @@
   cursor: pointer;
   font: inherit;
   padding-inline: 0.5rem;
-  text-align: start;
+  text-align: center;
+  white-space: nowrap;
   transition:
     background-color 140ms ease,
     border-color 140ms ease,
@@ -181,7 +186,7 @@
   background: var(--frame-date-picker-preset-hover-bg);
   border-color: var(--frame-frame-line-muted, var(--frame-border));
   outline: none;
-  transform: translateX(0.25rem);
+  transform: translateY(-1px);
   box-shadow: none;
 }
 

package/dropdown-menu/src/styles/dropdown-menu-item.css

@@ -80,8 +80,12 @@
 }
 
 .frame-dropdown-menu__sub-trigger::after {
-  content: '›';
+  content: '';
+  inline-size: 1rem;
+  block-size: 1rem;
   margin-left: auto;
   padding-left: var(--frame-dropdown-menu-shortcut-gap);
-  color: var(--frame-dropdown-menu-shortcut-color);
+  background: var(--frame-dropdown-menu-shortcut-color);
+  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%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27/%3E%3C/svg%3E") center / 1rem 1rem 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%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2018%206-6-6-6%27/%3E%3C/svg%3E") center / 1rem 1rem no-repeat;
 }