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

package/toggle/src/styles/toggle.css

@@ -1,110 +1,110 @@
-@import './_vars.css';
-
-[frToggle] {
-  appearance: none;
-  display: inline-flex;
-  min-block-size: var(--frame-toggle-height);
-  align-items: center;
-  justify-content: center;
-  gap: var(--frame-toggle-gap);
-  border: 1px solid var(--frame-toggle-border);
-  border-radius: var(--frame-toggle-radius);
-  background: var(--frame-toggle-bg);
-  color: var(--frame-toggle-color);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--frame-toggle-font-size);
-  font-weight: var(--frame-toggle-font-weight);
-  line-height: 1;
-  padding-block: 0;
-  padding-inline: var(--frame-toggle-padding-x);
-  text-decoration: none;
-  transition:
-    background-color var(--frame-toggle-transition-duration) ease,
-    border-color var(--frame-toggle-transition-duration) ease,
-    box-shadow var(--frame-toggle-transition-duration) ease,
-    color var(--frame-toggle-transition-duration) ease,
-    opacity var(--frame-toggle-transition-duration) ease,
-    transform var(--frame-toggle-transition-duration) ease;
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-[frToggle]:where(:not(:disabled, [data-disabled])):hover {
-  background: var(--frame-toggle-hover-bg);
-  color: var(--frame-toggle-hover-color);
-}
-
-[frToggle]:where(:not(:disabled, [data-disabled])):active {
-  transform: translateY(1px);
-}
-
-[frToggle]:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: var(--frame-toggle-focus-shadow);
-}
-
-[frToggle][data-state='on'] {
-  background: var(--frame-toggle-pressed-bg);
-  color: var(--frame-toggle-pressed-color);
-  box-shadow: var(--frame-toggle-pressed-shadow);
-}
-
-[frToggle][data-variant='outline'] {
-  --frame-toggle-bg: var(--frame-toggle-outline-bg);
-  --frame-toggle-border: var(--frame-toggle-outline-border);
-  --frame-toggle-hover-bg: var(--frame-toggle-outline-hover-bg);
-  --frame-toggle-pressed-bg: var(--frame-toggle-outline-pressed-bg);
-}
-
-[frToggle][data-size='sm'] {
-  --frame-toggle-height: 2rem;
-  --frame-toggle-padding-x: 0.625rem;
-  --frame-toggle-font-size: 0.8125rem;
-  --frame-toggle-icon-size: 0.9375rem;
-}
-
-[frToggle][data-size='lg'] {
-  --frame-toggle-height: 2.75rem;
-  --frame-toggle-padding-x: 1rem;
-  --frame-toggle-font-size: 0.9375rem;
-  --frame-toggle-icon-size: 1.125rem;
-}
-
-[frToggle]:where(:disabled, [data-disabled]) {
-  cursor: not-allowed;
-  opacity: var(--frame-toggle-disabled-opacity);
-}
-
-[frToggleIcon],
-.frame-toggle__icon {
-  display: inline-flex;
-  inline-size: var(--frame-toggle-icon-size);
-  block-size: var(--frame-toggle-icon-size);
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
-[frToggleIcon] ng-icon,
-.frame-toggle__icon ng-icon {
-  inline-size: var(--frame-toggle-icon-size);
-  block-size: var(--frame-toggle-icon-size);
-}
-
-[frToggleLabel],
-.frame-toggle__label {
-  min-inline-size: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [frToggle] {
-    transition: none;
-  }
-
-  [frToggle]:where(:not(:disabled, [data-disabled])):active {
-    transform: none;
-  }
-}
+@import './_vars.css';
+
+[frToggle] {
+  appearance: none;
+  display: inline-flex;
+  min-block-size: var(--frame-toggle-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--frame-toggle-gap);
+  border: 1px solid var(--frame-toggle-border);
+  border-radius: var(--frame-toggle-radius);
+  background: var(--frame-toggle-bg);
+  color: var(--frame-toggle-color);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--frame-toggle-font-size);
+  font-weight: var(--frame-toggle-font-weight);
+  line-height: 1;
+  padding-block: 0;
+  padding-inline: var(--frame-toggle-padding-x);
+  text-decoration: none;
+  transition:
+    background-color var(--frame-toggle-transition-duration) ease,
+    border-color var(--frame-toggle-transition-duration) ease,
+    box-shadow var(--frame-toggle-transition-duration) ease,
+    color var(--frame-toggle-transition-duration) ease,
+    opacity var(--frame-toggle-transition-duration) ease,
+    transform var(--frame-toggle-transition-duration) ease;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+[frToggle]:where(:not(:disabled, [data-disabled])):hover {
+  background: var(--frame-toggle-hover-bg);
+  color: var(--frame-toggle-hover-color);
+}
+
+[frToggle]:where(:not(:disabled, [data-disabled])):active {
+  transform: translateY(1px);
+}
+
+[frToggle]:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: var(--frame-toggle-focus-shadow);
+}
+
+[frToggle][data-state='on'] {
+  background: var(--frame-toggle-pressed-bg);
+  color: var(--frame-toggle-pressed-color);
+  box-shadow: var(--frame-toggle-pressed-shadow);
+}
+
+[frToggle][data-variant='outline'] {
+  --frame-toggle-bg: var(--frame-toggle-outline-bg);
+  --frame-toggle-border: var(--frame-toggle-outline-border);
+  --frame-toggle-hover-bg: var(--frame-toggle-outline-hover-bg);
+  --frame-toggle-pressed-bg: var(--frame-toggle-outline-pressed-bg);
+}
+
+[frToggle][data-size='sm'] {
+  --frame-toggle-height: var(--frame-density-control-height-sm);
+  --frame-toggle-padding-x: 0.625rem;
+  --frame-toggle-font-size: 0.8125rem;
+  --frame-toggle-icon-size: 0.9375rem;
+}
+
+[frToggle][data-size='lg'] {
+  --frame-toggle-height: var(--frame-density-control-height-xl);
+  --frame-toggle-padding-x: 1rem;
+  --frame-toggle-font-size: 0.9375rem;
+  --frame-toggle-icon-size: 1.125rem;
+}
+
+[frToggle]:where(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: var(--frame-toggle-disabled-opacity);
+}
+
+[frToggleIcon],
+.frame-toggle__icon {
+  display: inline-flex;
+  inline-size: var(--frame-toggle-icon-size);
+  block-size: var(--frame-toggle-icon-size);
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+[frToggleIcon] ng-icon,
+.frame-toggle__icon ng-icon {
+  inline-size: var(--frame-toggle-icon-size);
+  block-size: var(--frame-toggle-icon-size);
+}
+
+[frToggleLabel],
+.frame-toggle__label {
+  min-inline-size: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [frToggle] {
+    transition: none;
+  }
+
+  [frToggle]:where(:not(:disabled, [data-disabled])):active {
+    transform: none;
+  }
+}

package/tooltip/src/styles/_vars.css

@@ -1,17 +1,17 @@
-:root {
-  --frame-tooltip-content-bg: var(--frame-surface, #fff);
-  --frame-tooltip-content-color: var(--frame-foreground, #09090b);
-  --frame-tooltip-content-border: var(--frame-frame-line-muted, var(--frame-border, #d4d4d8));
-  --frame-tooltip-content-radius: var(--frame-radius-md, 0.5rem);
-  --frame-tooltip-content-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
-  --frame-tooltip-content-padding: 0.375rem 0.625rem;
+:where(:root) {
+  --frame-tooltip-content-bg: var(--frame-surface);
+  --frame-tooltip-content-color: var(--frame-foreground);
+  --frame-tooltip-content-border: var(--frame-frame-line-muted, var(--frame-border));
+  --frame-tooltip-content-radius: var(--frame-radius-md);
+  --frame-tooltip-content-shadow: var(--frame-shadow-md);
+  --frame-tooltip-content-padding: var(--frame-density-overlay-padding-block) var(--frame-density-overlay-padding-inline);
   --frame-tooltip-content-max-width: 18rem;
   --frame-tooltip-content-font-size: 0.8125rem;
   --frame-tooltip-content-font-weight: 500;
   --frame-tooltip-content-line-height: 1.35;
   --frame-tooltip-shortcut-bg: color-mix(in srgb, currentColor 14%, transparent);
-  --frame-tooltip-shortcut-radius: 0;
-  --frame-tooltip-shortcut-padding: 0.0625rem 0.3125rem;
+  --frame-tooltip-shortcut-radius: var(--frame-radius-sm);
+  --frame-tooltip-shortcut-padding: var(--frame-density-shortcut-padding-block) var(--frame-density-shortcut-padding-inline);
   --frame-tooltip-shortcut-font-size: 0.75rem;
   --frame-tooltip-arrow-size: 0.5rem;
   --frame-tooltip-motion-duration: 140ms;

package/tooltip/src/styles/tooltip.css

@@ -44,6 +44,7 @@
   position: absolute;
   inline-size: var(--frame-tooltip-arrow-size);
   block-size: var(--frame-tooltip-arrow-size);
+  border: 1px solid var(--frame-tooltip-content-border);
   background: var(--frame-tooltip-content-bg);
   transform: rotate(45deg);
 }
@@ -51,22 +52,30 @@
 .frame-tooltip__content[data-arrow][data-side='top']::after {
   inset-block-end: calc(var(--frame-tooltip-arrow-size) / -2);
   inset-inline-start: var(--frame-tooltip-arrow-x, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  border-block-start: 0;
+  border-inline-start: 0;
 }
 
 .frame-tooltip__content[data-arrow][data-side='bottom']::after {
   inset-block-start: calc(var(--frame-tooltip-arrow-size) / -2);
   inset-inline-start: var(--frame-tooltip-arrow-x, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  border-block-end: 0;
+  border-inline-end: 0;
 }
 
-.frame-tooltip__content[data-arrow][data-side='left']::after {
-  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
-  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
-}
-
-.frame-tooltip__content[data-arrow][data-side='right']::after {
-  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
-  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
-}
+.frame-tooltip__content[data-arrow][data-side='left']::after {
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  inset-inline-end: calc(var(--frame-tooltip-arrow-size) / -2);
+  border-block-end: 0;
+  border-inline-start: 0;
+}
+
+.frame-tooltip__content[data-arrow][data-side='right']::after {
+  inset-block-start: var(--frame-tooltip-arrow-y, calc(50% - var(--frame-tooltip-arrow-size) / 2));
+  inset-inline-start: calc(var(--frame-tooltip-arrow-size) / -2);
+  border-block-start: 0;
+  border-inline-end: 0;
+}
 
 [frTooltipShortcut],
 .frame-tooltip__shortcut {

package/types/frame-ui-ng-components-button.d.ts

@@ -2,11 +2,9 @@ import * as i0 from '@angular/core';
 
 declare const FR_BUTTON_APPEARANCES: readonly ["ghost", "outline", "primary"];
 declare const FR_BUTTON_LOADING_DISPLAYS: readonly ["inline", "replace"];
-declare const FR_BUTTON_RADII: readonly ["full", "lg", "md", "none", "sm"];
 declare const FR_BUTTON_SIZES: readonly ["sm", "md", "lg"];
 type FrButtonAppearance = (typeof FR_BUTTON_APPEARANCES)[number];
 type FrButtonLoadingDisplay = (typeof FR_BUTTON_LOADING_DISPLAYS)[number];
-type FrButtonRadius = (typeof FR_BUTTON_RADII)[number];
 type FrButtonSize = (typeof FR_BUTTON_SIZES)[number];
 /** Button host with FrameUI size and appearance variants. */
 declare class FrButton {
@@ -16,18 +14,17 @@ declare class FrButton {
     readonly disabled: i0.InputSignalWithTransform<boolean, unknown>;
     readonly loading: i0.InputSignalWithTransform<boolean, unknown>;
     readonly loadingDisplay: i0.InputSignal<"inline" | "replace">;
-    readonly radius: i0.InputSignal<"full" | "lg" | "md" | "none" | "sm">;
-    readonly size: i0.InputSignal<"lg" | "md" | "sm">;
+    readonly size: i0.InputSignal<"sm" | "md" | "lg">;
     protected readonly hasCustomLoadingIndicator: i0.Signal<boolean>;
     protected readonly isUnavailable: i0.Signal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FrButton, "a[frButton], button[frButton]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingDisplay": { "alias": "loadingDisplay"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["loadingIndicator", "spinnerIndicator"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrButton, "a[frButton], button[frButton]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "loadingDisplay": { "alias": "loadingDisplay"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["loadingIndicator", "spinnerIndicator"], never, true, never>;
 }
 /** Icon-only button host with square sizing. */
 declare class FrIconButton {
     readonly ariaLabel: i0.InputSignal<string | null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FrIconButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FrIconButton, "a[frIconButton], button[frIconButton]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "loading": "loading"; "loadingDisplay": "loadingDisplay"; "radius": "radius"; "size": "size"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FrIconButton, "a[frIconButton], button[frIconButton]", never, { "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "loading": "loading"; "loadingDisplay": "loadingDisplay"; "size": "size"; }; outputs: {}; }]>;
 }
 /** Icon slot for button. */
 declare class FrButtonIcon {
@@ -51,5 +48,5 @@ declare class FrButtonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<FrButtonModule>;
 }
 
-export { FR_BUTTON_APPEARANCES, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FrButton, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrButtonModule, FrIconButton };
-export type { FrButtonAppearance, FrButtonLoadingDisplay, FrButtonRadius, FrButtonSize };
+export { FR_BUTTON_APPEARANCES, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_SIZES, FrButton, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrButtonModule, FrIconButton };
+export type { FrButtonAppearance, FrButtonLoadingDisplay, FrButtonSize };

package/types/frame-ui-ng-components-calendar.d.ts

@@ -75,6 +75,7 @@ declare class FrCalendar implements ControlValueAccessor {
     readonly yearOptions: _angular_core.Signal<number[]>;
     readonly months: _angular_core.Signal<CalendarMonth[]>;
     readonly activeDate: _angular_core.Signal<Date>;
+    readonly hasDateLabels: _angular_core.Signal<boolean>;
     private onTouched;
     private onChange;
     writeValue(value: Date | FrCalendarDateRange | null): void;

package/types/frame-ui-ng-components-carousel.d.ts

@@ -106,14 +106,14 @@ declare class FrCarouselPrevious {
     protected readonly carousel: FrCarousel;
     readonly label: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrCarouselPrevious, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrCarouselPrevious, "button[frCarouselPrevious]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "radius": "radius"; "size": "size"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrCarouselPrevious, "button[frCarouselPrevious]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "size": "size"; }; outputs: {}; }]>;
 }
 /** Next-slide control for carousel. */
 declare class FrCarouselNext {
     protected readonly carousel: FrCarousel;
     readonly label: _angular_core.InputSignal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FrCarouselNext, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrCarouselNext, "button[frCarouselNext]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "radius": "radius"; "size": "size"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrCarouselNext, "button[frCarouselNext]", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.FrButton; inputs: { "appearance": "appearance"; "disabled": "disabled"; "size": "size"; }; outputs: {}; }]>;
 }
 
 declare class FrCarouselModule {

package/types/frame-ui-ng-components-modal.d.ts

@@ -1,9 +1,10 @@
 import * as _angular_core from '@angular/core';
-import { Type, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Type, TemplateRef, ViewContainerRef, InjectionToken } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { ComponentType } from '@angular/cdk/portal';
 import { DialogRef, DialogConfig } from '@angular/cdk/dialog';
 import { FrButtonAppearance } from '@frame-ui-ng/components/button';
+import * as _frame_ui_ng_components_modal from '@frame-ui-ng/components/modal';
 
 type FrModalFooterAction = {
     appearance?: FrButtonAppearance;
@@ -106,6 +107,7 @@ declare class FrModalClose {
 }
 /** Panel slot for modal. */
 declare class FrModalPanel {
+    protected readonly panelLayout: _frame_ui_ng_components_modal.FrModalPanelLayout | null;
     readonly scrollable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly showCloseButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl" | "full">;
@@ -139,7 +141,16 @@ declare class FrModalDescription {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FrModalDescription, "[frModalDescription], frame-modal-description", never, {}, {}, never, never, true, never>;
 }
 
-declare const FR_MODAL_DATA: _angular_core.InjectionToken<any>;
+type FrModalPanelLayout = {
+    height?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    width?: string;
+};
+declare const FR_MODAL_DATA: InjectionToken<any>;
+declare const FR_MODAL_PANEL_LAYOUT: InjectionToken<FrModalPanelLayout>;
 declare const FR_MODAL_REF: typeof FrModalRef;
 
 /** Trigger control for modal. */
@@ -167,5 +178,5 @@ declare class FrModalModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FrModalModule>;
 }
 
-export { FR_MODAL_DATA, FR_MODAL_REF, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalRef, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
-export type { FrModalConfig, FrModalFooterAction, FrModalShellOptions, FrModalSize };
+export { FR_MODAL_DATA, FR_MODAL_PANEL_LAYOUT, FR_MODAL_REF, FrModalBody, FrModalClose, FrModalContent, FrModalDescription, FrModalFooter, FrModalHeader, FrModalModule, FrModalPanel, FrModalRef, FrModalService, FrModalShell, FrModalTitle, FrModalTrigger };
+export type { FrModalConfig, FrModalFooterAction, FrModalPanelLayout, FrModalShellOptions, FrModalSize };

package/types/frame-ui-ng-components-utils.d.ts

@@ -2,4 +2,6 @@ declare function clampNumber(value: number, min: number, max: number): number;
 declare function coerceNumber(value: unknown, fallback: number): number;
 declare function parseCssPixelValue(value: string, fallback: number): number;
 
-export { clampNumber, coerceNumber, parseCssPixelValue };
+declare function valueToCssSize(value: number | string | undefined): string | undefined;
+
+export { clampNumber, coerceNumber, parseCssPixelValue, valueToCssSize };