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

package/button/src/styles/button.css

@@ -29,7 +29,7 @@
   --frame-spinner-indicator-color: currentColor;
   position: relative;
   display: inline-flex;
-  min-width: 2rem;
+  min-width: fit-content;
   min-height: var(--frame-button-root-height, 2.5rem);
   align-items: center;
   justify-content: center;
@@ -81,8 +81,15 @@
   transition: opacity 150ms ease;
 }
 
+:root[data-frame-corner-handles='false'] .frame-button::before {
+  content: none;
+}
+
 .frame-icon-button {
   inline-size: var(--frame-button-root-height, 2.5rem);
+  min-inline-size: var(--frame-button-root-height, 2.5rem);
+  block-size: var(--frame-button-root-height, 2.5rem);
+  min-block-size: var(--frame-button-root-height, 2.5rem);
   padding-inline: 0;
   flex: 0 0 auto;
 }
@@ -157,9 +164,16 @@
 .frame-button:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
   opacity: var(--frame-button-root-disabled-opacity, 0.55);
+  filter: none;
+  transform: none;
+  transition: none;
   /* box-shadow: var(--frame-button-root-disabled-shadow, none); */
 }
 
+.frame-button:where(:disabled, [data-disabled])::before {
+  transition: none;
+}
+
 .frame-button[data-appearance='outline'] {
   --frame-button-root-bg: var(--frame-surface);
   --frame-button-root-border: var(--frame-border);
@@ -191,19 +205,21 @@
   opacity: 0;
 }
 
-.frame-button[data-appearance='ghost']:hover::before,
+.frame-button[data-appearance='ghost']:where(:not(:disabled, [data-disabled])):hover::before,
 .frame-button[data-appearance='ghost']:focus-visible::before {
   opacity: 1;
 }
 
 .frame-button[data-size='sm'] {
-  min-height: 2rem;
+  --frame-button-root-height: 2rem;
+  min-height: var(--frame-button-root-height);
   padding-inline: 0.75rem;
   font-size: 0.8125rem;
 }
 
 .frame-button[data-size='lg'] {
-  min-height: 2.75rem;
+  --frame-button-root-height: 2.75rem;
+  min-height: var(--frame-button-root-height);
   padding-inline: 1.25rem;
   font-size: 0.9375rem;
 }

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

@@ -90,6 +90,12 @@ frame-button-group::before {
   pointer-events: none;
 }
 
+:root[data-frame-corner-handles='false'] .frame-button-group::before,
+:root[data-frame-corner-handles='false'] [frButtonGroup]::before,
+:root[data-frame-corner-handles='false'] frame-button-group::before {
+  content: none;
+}
+
 .frame-button-group > .frame-button::before,
 .frame-button-group > [frButton]::before,
 [frButtonGroup] > .frame-button::before,

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

@@ -5,7 +5,7 @@
   --frame-dropdown-menu-panel-color: var(--frame-surface-foreground);
   --frame-dropdown-menu-panel-border: var(--frame-border);
   --frame-dropdown-menu-panel-shadow: var(--frame-shadow-md);
-  --frame-dropdown-menu-panel-padding: 0.75rem;
+  --frame-dropdown-menu-panel-padding: 0.25rem;
   --frame-dropdown-menu-label-color: var(--frame-muted-foreground);
   --frame-dropdown-menu-label-font-size: 0.75rem;
   --frame-dropdown-menu-label-font-weight: 600;

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

@@ -1,87 +1,87 @@
-.frame-dropdown-menu__item,
-.frame-dropdown-menu__label {
-  display: flex;
-  align-items: center;
-  column-gap: var(--frame-dropdown-menu-item-gap);
-  min-height: var(--frame-dropdown-menu-item-height);
-  border-radius: var(--frame-dropdown-menu-item-radius);
-  padding: var(--frame-dropdown-menu-item-padding);
-  font-size: var(--frame-dropdown-menu-item-font-size);
-  line-height: 1.25;
-  box-sizing: border-box;
-}
-
-.frame-dropdown-menu__label {
-  font-size: var(--frame-dropdown-menu-label-font-size);
-}
-
-.frame-dropdown-menu__item {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: default;
-  text-align: left;
-  text-decoration: none;
-}
-
-.frame-dropdown-menu__item:hover,
-.frame-dropdown-menu__item:focus-visible,
-.frame-dropdown-menu__sub-trigger[data-state='open'] {
-  background: var(--frame-dropdown-menu-item-hover-bg);
-  color: var(--frame-dropdown-menu-item-hover-color);
-  outline: none;
-}
-
-.frame-dropdown-menu__item[disabled],
-.frame-dropdown-menu__item[aria-disabled='true'] {
-  opacity: var(--frame-dropdown-menu-item-disabled-opacity);
-  pointer-events: none;
-}
-
-.frame-dropdown-menu__item[data-variant='destructive'] {
-  color: var(--frame-dropdown-menu-item-destructive-color);
-}
-
-.frame-dropdown-menu__item[data-variant='destructive']:hover,
-.frame-dropdown-menu__item[data-variant='destructive']:focus-visible,
-.frame-dropdown-menu__item[data-variant='destructive'].frame-dropdown-menu__sub-trigger[data-state='open'] {
-  background: var(--frame-dropdown-menu-item-destructive-hover-bg);
-  color: var(--frame-dropdown-menu-item-destructive-hover-color);
-}
-
-.frame-dropdown-menu__item[data-inset],
-.frame-dropdown-menu__label[data-inset] {
-  padding-left: var(--frame-dropdown-menu-item-inset-padding);
-}
-
-.frame-dropdown-menu__shortcut {
-  margin-left: auto;
-  padding-left: var(--frame-dropdown-menu-shortcut-gap);
-  color: var(--frame-dropdown-menu-shortcut-color);
-  font-size: var(--frame-dropdown-menu-shortcut-font-size);
-  line-height: 1.25;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-
-.frame-dropdown-menu__indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--frame-dropdown-menu-indicator-size);
-  height: var(--frame-dropdown-menu-indicator-size);
-  color: inherit;
-}
-
-.frame-dropdown-menu__checkbox-item:not([data-checked]) .frame-dropdown-menu__indicator,
-.frame-dropdown-menu__radio-item:not([data-checked]) .frame-dropdown-menu__indicator {
-  opacity: 0;
-}
-
-.frame-dropdown-menu__sub-trigger::after {
-  content: '›';
-  margin-left: auto;
-  padding-left: var(--frame-dropdown-menu-shortcut-gap);
-  color: var(--frame-dropdown-menu-shortcut-color);
-}
+.frame-dropdown-menu__item,
+.frame-dropdown-menu__label {
+  display: flex;
+  align-items: center;
+  column-gap: var(--frame-dropdown-menu-item-gap);
+  min-height: var(--frame-dropdown-menu-item-height);
+  border-radius: var(--frame-dropdown-menu-item-radius);
+  padding: var(--frame-dropdown-menu-item-padding);
+  font-size: var(--frame-dropdown-menu-item-font-size);
+  line-height: 1.25;
+  box-sizing: border-box;
+}
+
+.frame-dropdown-menu__label {
+  font-size: var(--frame-dropdown-menu-label-font-size);
+}
+
+.frame-dropdown-menu__item {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  text-decoration: none;
+}
+
+.frame-dropdown-menu__item:hover,
+.frame-dropdown-menu__item:focus-visible,
+.frame-dropdown-menu__sub-trigger[data-state='open'] {
+  background: var(--frame-dropdown-menu-item-hover-bg);
+  color: var(--frame-dropdown-menu-item-hover-color);
+  outline: none;
+}
+
+.frame-dropdown-menu__item[disabled],
+.frame-dropdown-menu__item[aria-disabled='true'] {
+  opacity: var(--frame-dropdown-menu-item-disabled-opacity);
+  pointer-events: none;
+}
+
+.frame-dropdown-menu__item[data-variant='destructive'] {
+  color: var(--frame-dropdown-menu-item-destructive-color);
+}
+
+.frame-dropdown-menu__item[data-variant='destructive']:hover,
+.frame-dropdown-menu__item[data-variant='destructive']:focus-visible,
+.frame-dropdown-menu__item[data-variant='destructive'].frame-dropdown-menu__sub-trigger[data-state='open'] {
+  background: var(--frame-dropdown-menu-item-destructive-hover-bg);
+  color: var(--frame-dropdown-menu-item-destructive-hover-color);
+}
+
+.frame-dropdown-menu__item[data-inset],
+.frame-dropdown-menu__label[data-inset] {
+  padding-left: var(--frame-dropdown-menu-item-inset-padding);
+}
+
+.frame-dropdown-menu__shortcut {
+  margin-left: auto;
+  padding-left: var(--frame-dropdown-menu-shortcut-gap);
+  color: var(--frame-dropdown-menu-shortcut-color);
+  font-size: var(--frame-dropdown-menu-shortcut-font-size);
+  line-height: 1.25;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.frame-dropdown-menu__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--frame-dropdown-menu-indicator-size);
+  height: var(--frame-dropdown-menu-indicator-size);
+  color: inherit;
+}
+
+.frame-dropdown-menu__checkbox-item:not([data-checked]) .frame-dropdown-menu__indicator,
+.frame-dropdown-menu__radio-item:not([data-checked]) .frame-dropdown-menu__indicator {
+  opacity: 0;
+}
+
+.frame-dropdown-menu__sub-trigger::after {
+  content: '›';
+  margin-left: auto;
+  padding-left: var(--frame-dropdown-menu-shortcut-gap);
+  color: var(--frame-dropdown-menu-shortcut-color);
+}