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

package/combobox/src/styles/_vars.css

@@ -1,11 +1,11 @@
-:root {
-  --frame-combobox-control-height: 2.5rem;
+:where(:root) {
+  --frame-combobox-control-height: var(--frame-density-control-height-lg);
   --frame-combobox-control-radius: var(--frame-radius-md);
   --frame-combobox-control-bg: var(--frame-surface);
   --frame-combobox-control-color: var(--frame-surface-foreground);
   --frame-combobox-control-border: var(--frame-border);
   --frame-combobox-control-font-size: 0.875rem;
-  --frame-combobox-control-padding-inline: 0.875rem;
+  --frame-combobox-control-padding-inline: var(--frame-density-control-padding-x-md);
   --frame-combobox-control-disabled-bg: color-mix(in srgb, var(--frame-surface) 78%, var(--frame-muted));
   --frame-combobox-control-disabled-color: var(--frame-muted-foreground);
   --frame-combobox-control-disabled-opacity: 0.6;
@@ -22,40 +22,40 @@
   --frame-combobox-panel-color: var(--frame-surface-foreground);
   --frame-combobox-panel-border: var(--frame-border);
   --frame-combobox-panel-shadow: var(--frame-shadow-md);
-  --frame-combobox-panel-padding: 0.25rem;
+  --frame-combobox-panel-padding: var(--frame-density-panel-padding-sm);
   --frame-combobox-motion-duration: 140ms;
   --frame-combobox-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
   --frame-combobox-motion-distance: 0.2rem;
   --frame-combobox-motion-scale: 0.98;
-  --frame-combobox-list-gap: 0.125rem;
-  --frame-combobox-item-height: 2rem;
-  --frame-combobox-item-gap: 0.5rem;
-  --frame-combobox-item-radius: calc(var(--frame-radius-md) - 0.125rem);
+  --frame-combobox-list-gap: var(--frame-density-gap-xs);
+  --frame-combobox-item-height: var(--frame-density-item-height);
+  --frame-combobox-item-gap: var(--frame-density-gap-md);
+  --frame-combobox-item-radius: var(--frame-radius-sm);
   --frame-combobox-item-font-size: 0.875rem;
-  --frame-combobox-item-padding: 0.375rem 0.5rem 0.375rem 2rem;
+  --frame-combobox-item-padding: var(--frame-density-gap-md) var(--frame-density-gap-md) var(--frame-density-gap-md) 2rem;
   --frame-combobox-item-indicator-offset: 0.625rem;
   --frame-combobox-item-disabled-opacity: 0.5;
   --frame-combobox-muted-font-size: 0.8125rem;
-  --frame-combobox-muted-padding: 0.5rem;
-  --frame-combobox-separator-margin: 0.25rem -0.25rem;
+  --frame-combobox-muted-padding: var(--frame-density-gap-md);
+  --frame-combobox-separator-margin: var(--frame-density-gap-sm) calc(0rem - var(--frame-density-gap-sm));
   --frame-combobox-separator-bg: var(--frame-border);
-  --frame-combobox-chip-gap: 0.25rem;
-  --frame-combobox-chip-height: 1.375rem;
-  --frame-combobox-chip-radius: 0;
+  --frame-combobox-chip-gap: var(--frame-density-gap-sm);
+  --frame-combobox-chip-height: var(--frame-density-inline-height);
+  --frame-combobox-chip-radius: var(--frame-radius-sm);
   --frame-combobox-chip-bg: var(--frame-primary);
   --frame-combobox-chip-color: var(--frame-primary-foreground);
   --frame-combobox-chip-font-size: 0.75rem;
   --frame-combobox-chip-font-weight: 600;
-  --frame-combobox-chip-padding-block: 0.1875rem;
-  --frame-combobox-chip-padding-inline: 0.625rem 0.25rem;
+  --frame-combobox-chip-padding-block: var(--frame-density-inline-padding-block);
+  --frame-combobox-chip-padding-inline: var(--frame-density-inline-padding-inline) var(--frame-density-gap-sm);
   --frame-combobox-chip-remove-size: 1rem;
-  --frame-combobox-chip-remove-radius: 0;
+  --frame-combobox-chip-remove-radius: var(--frame-radius-sm);
   --frame-combobox-chip-remove-bg: color-mix(in srgb, currentColor 12%, transparent);
   --frame-combobox-chip-remove-hover-bg: color-mix(in srgb, currentColor 20%, transparent);
-  --frame-combobox-chips-gap: 0.375rem;
-  --frame-combobox-chips-padding: 0.375rem;
+  --frame-combobox-chips-gap: var(--frame-density-gap-md);
+  --frame-combobox-chips-padding: var(--frame-density-gap-md);
   --frame-combobox-chips-input-min-width: 8rem;
-  --frame-combobox-chips-input-padding: 0.25rem;
+  --frame-combobox-chips-input-padding: var(--frame-density-gap-sm);
   --frame-combobox-error-color: var(--frame-destructive);
   --frame-combobox-error-font-size: 0.8125rem;
 }

package/command/src/styles/_vars.css

@@ -1,27 +1,28 @@
-:root {
+:where(:root) {
   --frame-command-bg: var(--frame-surface);
   --frame-command-color: var(--frame-surface-foreground);
   --frame-command-border: var(--frame-border);
-  --frame-command-radius: 0px;
-  --frame-command-shadow: none;
-  --frame-command-input-height: 2.875rem;
-  --frame-command-input-padding-inline: 0.875rem;
+  --frame-command-radius: var(--frame-radius-lg);
+  --frame-command-shadow: var(--frame-shadow-sm);
+  --frame-command-input-height: var(--frame-density-control-height-xl);
+  --frame-command-input-padding-inline: var(--frame-density-control-padding-x-md);
   --frame-command-input-border: var(--frame-border);
+  --frame-command-input-radius: var(--frame-radius-md);
   --frame-command-input-color: var(--frame-foreground);
   --frame-command-input-placeholder-color: var(--frame-muted-foreground);
   --frame-command-list-max-height: 20rem;
-  --frame-command-list-padding: 0.625rem 0.75rem 0;
-  --frame-command-list-gap: 0.125rem;
-  --frame-command-empty-padding: 2.25rem 1rem;
+  --frame-command-list-padding: var(--frame-density-gap-md) var(--frame-density-gap-lg) 0;
+  --frame-command-list-gap: var(--frame-density-gap-xs);
+  --frame-command-empty-padding: var(--frame-density-control-height-md) var(--frame-density-panel-padding-md);
   --frame-command-empty-color: var(--frame-muted-foreground);
-  --frame-command-group-heading-padding: 0.375rem 0 0.3125rem;
+  --frame-command-group-heading-padding: var(--frame-density-gap-md) 0 var(--frame-density-gap-sm);
   --frame-command-group-heading-color: var(--frame-muted-foreground);
   --frame-command-group-heading-font-size: 0.75rem;
   --frame-command-group-heading-font-weight: 650;
-  --frame-command-item-height: 2.125rem;
-  --frame-command-item-gap: 0.625rem;
-  --frame-command-item-padding: 0.375rem;
-  --frame-command-item-radius: 0px;
+  --frame-command-item-height: var(--frame-density-item-height);
+  --frame-command-item-gap: var(--frame-density-gap-lg);
+  --frame-command-item-padding: var(--frame-density-gap-md);
+  --frame-command-item-radius: var(--frame-radius-sm);
   --frame-command-item-font-size: 0.875rem;
   --frame-command-item-highlighted-bg: var(--frame-accent);
   --frame-command-item-highlighted-color: var(--frame-accent-foreground);
@@ -30,13 +31,13 @@
   --frame-command-shortcut-color: var(--frame-muted-foreground);
   --frame-command-shortcut-font-size: 0.75rem;
   --frame-command-separator-bg: var(--frame-border);
-  --frame-command-separator-margin: 0.5rem 0;
+  --frame-command-separator-margin: var(--frame-density-gap-md) 0;
   --frame-command-footer-border: var(--frame-frame-line-muted, var(--frame-border));
   --frame-command-footer-color: var(--frame-muted-foreground);
   --frame-command-footer-font-size: 0.8125rem;
-  --frame-command-footer-gap: 0.75rem;
-  --frame-command-footer-padding: 0.625rem 0 0;
-  --frame-command-footer-margin: 0.625rem 0 0;
+  --frame-command-footer-gap: var(--frame-density-gap-lg);
+  --frame-command-footer-padding: var(--frame-density-gap-md) 0 0;
+  --frame-command-footer-margin: var(--frame-density-gap-md) 0 0;
   --frame-command-footer-key-bg: var(--frame-muted);
   --frame-command-footer-key-border: var(--frame-frame-line-muted, var(--frame-border));
   --frame-command-footer-key-color: var(--frame-foreground);

package/command/src/styles/command.css

@@ -20,6 +20,7 @@ frame-command {
   inline-size: 100%;
   min-block-size: var(--frame-command-input-height, 2.75rem);
   border: 1px solid var(--frame-command-input-border, var(--frame-border));
+  border-radius: var(--frame-command-input-radius, var(--frame-radius-md));
   background: transparent;
   color: var(--frame-command-input-color, var(--frame-foreground));
   font: inherit;

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

@@ -1,8 +1,8 @@
-:root {
-  --frame-date-picker-trigger-height: 2.5rem;
+:where(:root) {
+  --frame-date-picker-trigger-height: var(--frame-density-control-height-lg);
   --frame-date-picker-trigger-width: 17.5rem;
   --frame-date-picker-trigger-padding: 0 0.75rem;
-  --frame-date-picker-trigger-gap: 0.5rem;
+  --frame-date-picker-trigger-gap: var(--frame-density-gap-md);
   --frame-date-picker-trigger-radius: var(--frame-radius-md);
   --frame-date-picker-trigger-bg: var(--frame-background);
   --frame-date-picker-trigger-color: var(--frame-foreground);
@@ -17,14 +17,14 @@
   --frame-date-picker-content-border: var(--frame-border);
   --frame-date-picker-content-radius: var(--frame-radius-lg);
   --frame-date-picker-content-shadow: var(--frame-shadow-md);
-  --frame-date-picker-content-padding: 0.25rem;
+  --frame-date-picker-content-padding: var(--frame-density-panel-padding-sm);
   --frame-date-picker-presets-border: var(--frame-border);
-  --frame-date-picker-preset-height: 2rem;
+  --frame-date-picker-preset-height: var(--frame-density-item-height);
   --frame-date-picker-preset-radius: var(--frame-radius-md);
   --frame-date-picker-preset-hover-bg: var(--frame-muted);
   --frame-date-picker-time-border: var(--frame-border);
   --frame-date-picker-time-input-radius: var(--frame-radius-md);
-  --frame-date-picker-time-padding: 0.75rem;
+  --frame-date-picker-time-padding: var(--frame-density-gap-lg);
   --frame-date-picker-motion-duration: 140ms;
   --frame-date-picker-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
 }

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

@@ -111,7 +111,9 @@
 
 .frame-date-picker__content {
   box-sizing: border-box;
-  overflow: hidden;
+  inline-size: auto;
+  max-inline-size: calc(100vw - 1.5rem);
+  overflow: auto;
   border: 1px solid var(--frame-date-picker-content-border);
   border-radius: var(--frame-date-picker-content-radius);
   background: var(--frame-date-picker-content-bg);
@@ -122,10 +124,34 @@
 }
 
 .frame-date-picker__content .frame-calendar {
+  --frame-calendar-width: auto;
   border: 0;
+  inline-size: auto;
+  max-inline-size: calc(100vw - 2rem);
   box-shadow: none;
 }
 
+.frame-date-picker__content .frame-calendar__months {
+  inline-size: auto;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.frame-date-picker__content .frame-calendar__month {
+  flex: 0 0 auto;
+  inline-size: calc(var(--frame-calendar-cell-size) * 7);
+  min-inline-size: calc(var(--frame-calendar-cell-size) * 7);
+}
+
+.frame-date-picker__content .frame-calendar__table {
+  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;

package/drag-drop/src/styles/_vars.css

@@ -1,23 +1,23 @@
-:root {
-  --frame-drag-drop-gap: 0.75rem;
-  --frame-drag-drop-group-gap: 1rem;
+:where(:root) {
+  --frame-drag-drop-gap: var(--frame-density-gap-lg);
+  --frame-drag-drop-group-gap: var(--frame-density-gap-xl);
   --frame-drop-list-min-height: 3.5rem;
-  --frame-drop-list-padding: 0.5rem;
+  --frame-drop-list-padding: var(--frame-density-gap-md);
   --frame-drop-list-radius: var(--frame-radius-lg);
   --frame-drop-list-bg: var(--frame-surface);
   --frame-drop-list-border: var(--frame-border);
   --frame-drop-list-hover-border: color-mix(in srgb, var(--frame-primary) 45%, var(--frame-border));
   --frame-drop-list-disabled-opacity: 0.55;
-  --frame-drag-gap: 0.75rem;
-  --frame-drag-padding: 0.875rem;
+  --frame-drag-gap: var(--frame-density-gap-lg);
+  --frame-drag-padding: var(--frame-density-control-padding-x-md);
   --frame-drag-radius: var(--frame-radius-md);
   --frame-drag-bg: var(--frame-background);
   --frame-drag-color: var(--frame-foreground);
   --frame-drag-border: var(--frame-border);
-  --frame-drag-shadow: var(--frame-shadow-xs);
+  --frame-drag-shadow: var(--frame-shadow-sm);
   --frame-drag-hover-bg: var(--frame-accent);
   --frame-drag-preview-bg: var(--frame-background);
-  --frame-drag-preview-shadow: var(--frame-shadow-xl);
+  --frame-drag-preview-shadow: var(--frame-shadow-lg);
   --frame-drag-placeholder-opacity: 0.24;
   --frame-drag-placeholder-bg: color-mix(in srgb, var(--frame-primary) 12%, transparent);
   --frame-drag-placeholder-border: color-mix(in srgb, var(--frame-primary) 45%, transparent);

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

@@ -1,20 +1,20 @@
-:root {
+:where(:root) {
   --frame-dropdown-menu-panel-min-width: 13rem;
   --frame-dropdown-menu-panel-radius: var(--frame-radius-md);
   --frame-dropdown-menu-panel-bg: var(--frame-surface);
   --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.25rem;
+  --frame-dropdown-menu-panel-padding: var(--frame-density-panel-padding-sm);
   --frame-dropdown-menu-label-color: var(--frame-muted-foreground);
   --frame-dropdown-menu-label-font-size: 0.75rem;
   --frame-dropdown-menu-label-font-weight: 600;
-  --frame-dropdown-menu-separator-margin: 0.25rem -0.25rem;
+  --frame-dropdown-menu-separator-margin: var(--frame-density-gap-sm) calc(0rem - var(--frame-density-gap-sm));
   --frame-dropdown-menu-separator-bg: var(--frame-border);
-  --frame-dropdown-menu-item-gap: 0.5rem;
-  --frame-dropdown-menu-item-height: 2rem;
-  --frame-dropdown-menu-item-radius: calc(var(--frame-radius-md) - 0.125rem);
-  --frame-dropdown-menu-item-padding: 0.375rem 0.5rem;
+  --frame-dropdown-menu-item-gap: var(--frame-density-gap-md);
+  --frame-dropdown-menu-item-height: var(--frame-density-item-height);
+  --frame-dropdown-menu-item-radius: var(--frame-radius-sm);
+  --frame-dropdown-menu-item-padding: var(--frame-density-item-padding);
   --frame-dropdown-menu-item-font-size: 0.875rem;
   --frame-dropdown-menu-item-hover-bg: var(--frame-accent);
   --frame-dropdown-menu-item-hover-color: var(--frame-accent-foreground);
@@ -23,7 +23,7 @@
   --frame-dropdown-menu-item-destructive-hover-bg: color-mix(in srgb, var(--frame-destructive) 12%, var(--frame-surface));
   --frame-dropdown-menu-item-destructive-hover-color: var(--frame-destructive);
   --frame-dropdown-menu-item-inset-padding: 2rem;
-  --frame-dropdown-menu-shortcut-gap: 0.75rem;
+  --frame-dropdown-menu-shortcut-gap: var(--frame-density-gap-lg);
   --frame-dropdown-menu-shortcut-color: var(--frame-muted-foreground);
   --frame-dropdown-menu-shortcut-font-size: 0.75rem;
   --frame-dropdown-menu-indicator-size: 1rem;

package/empty/src/styles/_vars.css

@@ -1,23 +1,23 @@
-:root {
-  --frame-empty-padding: 3rem 1.5rem;
-  --frame-empty-gap: 1.5rem;
-  --frame-empty-radius: var(--frame-radius-lg);
-  --frame-empty-border: transparent;
-  --frame-empty-bg: transparent;
-  --frame-empty-color: var(--frame-foreground);
-  --frame-empty-outline-border: var(--frame-border);
-  --frame-empty-soft-bg: var(--frame-muted);
-  --frame-empty-header-gap: 0.75rem;
-  --frame-empty-content-gap: 0.75rem;
-  --frame-empty-media-size: 3rem;
-  --frame-empty-media-radius: var(--frame-radius-lg);
-  --frame-empty-media-bg: var(--frame-muted);
-  --frame-empty-media-color: var(--frame-muted-foreground);
-  --frame-empty-media-icon-size: 1.5rem;
-  --frame-empty-title-color: var(--frame-foreground);
-  --frame-empty-title-font-size: 1rem;
-  --frame-empty-title-font-weight: 600;
-  --frame-empty-description-color: var(--frame-muted-foreground);
-  --frame-empty-description-font-size: 0.875rem;
-  --frame-empty-description-max-width: 32rem;
-}
+:where(:root) {
+  --frame-empty-padding: calc(var(--frame-density-panel-padding-lg) + var(--frame-density-panel-padding-lg)) var(--frame-density-panel-padding-lg);
+  --frame-empty-gap: var(--frame-density-panel-padding-lg);
+  --frame-empty-radius: var(--frame-radius-lg);
+  --frame-empty-border: transparent;
+  --frame-empty-bg: transparent;
+  --frame-empty-color: var(--frame-foreground);
+  --frame-empty-outline-border: var(--frame-border);
+  --frame-empty-soft-bg: var(--frame-muted);
+  --frame-empty-header-gap: var(--frame-density-gap-lg);
+  --frame-empty-content-gap: var(--frame-density-gap-lg);
+  --frame-empty-media-size: 3rem;
+  --frame-empty-media-radius: var(--frame-radius-lg);
+  --frame-empty-media-bg: var(--frame-muted);
+  --frame-empty-media-color: var(--frame-muted-foreground);
+  --frame-empty-media-icon-size: 1.5rem;
+  --frame-empty-title-color: var(--frame-foreground);
+  --frame-empty-title-font-size: 1rem;
+  --frame-empty-title-font-weight: 600;
+  --frame-empty-description-color: var(--frame-muted-foreground);
+  --frame-empty-description-font-size: 0.875rem;
+  --frame-empty-description-max-width: 32rem;
+}

package/fesm2022/frame-ui-ng-components-button.mjs

@@ -8,7 +8,6 @@ const FR_BUTTON_APPEARANCES = [
     'primary',
 ];
 const FR_BUTTON_LOADING_DISPLAYS = ['inline', 'replace'];
-const FR_BUTTON_RADII = ['full', 'lg', 'md', 'none', 'sm'];
 const FR_BUTTON_SIZES = ['sm', 'md', 'lg'];
 /** Button host with FrameUI size and appearance variants. */
 class FrButton {
@@ -18,12 +17,11 @@ class FrButton {
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     loadingDisplay = input('replace', ...(ngDevMode ? [{ debugName: "loadingDisplay" }] : /* istanbul ignore next */ []));
-    radius = input('none', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     hasCustomLoadingIndicator = computed(() => !!this.loadingIndicator() || !!this.spinnerIndicator(), ...(ngDevMode ? [{ debugName: "hasCustomLoadingIndicator" }] : /* istanbul ignore next */ []));
     isUnavailable = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isUnavailable" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrButton, isStandalone: true, selector: "a[frButton], button[frButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDisplay: { classPropertyName: "loadingDisplay", publicName: "loadingDisplay", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-has-custom-loading": "hasCustomLoadingIndicator() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-loading-display": "loadingDisplay()", "attr.data-radius": "radius()", "attr.data-size": "size()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "isUnavailable() ? \"\" : null", "class.frame-button-disabled": "isUnavailable()", "class.frame-button-loading": "loading()" }, classAttribute: "frame-button" }, queries: [{ propertyName: "loadingIndicator", first: true, predicate: FrButtonLoading, descendants: true, isSignal: true }, { propertyName: "spinnerIndicator", first: true, predicate: FrSpinner, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.16", type: FrButton, isStandalone: true, selector: "a[frButton], button[frButton]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingDisplay: { classPropertyName: "loadingDisplay", publicName: "loadingDisplay", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-appearance": "appearance()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-has-custom-loading": "hasCustomLoadingIndicator() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-loading-display": "loadingDisplay()", "attr.data-size": "size()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "isUnavailable() ? \"\" : null", "class.frame-button-disabled": "isUnavailable()", "class.frame-button-loading": "loading()" }, classAttribute: "frame-button" }, queries: [{ propertyName: "loadingIndicator", first: true, predicate: FrButtonLoading, descendants: true, isSignal: true }, { propertyName: "spinnerIndicator", first: true, predicate: FrSpinner, descendants: true, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrButton, decorators: [{
             type: Directive,
@@ -36,7 +34,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-has-custom-loading]': 'hasCustomLoadingIndicator() ? "" : null',
                         '[attr.data-loading]': 'loading() ? "" : null',
                         '[attr.data-loading-display]': 'loadingDisplay()',
-                        '[attr.data-radius]': 'radius()',
                         '[attr.data-size]': 'size()',
                         '[attr.aria-busy]': 'loading() ? "true" : null',
                         '[attr.aria-disabled]': 'disabled() ? "true" : null',
@@ -45,12 +42,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[class.frame-button-loading]': 'loading()',
                     },
                 }]
-        }], propDecorators: { loadingIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrButtonLoading), { isSignal: true }] }], spinnerIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrSpinner), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDisplay", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], propDecorators: { loadingIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrButtonLoading), { isSignal: true }] }], spinnerIndicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FrSpinner), { isSignal: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingDisplay", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /** Icon-only button host with square sizing. */
 class FrIconButton {
     ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrIconButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrIconButton, isStandalone: true, selector: "a[frIconButton], button[frIconButton]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-button": "\"\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "frame-icon-button" }, hostDirectives: [{ directive: FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "loading", "loading", "loadingDisplay", "loadingDisplay", "radius", "radius", "size", "size"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrIconButton, isStandalone: true, selector: "a[frIconButton], button[frIconButton]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-button": "\"\"", "attr.aria-label": "ariaLabel()" }, classAttribute: "frame-icon-button" }, hostDirectives: [{ directive: FrButton, inputs: ["appearance", "appearance", "disabled", "disabled", "loading", "loading", "loadingDisplay", "loadingDisplay", "size", "size"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrIconButton, decorators: [{
             type: Directive,
@@ -59,7 +56,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     hostDirectives: [
                         {
                             directive: FrButton,
-                            inputs: ['appearance', 'disabled', 'loading', 'loadingDisplay', 'radius', 'size'],
+                            inputs: ['appearance', 'disabled', 'loading', 'loadingDisplay', 'size'],
                         },
                     ],
                     host: {
@@ -151,5 +148,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FR_BUTTON_APPEARANCES, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_RADII, FR_BUTTON_SIZES, FrButton, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrButtonModule, FrIconButton };
+export { FR_BUTTON_APPEARANCES, FR_BUTTON_LOADING_DISPLAYS, FR_BUTTON_SIZES, FrButton, FrButtonIcon, FrButtonLabel, FrButtonLoading, FrButtonModule, FrIconButton };
 //# sourceMappingURL=frame-ui-ng-components-button.mjs.map

package/fesm2022/frame-ui-ng-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"frame-ui-ng-components-button.mjs","sources":["../../../projects/components/button/src/button.ts","../../../projects/components/button/button.module.ts","../../../projects/components/button/frame-ui-ng-components-button.ts"],"sourcesContent":["import { Directive, booleanAttribute, computed, contentChild, input } from '@angular/core';\r\nimport { FrSpinner } from '@frame-ui-ng/components/spinner';\r\n\r\nexport const FR_BUTTON_APPEARANCES = [\r\n  'ghost',\r\n  'outline',\r\n  'primary',\r\n] as const;\r\nexport const FR_BUTTON_LOADING_DISPLAYS = ['inline', 'replace'] as const;\r\nexport const FR_BUTTON_RADII = ['full', 'lg', 'md', 'none', 'sm'] as const;\r\nexport const FR_BUTTON_SIZES = ['sm', 'md', 'lg'] as const;\r\n\r\nexport type FrButtonAppearance = (typeof FR_BUTTON_APPEARANCES)[number];\r\nexport type FrButtonLoadingDisplay = (typeof FR_BUTTON_LOADING_DISPLAYS)[number];\r\nexport type FrButtonRadius = (typeof FR_BUTTON_RADII)[number];\r\nexport type FrButtonSize = (typeof FR_BUTTON_SIZES)[number];\r\n\r\n/** Button host with FrameUI size and appearance variants. */\r\n@Directive({\r\n  selector: 'a[frButton], button[frButton]',\r\n  host: {\r\n    class: 'frame-button',\r\n    '[attr.data-appearance]': 'appearance()',\r\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\r\n    '[attr.data-has-custom-loading]': 'hasCustomLoadingIndicator() ? \"\" : null',\r\n    '[attr.data-loading]': 'loading() ? \"\" : null',\r\n    '[attr.data-loading-display]': 'loadingDisplay()',\r\n    '[attr.data-radius]': 'radius()',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\r\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\r\n    '[attr.disabled]': 'isUnavailable() ? \"\" : null',\r\n    '[class.frame-button-disabled]': 'isUnavailable()',\r\n    '[class.frame-button-loading]': 'loading()',\r\n  },\r\n})\r\nexport class FrButton {\r\n  private readonly loadingIndicator = contentChild(FrButtonLoading);\r\n  private readonly spinnerIndicator = contentChild(FrSpinner);\r\n\r\n  readonly appearance = input<FrButtonAppearance>('primary');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n  readonly loadingDisplay = input<FrButtonLoadingDisplay>('replace');\r\n  readonly radius = input<FrButtonRadius>('none');\r\n  readonly size = input<FrButtonSize>('md');\r\n  protected readonly hasCustomLoadingIndicator = computed(\r\n    () => !!this.loadingIndicator() || !!this.spinnerIndicator(),\r\n  );\r\n  protected readonly isUnavailable = computed(() => this.disabled() || this.loading());\r\n}\r\n\r\n/** Icon-only button host with square sizing. */\r\n@Directive({\r\n  selector: 'a[frIconButton], button[frIconButton]',\r\n  hostDirectives: [\r\n    {\r\n      directive: FrButton,\r\n      inputs: ['appearance', 'disabled', 'loading', 'loadingDisplay', 'radius', 'size'],\r\n    },\r\n  ],\r\n  host: {\r\n    class: 'frame-icon-button',\r\n    '[attr.data-icon-button]': '\"\"',\r\n    '[attr.aria-label]': 'ariaLabel()',\r\n  },\r\n})\r\nexport class FrIconButton {\r\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n}\r\n\r\n/** Icon slot for button. */\r\n@Directive({\r\n  selector: '[frButtonIcon]',\r\n  host: {\r\n    class: 'frame-button__icon',\r\n    'aria-hidden': 'true',\r\n  },\r\n})\r\nexport class FrButtonIcon {}\r\n\r\n/** Label slot for button. */\r\n@Directive({\r\n  selector: '[frButtonLabel]',\r\n  host: {\r\n    class: 'frame-button__label',\r\n  },\r\n})\r\nexport class FrButtonLabel {}\r\n\r\n/** Loading indicator slot for button. */\r\n@Directive({\r\n  selector: '[frButtonLoading]',\r\n  host: {\r\n    class: 'frame-button__loading',\r\n    'aria-hidden': 'true',\r\n  },\r\n})\r\nexport class FrButtonLoading {}\r\n\r\n","import { NgModule } from '@angular/core';\nimport {\n  FrButton,\n  FrButtonIcon,\n  FrButtonLabel,\n  FrButtonLoading,\n  FrIconButton,\n} from './src/button';\n\n@NgModule({\n  imports: [\n    FrButton,\n    FrButtonIcon,\n    FrButtonLabel,\n    FrButtonLoading,\n    FrIconButton,\n  ],\n  exports: [\n    FrButton,\n    FrButtonIcon,\n    FrButtonLabel,\n    FrButtonLoading,\n    FrIconButton,\n  ],\n})\nexport class FrButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"frame-ui-ng-components-button.mjs","sources":["../../../projects/components/button/src/button.ts","../../../projects/components/button/button.module.ts","../../../projects/components/button/frame-ui-ng-components-button.ts"],"sourcesContent":["import { Directive, booleanAttribute, computed, contentChild, input } from '@angular/core';\r\nimport { FrSpinner } from '@frame-ui-ng/components/spinner';\r\n\r\nexport const FR_BUTTON_APPEARANCES = [\r\n  'ghost',\r\n  'outline',\r\n  'primary',\r\n] as const;\r\nexport const FR_BUTTON_LOADING_DISPLAYS = ['inline', 'replace'] as const;\r\nexport const FR_BUTTON_SIZES = ['sm', 'md', 'lg'] as const;\r\n\r\nexport type FrButtonAppearance = (typeof FR_BUTTON_APPEARANCES)[number];\r\nexport type FrButtonLoadingDisplay = (typeof FR_BUTTON_LOADING_DISPLAYS)[number];\r\nexport type FrButtonSize = (typeof FR_BUTTON_SIZES)[number];\r\n\r\n/** Button host with FrameUI size and appearance variants. */\r\n@Directive({\r\n  selector: 'a[frButton], button[frButton]',\r\n  host: {\r\n    class: 'frame-button',\r\n    '[attr.data-appearance]': 'appearance()',\r\n    '[attr.data-disabled]': 'disabled() ? \"\" : null',\r\n    '[attr.data-has-custom-loading]': 'hasCustomLoadingIndicator() ? \"\" : null',\r\n    '[attr.data-loading]': 'loading() ? \"\" : null',\r\n    '[attr.data-loading-display]': 'loadingDisplay()',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\r\n    '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\r\n    '[attr.disabled]': 'isUnavailable() ? \"\" : null',\r\n    '[class.frame-button-disabled]': 'isUnavailable()',\r\n    '[class.frame-button-loading]': 'loading()',\r\n  },\r\n})\r\nexport class FrButton {\r\n  private readonly loadingIndicator = contentChild(FrButtonLoading);\r\n  private readonly spinnerIndicator = contentChild(FrSpinner);\r\n\r\n  readonly appearance = input<FrButtonAppearance>('primary');\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n  readonly loadingDisplay = input<FrButtonLoadingDisplay>('replace');\r\n  readonly size = input<FrButtonSize>('md');\r\n  protected readonly hasCustomLoadingIndicator = computed(\r\n    () => !!this.loadingIndicator() || !!this.spinnerIndicator(),\r\n  );\r\n  protected readonly isUnavailable = computed(() => this.disabled() || this.loading());\r\n}\r\n\r\n/** Icon-only button host with square sizing. */\r\n@Directive({\r\n  selector: 'a[frIconButton], button[frIconButton]',\r\n  hostDirectives: [\r\n    {\r\n      directive: FrButton,\r\n      inputs: ['appearance', 'disabled', 'loading', 'loadingDisplay', 'size'],\r\n    },\r\n  ],\r\n  host: {\r\n    class: 'frame-icon-button',\r\n    '[attr.data-icon-button]': '\"\"',\r\n    '[attr.aria-label]': 'ariaLabel()',\r\n  },\r\n})\r\nexport class FrIconButton {\r\n  readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\r\n}\r\n\r\n/** Icon slot for button. */\r\n@Directive({\r\n  selector: '[frButtonIcon]',\r\n  host: {\r\n    class: 'frame-button__icon',\r\n    'aria-hidden': 'true',\r\n  },\r\n})\r\nexport class FrButtonIcon {}\r\n\r\n/** Label slot for button. */\r\n@Directive({\r\n  selector: '[frButtonLabel]',\r\n  host: {\r\n    class: 'frame-button__label',\r\n  },\r\n})\r\nexport class FrButtonLabel {}\r\n\r\n/** Loading indicator slot for button. */\r\n@Directive({\r\n  selector: '[frButtonLoading]',\r\n  host: {\r\n    class: 'frame-button__loading',\r\n    'aria-hidden': 'true',\r\n  },\r\n})\r\nexport class FrButtonLoading {}\r\n\r\n","import { NgModule } from '@angular/core';\nimport {\n  FrButton,\n  FrButtonIcon,\n  FrButtonLabel,\n  FrButtonLoading,\n  FrIconButton,\n} from './src/button';\n\n@NgModule({\n  imports: [\n    FrButton,\n    FrButtonIcon,\n    FrButtonLabel,\n    FrButtonLoading,\n    FrIconButton,\n  ],\n  exports: [\n    FrButton,\n    FrButtonIcon,\n    FrButtonLabel,\n    FrButtonLoading,\n    FrIconButton,\n  ],\n})\nexport class FrButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/frame-ui-ng-components-calendar.mjs

@@ -58,6 +58,7 @@ class FrCalendar {
     yearOptions = computed(() => Array.from({ length: Math.max(0, this.toYear() - this.fromYear() + 1) }, (_, index) => this.fromYear() + index), ...(ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []));
     months = computed(() => Array.from({ length: Math.max(1, this.numberOfMonths()) }, (_, index) => this.buildMonth(addMonths(this.currentMonth(), index))), ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
     activeDate = computed(() => this.resolveActiveDate(), ...(ngDevMode ? [{ debugName: "activeDate" }] : /* istanbul ignore next */ []));
+    hasDateLabels = computed(() => Object.keys(this.dateLabels()).length > 0, ...(ngDevMode ? [{ debugName: "hasDateLabels" }] : /* istanbul ignore next */ []));
     onTouched = () => undefined;
     onChange = () => undefined;
     writeValue(value) {
@@ -254,7 +255,7 @@ class FrCalendar {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FrCalendar, isStandalone: true, selector: "frame-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, timeZone: { classPropertyName: "timeZone", publicName: "timeZone", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, fromYear: { classPropertyName: "fromYear", publicName: "fromYear", isSignal: true, isRequired: false, transformFunction: null }, toYear: { classPropertyName: "toYear", publicName: "toYear", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, dateLabels: { classPropertyName: "dateLabels", publicName: "dateLabels", isSignal: true, isRequired: false, transformFunction: null }, disabledMatcher: { classPropertyName: "disabledMatcher", publicName: "disabledMatcher", isSignal: true, isRequired: false, transformFunction: null }, cellTemplate: { classPropertyName: "cellTemplate", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthTemplate: { classPropertyName: "previousMonthTemplate", publicName: "previousMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, nextMonthTemplate: { classPropertyName: "nextMonthTemplate", publicName: "nextMonthTemplate", isSignal: true, isRequired: false, transformFunction: null }, previousMonthIcon: { classPropertyName: "previousMonthIcon", publicName: "previousMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, nextMonthIcon: { classPropertyName: "nextMonthIcon", publicName: "nextMonthIcon", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange" }, host: { properties: { "attr.data-mode": "mode()", "attr.data-caption-layout": "captionLayout()", "attr.data-disabled": "isDisabled() ? \"\" : null", "attr.data-week-number": "showWeekNumber() ? \"\" : null", "attr.data-date-labels": "hasDateLabels() ? \"\" : null", "attr.dir": "dir()" }, classAttribute: "frame-calendar" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: `
     <div class="frame-calendar__header">
       <button
         class="frame-calendar__nav-button"
@@ -329,6 +330,14 @@ class FrCalendar {
           }
 
           <table class="frame-calendar__table" role="grid" [attr.aria-readonly]="true">
+            <colgroup>
+              @if (showWeekNumber()) {
+                <col class="frame-calendar__week-number-column" />
+              }
+              @for (weekday of weekdayLabels(); track weekday) {
+                <col class="frame-calendar__day-column" />
+              }
+            </colgroup>
             <thead>
               <tr>
                 @if (showWeekNumber()) {
@@ -405,6 +414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         '[attr.data-mode]': 'mode()',
                         '[attr.data-caption-layout]': 'captionLayout()',
                         '[attr.data-disabled]': 'isDisabled() ? "" : null',
+                        '[attr.data-week-number]': 'showWeekNumber() ? "" : null',
+                        '[attr.data-date-labels]': 'hasDateLabels() ? "" : null',
                         '[attr.dir]': 'dir()',
                     },
                     template: `
@@ -482,6 +493,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
           }
 
           <table class="frame-calendar__table" role="grid" [attr.aria-readonly]="true">
+            <colgroup>
+              @if (showWeekNumber()) {
+                <col class="frame-calendar__week-number-column" />
+              }
+              @for (weekday of weekdayLabels(); track weekday) {
+                <col class="frame-calendar__day-column" />
+              }
+            </colgroup>
             <thead>
               <tr>
                 @if (showWeekNumber()) {