@lifecorner/angular-ui-kit 3.34.0 → 3.36.0

package/README.md

@@ -149,6 +149,7 @@ and the CSP notes.
 | Pipeline | `lc-pipeline` | Status timeline of connected process nodes; per-node status (complete/current/pending/warning/error) with captions, horizontal/vertical |
 | Skeleton | `lc-skeleton` | Loading placeholder |
 | Spinner | `lc-spinner` | Loading indicator |
+| State Strip | `lc-state-strip` | The states of the last runs at a glance: one segment per run, the state as a shape, a keyboard grid named with the counts per state (3.36) |
 | Stepper | `lc-stepper` | Step-by-step progress |
 | Table | `lc-table` | Data table with sorting, filtering, pagination, formatter callbacks, cell styling hooks and custom cell templates |
 | Timeline | `lc-timeline` | Ordered list of events with times (`<time datetime>`) |

package/fesm2022/lifecorner-angular-ui-kit-alert.mjs

@@ -153,7 +153,7 @@ var AlertComponent = class AlertComponent {
 		} },
 		ngImport: i0,
 		template: "@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
-		styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"],
+		styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}@container lc-alert (16rem <= width < 30rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn)))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{order:1;flex:1 1 100%;align-self:auto;min-width:0;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__container:not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"],
 		dependencies: [{
 			kind: "component",
 			type: IconComponent,
@@ -206,7 +206,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "ariaLabel()"
 			},
 			template: "@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
-			styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"]
+			styles: [".lc-alert{display:block;width:100%;container:lc-alert/inline-size;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__action>a:where(:not(.btn)){display:flex;align-items:center;width:fit-content;max-width:100%;min-width:var(--size-min-touch-width);min-height:var(--size-min-touch-height);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-normal);color:var(--color-link);text-align:start;text-decoration-line:underline;text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;overflow-wrap:anywhere;border-radius:var(--border-radius-sm)}.lc-alert__action>a:where(:not(.btn)):hover{color:var(--color-link-hover);text-decoration-thickness:max(2px,.125em)}.lc-alert__action>a:where(:not(.btn)):focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert:has(>.lc-alert__container>.lc-alert__action>a:where(:not(.btn))){container:lc-alert/inline-size}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){flex-shrink:1;min-width:0;max-width:50%}@container lc-alert (width < 36rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action>a:where(:not(.btn)))>.lc-alert__action{order:1;flex:1 1 100%;max-width:none;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__action:has(>a:where(:not(.btn))){padding-inline-start:calc(24px + var(--spacing-3))}}@container lc-alert (16rem <= width < 30rem){.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn)))){flex-wrap:wrap}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__body{flex:1 1 0}.lc-alert:not(.lc-alert--actions-stacked) .lc-alert__container:has(>.lc-alert__action:not(:empty)):not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{order:1;flex:1 1 100%;align-self:auto;min-width:0;margin-top:var(--spacing-1)}.lc-alert--with-icon:not(.lc-alert--actions-stacked) .lc-alert__container:not(:has(>.lc-alert__action>a:where(:not(.btn))))>.lc-alert__action{padding-inline-start:calc(24px + var(--spacing-3))}}.lc-alert__close{flex-shrink:0;background:transparent;border:none;color:inherit;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center;position:relative}.lc-alert__close:before{content:\"\";position:absolute;inset:min(0px,(100% - 44px) / 2)}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@container lc-alert (width < 16rem){.lc-alert__container{flex-wrap:wrap;column-gap:var(--spacing-3);row-gap:var(--spacing-1);padding:var(--lc-density-padding-sm, var(--spacing-3))}.lc-alert__body{display:contents}.lc-alert__title,.lc-alert__content{overflow-wrap:break-word;hyphens:auto}.lc-alert__title{flex:1 1 0%;max-width:100%;margin-bottom:0}.lc-alert__content{order:1;flex:1 1 100%;min-width:0}.lc-alert__content:first-child{order:0;flex:1 1 0%;min-width:auto;max-width:100%}.lc-alert.lc-alert .lc-alert__container>.lc-alert__action.lc-alert__action.lc-alert__action{order:1;flex:1 1 100%;min-width:0;max-width:none;align-self:auto;margin-top:var(--spacing-3);padding-inline-start:0;--lc-btn-overflow-wrap: anywhere}.lc-alert__action>a:where(:not(.btn)){min-width:min(var(--size-min-touch-width),100%)}.lc-alert__close{margin-inline-start:auto}}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-on-success-subtle)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-on-error-subtle)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-on-warning-subtle)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-on-info-subtle)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-alert.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/alert/alert.component.ts","../../../../libs/angular-ui-kit/src/lib/alert/alert.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  model,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Layout of the projected actions (`slot=\"action\"`).\n * - `inline`: one action right of the body, vertically centred (3.2)\n * - `stacked`: the actions in their own row below the title and message;\n *   below 576 px of alert width one per line at full width, 8 px apart,\n *   from 576 px side by side at their natural width\n *\n * In the narrow layout (below 16rem) the actions start at the alert's inner\n * edge, not under the text.\n */\nexport type AlertActionsLayout = 'inline' | 'stacked';\n\n/**\n * Alert component for inline notifications.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Optional title and icon display\n * - Auto-mapped variant icons\n * - Dismissible with close button; `visible` is two-way bindable so a\n *   dismissed alert can be shown again\n * - Content projection for custom body\n * - Action slot for a button rendered right of the body (e.g. retry), or\n *   several actions stacked below it (`actionsLayout=\"stacked\"`); 3.12: a text\n *   link (`<a slot=\"action\" href=\"…\">`) as the one way forward gets a\n *   44 × 44 px target, link colour, an underline and a focus ring\n * - 3.13.1: narrow layout below 16rem inside the border (alerts under 258 px\n *   at 100 % text, 514 px at 200 %): the icon shares the first row with the\n *   title, message and actions take the full width below, the padding is one\n *   density step smaller (`--lc-density-padding-sm`), and long words\n *   hyphenate (`hyphens: auto`, needs the page's `lang`) or break instead of\n *   leaving the box\n * - The variant icon is decorative unless `iconAriaLabel` names it (the\n *   title and the colour carry the tone; no built-in English word)\n * - Accessible: `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n *\n * @example\n * ```html\n * <lc-alert variant=\"success\" title=\"Success!\" [dismissible]=\"true\">\n *   Your changes have been saved.\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Laden fehlgeschlagen\">\n *   Die Liste konnte nicht geladen werden.\n *   <lc-button slot=\"action\" variant=\"outline\" size=\"sm\">Erneut versuchen</lc-button>\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Senden gerade nicht möglich\">\n *   Wir können Ihre Nachricht gerade nicht senden.\n *   <a slot=\"action\" href=\"mailto:kontakt@beispiel.example\">Schreiben Sie uns an kontakt@beispiel.example</a>\n * </lc-alert>\n * ```\n */\n@Component({\n  selector: 'lc-alert',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'role()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class AlertComponent {\n  /**\n   * Visual variant of the alert\n   * @default 'info'\n   */\n  variant = input<AlertVariant>('info');\n\n  /**\n   * Alert title (optional)\n   */\n  title = input<string>();\n\n  /**\n   * Alert message (alternative to content projection)\n   */\n  message = input<string>();\n\n  /**\n   * Icon to display (defaults based on variant)\n   */\n  icon = input<string>();\n\n  /**\n   * Whether to show icon\n   * @default true\n   */\n  showIcon = input<boolean>(true);\n\n  /**\n   * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when\n   * the title already says what kind of message this is: the icon is then\n   * decorative (`aria-hidden`). The kit sets no default text, so no English\n   * word is read on a page in another language.\n   */\n  iconAriaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Layout of the projected actions (`slot=\"action\"`): `inline` — one action\n   * right of the body (3.2); `stacked` — the actions in their own row below\n   * the title and message, one per line at full width and 8 px apart below\n   * 576 px of alert width, side by side at their natural width from there.\n   * @default 'inline'\n   */\n  actionsLayout = input<AlertActionsLayout>('inline');\n\n  /**\n   * Whether the alert can be dismissed\n   * @default false\n   */\n  dismissible = input<boolean>(false);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /** Accessible name of the close button (`dismissible`). */\n  closeAriaLabel = input('Close alert');\n\n  /**\n   * Emitted when alert is dismissed\n   */\n  readonly dismissed = output<void>();\n\n  /**\n   * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n   * can set it back to `true` to show the alert again.\n   */\n  visible = model<boolean>(true);\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const classes = ['lc-alert', `lc-alert--${this.variant()}`];\n    if (this.actionsLayout() === 'stacked') {\n      classes.push('lc-alert--actions-stacked');\n    }\n    if (this.showIcon()) {\n      classes.push('lc-alert--with-icon');\n    }\n    if (!this.visible()) {\n      classes.push('lc-alert--hidden');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-alert__container';\n  });\n\n  /** Whether the variant should interrupt the user (error / warning). */\n  private readonly isUrgent = computed(() => {\n    const variant = this.variant();\n    return variant === 'error' || variant === 'warning';\n  });\n\n  /**\n   * Live-region role: `alert` (assertive) only for error / warning,\n   * `status` (polite) for info / success.\n   */\n  protected role = computed(() => (this.isUrgent() ? 'alert' : 'status'));\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => (this.isUrgent() ? 'assertive' : 'polite'));\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<AlertVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return this.icon() || icons[this.variant()];\n  });\n\n  /**\n   * Dismiss the alert\n   */\n  dismiss(): void {\n    this.visible.set(false);\n    this.dismissed.emit();\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dismiss();\n  }\n}\n","@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n"],"mappings":";;;;AA2FA,IAAa,iBAAb,MAAa,eAAc;CAKzB,UAAU,MAAoB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKrC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAKvB,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKzB,OAAO,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAMtB,WAAW,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAQ/B,gBAAgB,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CASpD,gBAAgB,MAA0B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAMnD,cAAc,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKnC,YAAY,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,iBAAiB,MAAM,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAK5B,YAAY,OAAM;CAM3B,UAAU,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAKpB,cAAc,eAAc;EACpC,MAAM,UAAU,CAAC,YAAY,aAAa,KAAK,QAAO,GAAI;EAC1D,IAAI,KAAK,cAAa,MAAO,WAC3B,QAAQ,KAAK,2BAA2B;EAE1C,IAAI,KAAK,SAAQ,GACf,QAAQ,KAAK,qBAAqB;EAEpC,IAAI,CAAC,KAAK,QAAO,GACf,QAAQ,KAAK,kBAAkB;EAEjC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKQ,mBAAmB,eAAc;EACzC,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAGe,WAAW,eAAc;EACxC,MAAM,UAAU,KAAK,QAAO;EAC5B,OAAO,YAAY,WAAW,YAAY;CAC5C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAMQ,OAAO,eAAgB,KAAK,SAAQ,IAAK,UAAU,UAAU,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAK7D,WAAW,eAAgB,KAAK,SAAQ,IAAK,cAAc,UAAU,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAKrE,cAAc,eAAc;EAOpC,OAAO,KAAK,KAAI,KAAM;GALpB,SAAS;GACT,OAAO;GACP,SAAS;GACT,MAAM;EAEc,EAAM,KAAK,QAAO;CAC1C,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,UAAO;EACL,KAAK,QAAQ,IAAI,KAAK;EACtB,KAAK,UAAU,KAAI;CACrB;CAKU,aAAa,OAAY;EACjC,MAAM,eAAc;EACpB,MAAM,gBAAe;EACrB,KAAK,QAAO;CACd;CA3IW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,SAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,SAAA;GAAA,aAAA;GAAA,kBAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UC3F3B;EA2CA,QAAA,CAAA,6hLAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDiCY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,eACR,CACb,iBAAiB;GAAC;GAAa;GAAmB;GAAe;GAA2B;EAAuB,CAAC,CACrH;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAYU,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAlB1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAU,YACR;GAAI,SACP,CAAC,aAAa;GAAC,eACT,CACb,iBAAiB;IAAC;IAAa;IAAmB;IAAe;IAA2B;GAAuB,CAAC,CACrH;GAAA,eAGc,kBAAkB;GAAI,iBACpB,wBAAwB;GAAM,MACzC;IACJ,WAAW;IACX,eAAe;IACf,oBAAoB;IACpB,qBAAqB;GACtB;GAAA,UAAA;GAAA,QAAA,CAAA,6hLAAA;EAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-alert.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/alert/alert.component.ts","../../../../libs/angular-ui-kit/src/lib/alert/alert.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  model,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport {\n  ICON_CHECK_CIRCLE,\n  ICON_CIRCLE_X,\n  ICON_EXCLAMATION_TRIANGLE,\n  ICON_INFORMATION_CIRCLE,\n  ICON_X_MARK,\n} from '@lifecorner/angular-ui-kit/icons';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Layout of the projected actions (`slot=\"action\"`).\n * - `inline`: one action right of the body, vertically centred (3.2); from\n *   16rem to 30rem inside the border (alerts of 258–481 px at 100 % text,\n *   514–961 px at 200 %) a button action takes its own row below the text,\n *   lined up with it, at its natural width (3.35)\n * - `stacked`: the actions in their own row below the title and message;\n *   below 576 px of alert width one per line at full width, 8 px apart,\n *   from 576 px side by side at their natural width\n *\n * In the narrow layout (below 16rem) the actions start at the alert's inner\n * edge, not under the text.\n */\nexport type AlertActionsLayout = 'inline' | 'stacked';\n\n/**\n * Alert component for inline notifications.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Optional title and icon display\n * - Auto-mapped variant icons\n * - Dismissible with close button; `visible` is two-way bindable so a\n *   dismissed alert can be shown again\n * - Content projection for custom body\n * - Action slot for a button rendered right of the body (e.g. retry), or\n *   several actions stacked below it (`actionsLayout=\"stacked\"`); 3.12: a text\n *   link (`<a slot=\"action\" href=\"…\">`) as the one way forward gets a\n *   44 × 44 px target, link colour, an underline and a focus ring\n * - 3.35: from 16rem to 30rem inside the border (alerts of 258–481 px at\n *   100 % text, 514–961 px at 200 %) an inline button action takes its own\n *   row below the text, lined up with it, at its natural width, so the\n *   message keeps about 200 px beside the ×\n * - 3.13.1: narrow layout below 16rem inside the border (alerts under 258 px\n *   at 100 % text, 514 px at 200 %): the icon shares the first row with the\n *   title, message and actions take the full width below, the padding is one\n *   density step smaller (`--lc-density-padding-sm`), and long words\n *   hyphenate (`hyphens: auto`, needs the page's `lang`) or break instead of\n *   leaving the box\n * - The variant icon is decorative unless `iconAriaLabel` names it (the\n *   title and the colour carry the tone; no built-in English word)\n * - Accessible: `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n *\n * @example\n * ```html\n * <lc-alert variant=\"success\" title=\"Success!\" [dismissible]=\"true\">\n *   Your changes have been saved.\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Laden fehlgeschlagen\">\n *   Die Liste konnte nicht geladen werden.\n *   <lc-button slot=\"action\" variant=\"outline\" size=\"sm\">Erneut versuchen</lc-button>\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Senden gerade nicht möglich\">\n *   Wir können Ihre Nachricht gerade nicht senden.\n *   <a slot=\"action\" href=\"mailto:kontakt@beispiel.example\">Schreiben Sie uns an kontakt@beispiel.example</a>\n * </lc-alert>\n * ```\n */\n@Component({\n  selector: 'lc-alert',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [\n    ɵprovideKitIcons([ICON_X_MARK, ICON_CHECK_CIRCLE, ICON_CIRCLE_X, ICON_EXCLAMATION_TRIANGLE, ICON_INFORMATION_CIRCLE]),\n  ],\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'role()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class AlertComponent {\n  /**\n   * Visual variant of the alert\n   * @default 'info'\n   */\n  variant = input<AlertVariant>('info');\n\n  /**\n   * Alert title (optional)\n   */\n  title = input<string>();\n\n  /**\n   * Alert message (alternative to content projection)\n   */\n  message = input<string>();\n\n  /**\n   * Icon to display (defaults based on variant)\n   */\n  icon = input<string>();\n\n  /**\n   * Whether to show icon\n   * @default true\n   */\n  showIcon = input<boolean>(true);\n\n  /**\n   * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when\n   * the title already says what kind of message this is: the icon is then\n   * decorative (`aria-hidden`). The kit sets no default text, so no English\n   * word is read on a page in another language.\n   */\n  iconAriaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Layout of the projected actions (`slot=\"action\"`): `inline` — one action\n   * right of the body (3.2); from 16rem to 30rem inside the border (alerts of\n   * 258–481 px at 100 % text, 514–961 px at 200 %) a button action takes its\n   * own row below the text, lined up with it, at its natural width (3.35);\n   * `stacked` — the actions in their own row below\n   * the title and message, one per line at full width and 8 px apart below\n   * 576 px of alert width, side by side at their natural width from there.\n   * @default 'inline'\n   */\n  actionsLayout = input<AlertActionsLayout>('inline');\n\n  /**\n   * Whether the alert can be dismissed\n   * @default false\n   */\n  dismissible = input<boolean>(false);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /** Accessible name of the close button (`dismissible`). */\n  closeAriaLabel = input('Close alert');\n\n  /**\n   * Emitted when alert is dismissed\n   */\n  readonly dismissed = output<void>();\n\n  /**\n   * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n   * can set it back to `true` to show the alert again.\n   */\n  visible = model<boolean>(true);\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const classes = ['lc-alert', `lc-alert--${this.variant()}`];\n    if (this.actionsLayout() === 'stacked') {\n      classes.push('lc-alert--actions-stacked');\n    }\n    if (this.showIcon()) {\n      classes.push('lc-alert--with-icon');\n    }\n    if (!this.visible()) {\n      classes.push('lc-alert--hidden');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-alert__container';\n  });\n\n  /** Whether the variant should interrupt the user (error / warning). */\n  private readonly isUrgent = computed(() => {\n    const variant = this.variant();\n    return variant === 'error' || variant === 'warning';\n  });\n\n  /**\n   * Live-region role: `alert` (assertive) only for error / warning,\n   * `status` (polite) for info / success.\n   */\n  protected role = computed(() => (this.isUrgent() ? 'alert' : 'status'));\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => (this.isUrgent() ? 'assertive' : 'polite'));\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<AlertVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return this.icon() || icons[this.variant()];\n  });\n\n  /**\n   * Dismiss the alert\n   */\n  dismiss(): void {\n    this.visible.set(false);\n    this.dismissed.emit();\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dismiss();\n  }\n}\n","@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent, type BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\n/** A count or status on a bottom-nav entry (`BottomNavItem.badge`, `moreBadge`). */\nexport interface BottomNavBadge {\n  /** Text or number inside the badge. */\n  value: string | number;\n  /** Badge colour (`lc-badge` variant). */\n  variant?: BadgeVariant;\n}\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n  /** Unique id. */\n  id: string;\n  /** Visible label, always shown below the icon. */\n  label: string;\n  /** Icon name (`lc-icon`), drawn at 24 px. */\n  icon: string;\n  /** Router path the item links to (`routerLink`). */\n  route: string;\n  /** Sort order; items without one keep their array order. */\n  displayOrder?: number;\n  /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n  badge?: BottomNavBadge;\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n  item: BottomNavItem;\n  current: boolean;\n  more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n *   `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n *   label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n *   its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n *   sub-page (`/household/members`) keeps its destination current; `/` only\n *   matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n *   rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n *   without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n *   slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n *   bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n *   (`z-index` 900). Reserve space for it at the end of the page (see\n *   `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n *   transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n *   variant=\"floating\"\n *   ariaLabel=\"Hauptnavigation\"\n *   [items]=\"[\n *     { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n *     { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n *   ]\"\n *   [activeRoute]=\"router.url\"\n *   (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-bottom-nav',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n  // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n  viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n  templateUrl: './bottom-nav.component.html',\n  styleUrl: './bottom-nav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-bottom-nav-host',\n  },\n})\nexport class BottomNavComponent {\n  /** Destinations, left to right (sorted by `displayOrder` when given). */\n  readonly items = input<readonly BottomNavItem[]>([]);\n\n  /**\n   * The current URL (e.g. `router.url`). The item whose route matches its\n   * first path segment is current; `/` matches only itself.\n   */\n  readonly activeRoute = input('');\n\n  /** Accessible name of the `<nav>` landmark. */\n  readonly ariaLabel = input('Main navigation');\n\n  /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n  readonly variant = input<BottomNavVariant>('docked');\n\n  /**\n   * Pin the bar to the bottom of the viewport. Turn off to render it in the\n   * document flow (previews, tests, a custom container).\n   */\n  readonly fixed = input(true);\n\n  /**\n   * Most entries the bar shows, \"More\" included. With more destinations, or\n   * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n   * \"More\" entry.\n   *\n   * @default 5\n   */\n  readonly maxItems = input(5);\n\n  /**\n   * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n   * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n   * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n   * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n   * and any others move behind it, as on overflow.\n   *\n   * @default false\n   */\n  readonly showMore = input(false);\n\n  /**\n   * Label of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'More'\n   */\n  readonly moreLabel = input('More');\n\n  /**\n   * Icon of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'dots'\n   */\n  readonly moreIcon = input('dots');\n\n  /**\n   * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n   * lists the remaining destinations. Empty renders the entry as a button that\n   * emits `moreClick`.\n   *\n   * @default ''\n   */\n  readonly moreRoute = input('');\n\n  /**\n   * Badge on the \"More\" entry (on overflow or with `showMore`), e.g. the open\n   * tasks on the pages behind it: drawn like an item badge and read after the\n   * label through `badgeAriaLabel`. The kit doesn't add up the hidden\n   * destinations' badges; pass the value to show. It sits on the bar's last\n   * entry; values up to three characters (`'99+'`) fit: on the last entry a\n   * badge that would pass the entry's edge moves left until it ends there\n   * (3.33). `null` or `undefined`: no badge.\n   *\n   * @default null\n   */\n  readonly moreBadge = input<BottomNavBadge | null | undefined>(null);\n\n  /**\n   * Text read after an item's label, and after the \"More\" label with\n   * `moreBadge`, when it has a badge; `{value}` is replaced with the badge\n   * value (e.g. \"3 new\").\n   *\n   * @default '{value} new'\n   */\n  readonly badgeAriaLabel = input('{value} new');\n\n  /** The current item was tapped again (e.g. scroll the page to the top). */\n  readonly reselect = output<BottomNavItem>();\n\n  /** The \"More\" entry was tapped while it has no `moreRoute`. */\n  readonly moreClick = output<void>();\n\n  /** Destinations in display order. */\n  private readonly sortedItems = computed(() =>\n    [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n  );\n\n  /** Path of `activeRoute` without query and fragment. */\n  private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n  /**\n   * Entries as rendered: destinations plus, on overflow or with `showMore`,\n   * the \"More\" entry, which then takes one of the `maxItems` entries.\n   */\n  protected readonly entries = computed<BottomNavEntry[]>(() => {\n    const items = this.sortedItems();\n    const max = Math.max(1, Math.floor(this.maxItems()));\n    if (!this.showMore() && items.length <= max) {\n      return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n    }\n    const visible = items.slice(0, max - 1);\n    const hidden = items.slice(max - 1);\n    const moreRoute = this.moreRoute();\n    const moreItem: BottomNavItem = {\n      id: '__more',\n      label: this.moreLabel(),\n      icon: this.moreIcon(),\n      route: moreRoute,\n      badge: this.moreBadge() ?? undefined,\n    };\n    const moreCurrent =\n      (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n    return [\n      ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n      { item: moreItem, current: moreCurrent, more: true },\n    ];\n  });\n\n  protected readonly navClasses = computed(() => {\n    const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n    if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n    return classes.join(' ');\n  });\n\n  /** Visually hidden badge text for screen readers. */\n  protected badgeText(item: BottomNavItem): string {\n    return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n  }\n\n  protected onItemClick(entry: BottomNavEntry): void {\n    if (entry.current && !entry.more) {\n      this.reselect.emit(entry.item);\n    }\n  }\n\n  protected onMoreButtonClick(): void {\n    this.moreClick.emit();\n  }\n\n  /** First-segment match: `/household/members` keeps `/household` current. */\n  private matches(route: string): boolean {\n    const path = this.activePath();\n    const target = route.split(/[?#]/)[0] || '/';\n    if (target === '/') return path === '/';\n    const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n    return path === normalized || path.startsWith(`${normalized}/`);\n  }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_DOTS } from '@lifecorner/angular-ui-kit/icons';\nimport { BadgeComponent, type BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\n\n/** A count or status on a bottom-nav entry (`BottomNavItem.badge`, `moreBadge`). */\nexport interface BottomNavBadge {\n  /** Text or number inside the badge. */\n  value: string | number;\n  /** Badge colour (`lc-badge` variant). */\n  variant?: BadgeVariant;\n}\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n  /** Unique id. */\n  id: string;\n  /** Visible label, always shown below the icon. */\n  label: string;\n  /** Icon name (`lc-icon`), drawn at 24 px. */\n  icon: string;\n  /** Router path the item links to (`routerLink`). */\n  route: string;\n  /** Sort order; items without one keep their array order. */\n  displayOrder?: number;\n  /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n  badge?: BottomNavBadge;\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n  item: BottomNavItem;\n  current: boolean;\n  more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n *   `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n *   label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n *   its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n *   sub-page (`/household/members`) keeps its destination current; `/` only\n *   matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n *   rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n *   without `moreRoute` the entry is a button that emits `moreClick`.\n * - `showMore`: \"More\" on request, also when every destination fits (fixed\n *   slots); it takes one of the `maxItems` entries.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n *   bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n *   (`z-index` 900). Reserve space for it at the end of the page (see\n *   `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n *   transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n *   variant=\"floating\"\n *   ariaLabel=\"Hauptnavigation\"\n *   [items]=\"[\n *     { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n *     { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n *   ]\"\n *   [activeRoute]=\"router.url\"\n *   (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-bottom-nav',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n  // The default \"more\" glyph (moreIcon); the items' glyphs are the app's.\n  viewProviders: [ɵprovideKitIcons([ICON_DOTS])],\n  templateUrl: './bottom-nav.component.html',\n  styleUrl: './bottom-nav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-bottom-nav-host',\n  },\n})\nexport class BottomNavComponent {\n  /** Destinations, left to right (sorted by `displayOrder` when given). */\n  readonly items = input<readonly BottomNavItem[]>([]);\n\n  /**\n   * The current URL (e.g. `router.url`). The item whose route matches its\n   * first path segment is current; `/` matches only itself.\n   */\n  readonly activeRoute = input('');\n\n  /** Accessible name of the `<nav>` landmark. */\n  readonly ariaLabel = input('Main navigation');\n\n  /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n  readonly variant = input<BottomNavVariant>('docked');\n\n  /**\n   * Pin the bar to the bottom of the viewport. Turn off to render it in the\n   * document flow (previews, tests, a custom container).\n   */\n  readonly fixed = input(true);\n\n  /**\n   * Most entries the bar shows, \"More\" included. With more destinations, or\n   * with `showMore`, the first `maxItems − 1` stay and the rest go behind the\n   * \"More\" entry.\n   *\n   * @default 5\n   */\n  readonly maxItems = input(5);\n\n  /**\n   * Always end the bar with the \"More\" entry (`moreLabel`, `moreIcon`, and\n   * `moreRoute` or `moreClick`), even when every destination fits: for a bar\n   * with fixed slots, such as two destinations plus \"More\". \"More\" takes one\n   * of the `maxItems` entries, so the first `maxItems − 1` destinations stay\n   * and any others move behind it, as on overflow.\n   *\n   * @default false\n   */\n  readonly showMore = input(false);\n\n  /**\n   * Label of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'More'\n   */\n  readonly moreLabel = input('More');\n\n  /**\n   * Icon of the \"More\" entry (on overflow or with `showMore`).\n   *\n   * @default 'dots'\n   */\n  readonly moreIcon = input('dots');\n\n  /**\n   * Route of the \"More\" entry (on overflow or with `showMore`): a page that\n   * lists the remaining destinations. Empty renders the entry as a button that\n   * emits `moreClick`.\n   *\n   * @default ''\n   */\n  readonly moreRoute = input('');\n\n  /**\n   * Badge on the \"More\" entry (on overflow or with `showMore`), e.g. the open\n   * tasks on the pages behind it: drawn like an item badge and read after the\n   * label through `badgeAriaLabel`. The kit doesn't add up the hidden\n   * destinations' badges; pass the value to show. It sits on the bar's last\n   * entry; values up to three characters (`'99+'`) fit: on the last entry a\n   * badge that would pass the entry's edge moves left until it ends there\n   * (3.33). `null` or `undefined`: no badge. Known limit (3.35, 052-n3):\n   * '99+' on the last entry of a five-entry bar at 360 px starts 3.2 px\n   * (docked) / 3.4 px (floating) left of the pill centre and covers two of the\n   * More glyph's three dots; the label and the read badge text still name the\n   * entry.\n   *\n   * @default null\n   */\n  readonly moreBadge = input<BottomNavBadge | null | undefined>(null);\n\n  /**\n   * Text read after an item's label, and after the \"More\" label with\n   * `moreBadge`, when it has a badge; `{value}` is replaced with the badge\n   * value (e.g. \"3 new\").\n   *\n   * @default '{value} new'\n   */\n  readonly badgeAriaLabel = input('{value} new');\n\n  /** The current item was tapped again (e.g. scroll the page to the top). */\n  readonly reselect = output<BottomNavItem>();\n\n  /** The \"More\" entry was tapped while it has no `moreRoute`. */\n  readonly moreClick = output<void>();\n\n  /** Destinations in display order. */\n  private readonly sortedItems = computed(() =>\n    [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n  );\n\n  /** Path of `activeRoute` without query and fragment. */\n  private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n  /**\n   * Entries as rendered: destinations plus, on overflow or with `showMore`,\n   * the \"More\" entry, which then takes one of the `maxItems` entries.\n   */\n  protected readonly entries = computed<BottomNavEntry[]>(() => {\n    const items = this.sortedItems();\n    const max = Math.max(1, Math.floor(this.maxItems()));\n    if (!this.showMore() && items.length <= max) {\n      return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n    }\n    const visible = items.slice(0, max - 1);\n    const hidden = items.slice(max - 1);\n    const moreRoute = this.moreRoute();\n    const moreItem: BottomNavItem = {\n      id: '__more',\n      label: this.moreLabel(),\n      icon: this.moreIcon(),\n      route: moreRoute,\n      badge: this.moreBadge() ?? undefined,\n    };\n    const moreCurrent =\n      (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n    return [\n      ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n      { item: moreItem, current: moreCurrent, more: true },\n    ];\n  });\n\n  protected readonly navClasses = computed(() => {\n    const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n    if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n    return classes.join(' ');\n  });\n\n  /** Visually hidden badge text for screen readers. */\n  protected badgeText(item: BottomNavItem): string {\n    return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n  }\n\n  protected onItemClick(entry: BottomNavEntry): void {\n    if (entry.current && !entry.more) {\n      this.reselect.emit(entry.item);\n    }\n  }\n\n  protected onMoreButtonClick(): void {\n    this.moreClick.emit();\n  }\n\n  /** First-segment match: `/household/members` keeps `/household` current. */\n  private matches(route: string): boolean {\n    const path = this.activePath();\n    const target = route.split(/[?#]/)[0] || '/';\n    if (target === '/') return path === '/';\n    const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n    return path === normalized || path.startsWith(`${normalized}/`);\n  }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n"],"mappings":";;;;;;;;AAoGA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,QAAQ,MAAgC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAM3C,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,YAAY,MAAM,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGpC,UAAU,MAAwB,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAM3C,QAAQ,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CASnB,WAAW,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAWnB,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAOvB,YAAY,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOzB,WAAW,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CASxB,YAAY,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAiBrB,YAAY,MAAyC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAS1D,iBAAiB,MAAM,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAGrC,WAAW,OAAM;CAGjB,YAAY,OAAM;CAGV,cAAc,eAC7B,CAAC,GAAG,KAAK,MAAK,CAAE,CAAC,CAAC,MAAM,GAAG,OAAO,EAAE,gBAAgB,MAAM,EAAE,gBAAgB,EAAE,GAC/E,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGgB,aAAa,eAAe,KAAK,YAAW,CAAE,CAAC,MAAM,MAAM,CAAC,CAAC,MAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAMrE,UAAU,eAAgC;EAC3D,MAAM,QAAQ,KAAK,YAAW;EAC9B,MAAM,MAAM,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,SAAQ,CAAE,CAAC;EACnD,IAAI,CAAC,KAAK,SAAQ,KAAM,MAAM,UAAU,KACtC,OAAO,MAAM,KAAK,UAAU;GAAE;GAAM,SAAS,KAAK,QAAQ,KAAK,KAAK;GAAG,MAAM;EAAK,EAAG;EAEvF,MAAM,UAAU,MAAM,MAAM,GAAG,MAAM,CAAC;EACtC,MAAM,SAAS,MAAM,MAAM,MAAM,CAAC;EAClC,MAAM,YAAY,KAAK,UAAS;EAChC,MAAM,WAA0B;GAC9B,IAAI;GACJ,OAAO,KAAK,UAAS;GACrB,MAAM,KAAK,SAAQ;GACnB,OAAO;GACP,OAAO,KAAK,UAAS,KAAM;EAC5B;EACD,MAAM,cACH,cAAc,MAAM,KAAK,QAAQ,SAAS,KAAM,OAAO,MAAM,SAAS,KAAK,QAAQ,KAAK,KAAK,CAAC;EACjG,OAAO,CACL,GAAG,QAAQ,KAAK,UAAU;GAAE;GAAM,SAAS,KAAK,QAAQ,KAAK,KAAK;GAAG,MAAM;EAAK,EAAG,GACnF;GAAE,MAAM;GAAU,SAAS;GAAa,MAAM;EAAI,CACnD;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,aAAa,eAAc;EAC5C,MAAM,UAAU,CAAC,iBAAiB,kBAAkB,KAAK,QAAO,GAAI;EACpE,IAAI,KAAK,MAAK,GAAI,QAAQ,KAAK,sBAAsB;EACrD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGQ,UAAU,MAAmB;EACrC,OAAO,KAAK,QAAQ,KAAK,eAAc,CAAE,CAAC,QAAQ,WAAW,OAAO,KAAK,MAAM,KAAK,CAAC,IAAI;CAC3F;CAEU,YAAY,OAAqB;EACzC,IAAI,MAAM,WAAW,CAAC,MAAM,MAC1B,KAAK,SAAS,KAAK,MAAM,IAAI;CAEjC;CAEU,oBAAiB;EACzB,KAAK,UAAU,KAAI;CACrB;CAGQ,QAAQ,OAAa;EAC3B,MAAM,OAAO,KAAK,WAAU;EAC5B,MAAM,SAAS,MAAM,MAAM,MAAM,CAAC,CAAC,MAAM;EACzC,IAAI,WAAW,KAAK,OAAO,SAAS;EACpC,MAAM,aAAa,OAAO,SAAS,GAAG,IAAI,OAAO,MAAM,GAAG,EAAE,IAAI;EAChE,OAAO,SAAS,cAAc,KAAK,WAAW,GAAG,WAAU,EAAG;CAChE;CAjKW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,UAAA;GAAA,WAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,qBAAA;EAAA,UAAA;EAAA,UCpG/B;EA4CA,QAAA,CAAA,+0HAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD8CY;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAY;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAc,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,eAExD,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;EAAC,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQnC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAb9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP;IAAC;IAAkB;IAAc;IAAe;GAAc;GAAC,eAEzD,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;GAAC,iBAG7B,wBAAwB;GAAM,MACzC,EACJ,OAAO,qBACR;GAAA,UAAA;GAAA,QAAA,CAAA,+0HAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-button.mjs

@@ -171,8 +171,8 @@ var ButtonComponent = class ButtonComponent {
 			descendants: true
 		}],
 		ngImport: i0,
-		template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
-		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
+		template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-inverse-outline': variant() === 'inverse-outline',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
+		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}.btn-inverse-outline{background-color:#11182780;border-color:var(--color-neutral-white);color:var(--color-neutral-white);box-shadow:0 0 0 1px #111827}.btn-inverse-outline:hover:not(:disabled,.btn-loading){background-color:#1118279e}.btn-inverse-outline:active:not(:disabled,.btn-loading){background-color:#111827bd}.btn-inverse-outline:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}.btn-inverse-outline{border-color:ButtonText}a.btn-inverse-outline{border-color:LinkText}.btn-inverse-outline:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}.btn.btn-inverse-outline.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}.btn.btn-inverse-outline.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
 		dependencies: [{
 			kind: "directive",
 			type: NgClass,
@@ -196,8 +196,8 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [NgClass],
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
-			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
+			template: "<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-inverse-outline': variant() === 'inverse-outline',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n",
+			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}.btn-inverse-outline{background-color:#11182780;border-color:var(--color-neutral-white);color:var(--color-neutral-white);box-shadow:0 0 0 1px #111827}.btn-inverse-outline:hover:not(:disabled,.btn-loading){background-color:#1118279e}.btn-inverse-outline:active:not(:disabled,.btn-loading){background-color:#111827bd}.btn-inverse-outline:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}.btn-inverse-outline{border-color:ButtonText}a.btn-inverse-outline{border-color:LinkText}.btn-inverse-outline:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}.btn.btn-inverse-outline.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}.btn.btn-inverse-outline.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -423,7 +423,7 @@ var ButtonLinkComponent = class ButtonLinkComponent {
       select="[slot='icon-after']"
     />`,
 		isInline: true,
-		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
+		styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}.btn-inverse-outline{background-color:#11182780;border-color:var(--color-neutral-white);color:var(--color-neutral-white);box-shadow:0 0 0 1px #111827}.btn-inverse-outline:hover:not(:disabled,.btn-loading){background-color:#1118279e}.btn-inverse-outline:active:not(:disabled,.btn-loading){background-color:#111827bd}.btn-inverse-outline:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}.btn-inverse-outline{border-color:ButtonText}a.btn-inverse-outline{border-color:LinkText}.btn-inverse-outline:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}.btn.btn-inverse-outline.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}.btn.btn-inverse-outline.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
@@ -443,7 +443,7 @@ i0.ɵɵngDeclareClassMetadata({
 			encapsulation: ViewEncapsulation.None,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { "[class]": "hostClasses()" },
-			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
+			styles: [".btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);border:1px solid transparent;border-radius:var(--border-radius-full);cursor:pointer;transition-property:color,background-color,border-color,box-shadow;transition-duration:var(--animation-duration-base);transition-timing-function:var(--animation-timing-ease);white-space:normal;text-align:center;overflow-wrap:var(--lc-btn-overflow-wrap, break-word);-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.btn:disabled,.btn.btn-loading{opacity:.5;cursor:not-allowed;pointer-events:auto}.btn.btn-loading:focus-visible{outline-color:var(--color-text-primary)}a.btn{text-decoration:none}.btn-primary{background-color:var(--color-primary-fill);color:var(--color-on-primary)}.btn-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-hover)}.btn-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-fill-active)}.btn-secondary{background-color:var(--color-secondary-fill);color:var(--color-on-secondary)}.btn-secondary:hover:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-hover)}.btn-secondary:active:not(:disabled,.btn-loading){background-color:var(--color-secondary-fill-active)}.btn-outline{background-color:#84c7d40f;border-color:var(--color-border-strong);color:var(--color-text-primary)}.btn-outline:hover:not(:disabled,.btn-loading){background-color:var(--color-primary-600);border-color:var(--color-primary-500);color:var(--color-neutral-white)}.btn-outline:active:not(:disabled,.btn-loading){filter:brightness(.92)}.btn-outline.btn-tone-primary{border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:hover:not(:disabled,.btn-loading){background-color:var(--color-surface-selected);border-color:var(--color-primary-600);color:var(--color-primary-700)}.btn-outline.btn-tone-primary:active:not(:disabled,.btn-loading){background-color:var(--color-primary-200);filter:none}.btn-ghost{background-color:var(--lc-button-ghost-bg, transparent);color:var(--lc-button-ghost-fg, var(--color-text-secondary))}.btn-ghost:hover:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-hover-bg, var(--color-surface-hover));color:var(--lc-button-ghost-hover-fg, var(--lc-button-ghost-fg, var(--color-text-primary)))}.btn-ghost:active:not(:disabled,.btn-loading){background-color:var(--lc-button-ghost-active-bg, var(--color-surface-selected))}.btn-link{background-color:transparent;color:var(--lc-button-link-fg, var(--color-primary-600));padding:0;border:none}.btn-link:hover:not(:disabled,.btn-loading){color:var(--lc-button-link-hover-fg, var(--color-primary-700));text-decoration:underline}.btn-link:active:not(:disabled,.btn-loading){color:var(--lc-button-link-active-fg, var(--color-primary-800))}.btn-danger{background-color:var(--color-error-fill);color:var(--color-on-error)}.btn-danger:hover:not(:disabled,.btn-loading){background-color:var(--color-error-fill-hover)}.btn-danger:active:not(:disabled,.btn-loading){background-color:var(--color-error-fill-active)}.btn-warning{background-color:#e1a040;color:var(--color-on-warning)}.btn-warning:hover:not(:disabled,.btn-loading){filter:brightness(1.05)}.btn-warning:active:not(:disabled,.btn-loading){filter:brightness(.94)}.btn-info{background-color:#3b6588;color:var(--color-neutral-white)}.btn-info:hover:not(:disabled,.btn-loading){background-color:#27445c}.btn-info:active:not(:disabled,.btn-loading){background-color:#27445c;filter:brightness(.85)}.btn-inverse{background-color:var(--color-neutral-white);color:var(--lc-button-inverse-fg, #0d353d)}.btn-inverse:hover:not(:disabled,.btn-loading){background-color:#f0f8fa}.btn-inverse:active:not(:disabled,.btn-loading){background-color:#e0f1f4}.btn-inverse:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}.btn-inverse-outline{background-color:#11182780;border-color:var(--color-neutral-white);color:var(--color-neutral-white);box-shadow:0 0 0 1px #111827}.btn-inverse-outline:hover:not(:disabled,.btn-loading){background-color:#1118279e}.btn-inverse-outline:active:not(:disabled,.btn-loading){background-color:#111827bd}.btn-inverse-outline:focus-visible{outline-color:var(--color-neutral-white);box-shadow:0 0 0 2px #111827}@media(forced-colors:active){.btn-inverse{border-color:ButtonText}a.btn-inverse{border-color:LinkText}.btn-inverse:focus-visible{outline-color:Highlight}.btn-inverse-outline{border-color:ButtonText}a.btn-inverse-outline{border-color:LinkText}.btn-inverse-outline:focus-visible{outline-color:Highlight}}.btn.btn-inverse.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}.btn.btn-inverse-outline.btn-loading:focus-visible{opacity:1;outline-color:var(--color-neutral-white)}@media(forced-colors:active){.btn.btn-loading{color:GrayText;border-color:GrayText}.btn.btn-loading:focus-visible{opacity:1;outline-color:Highlight}.btn.btn-inverse.btn-loading:focus-visible{outline-color:Highlight}.btn.btn-inverse-outline.btn-loading:focus-visible{outline-color:Highlight}}.btn-xs{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs)}.btn-sm{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm)}.btn-md{padding:var(--spacing-2-5) var(--spacing-4);font-size:var(--font-size-base)}.btn-lg{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-lg)}.btn-icon-only.btn-xs{padding:var(--spacing-1);width:calc(var(--spacing-1) * 2 + 1em);height:calc(var(--spacing-1) * 2 + 1em)}.btn-icon-only.btn-sm{padding:var(--spacing-2);width:calc(var(--spacing-2) * 2 + 1em);height:calc(var(--spacing-2) * 2 + 1em)}.btn-icon-only.btn-md{padding:var(--spacing-2-5);width:calc(var(--spacing-2-5) * 2 + 1em);height:calc(var(--spacing-2-5) * 2 + 1em)}.btn-icon-only.btn-lg{padding:var(--spacing-3);width:calc(var(--spacing-3) * 2 + 1.2em);height:calc(var(--spacing-3) * 2 + 1.2em)}.btn-full-width{width:100%}.btn-inline{display:inline;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;white-space:normal;text-align:inherit;border-radius:var(--border-radius-sm)}.btn.btn-inline{text-decoration:var(--lc-btn-inline-text-decoration, underline);text-decoration-thickness:max(1px,.0625em);text-underline-offset:.15em;transition-property:color,background-color,border-color,box-shadow}.btn.btn-inline:hover:not(:disabled,.btn-loading){text-decoration-thickness:max(2px,.125em)}.btn-link.btn-flush:not(.btn-icon-only,.btn-inline){padding-inline:0;min-width:var(--size-min-touch-width, 2.75rem);min-height:var(--size-min-touch-height, 2.75rem);justify-content:var(--lc-btn-flush-align, start);text-align:var(--lc-btn-flush-align, start);border-radius:var(--border-radius-sm)}.loading-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.icon-before,.icon-after{display:inline-flex;align-items:center}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/lifecorner-angular-ui-kit-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-button.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/button/button.component.ts","../../../../libs/angular-ui-kit/src/lib/button/button.component.html","../../../../libs/angular-ui-kit/src/lib/button/button-link.component.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ViewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'link'\n  | 'danger'\n  | 'warning'\n  | 'info'\n  | 'inverse';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * Colour tone of `variant=\"outline\"` (3.15). `primary`: text and border in the\n * primary colour. Other variants ignore it.\n */\nexport type ButtonTone = 'neutral' | 'primary';\n\n@Component({\n  selector: 'lc-button',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Button component for user actions and form submissions.\n *\n * Features:\n * - Multiple variants (primary, secondary, outline, ghost, link, danger,\n *   warning, info, inverse)\n * - Size options (xs, sm, md, lg)\n * - Loading state with spinner\n * - Icon-only mode\n * - Full-width layout option\n * - Keyboard and focus handling\n * - Accessible with ARIA attributes\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions, the next-step-card's narrow actions and the narrow alert's actions.\n *\n * @example\n * ```html\n * <lc-button variant=\"primary\" size=\"md\">Save</lc-button>\n * ```\n */\nexport class ButtonComponent {\n  /**\n   * Visual variant. `inverse` is a white pill with dark ink and a white focus\n   * ring for dark, coloured or image backgrounds that don't follow the theme,\n   * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,\n   * accent-violet). It looks the same in both themes. Not for light backgrounds\n   * or `variant=\"light\"` heroes. CSS hook `--lc-button-inverse-fg` (default\n   * `#0d353d`) sets its ink; keep 4.5:1 on white.\n   * @default 'primary'\n   */\n  readonly variant = input<ButtonVariant>('primary');\n\n  /**\n   * Colour tone of `variant=\"outline\"`: `'primary'` sets text and border to\n   * the primary colour (`--color-primary-700` / `-600`; hover\n   * `--color-surface-selected`, active `--color-primary-200`). Other variants\n   * ignore it.\n   * @default 'neutral'\n   */\n  readonly tone = input<ButtonTone>('neutral');\n  readonly size = input<ButtonSize>('md');\n\n  /**\n   * Natively disabled: the button leaves the focus order and ignores clicks.\n   * For a temporary busy state that keeps focus, use `loading`.\n   * @default false\n   */\n  readonly disabled = input(false);\n\n  /**\n   * Shows a spinner in place of the icon slots and makes the button\n   * unavailable without removing it from the focus order (3.17). The inner\n   * `<button>` gets `aria-disabled=\"true\"` and `aria-busy=\"true\"` instead of\n   * the native `disabled`, so a focused button keeps focus. While it is\n   * loading, click, Enter and Space are ignored: `clicked` is not emitted, the\n   * click event stops at the button (a `(click)` on the host doesn't fire),\n   * and a `type=\"submit\"`/`\"reset\"` button doesn't submit or reset its form.\n   * The look is unchanged: spinner, 50 % opacity, no hover. Screen readers may\n   * announce the state change (\"unavailable\"/\"dimmed\"), but the button doesn't\n   * announce the outcome: the page does that, for example with a polite live\n   * region (\"USM wird geladen.\", then the result). `disabledReason` also\n   * applies while loading. If `disabled` is set too, the native `disabled`\n   * wins.\n   * @default false\n   */\n  readonly loading = input(false);\n  readonly iconOnly = input(false);\n  readonly fullWidth = input(false);\n  readonly ariaLabel = input('');\n\n  /**\n   * Id, or space-separated ids, of elements that describe the button, set as\n   * `aria-describedby` on the inner `<button>`: a screen reader reads the\n   * button's name and then their text, also while `disabled` or `loading`.\n   * Use it to tie a visible reason line (\"Wählen Sie zuerst eine Datei.\") to a\n   * disabled button; `disabledReason` stays a tooltip for pointers (with both\n   * set, the description comes from the ids, so the tooltip is not read\n   * twice). Empty renders no attribute. The kit does not check that the ids\n   * exist. Don't put `aria-describedby` on `<lc-button>` itself: it would stay\n   * on the host. (3.26)\n   * @default ''\n   */\n  readonly ariaDescribedBy = input('');\n  readonly type = input<ButtonType>('button');\n\n  /**\n   * Native tooltip (title attribute) on the button.\n   */\n  readonly title = input('');\n\n  /**\n   * Reason shown as tooltip while the button is disabled (or loading).\n   * Takes precedence over `title` in that state. The tooltip also appears\n   * over the disabled button — the component guarantees the inner button\n   * never gets `pointer-events: none`.\n   */\n  readonly disabledReason = input('');\n\n  /**\n   * Render as an inline text button that inherits font size, weight and\n   * line-height from the surrounding text (for links inside copy, clickable\n   * row titles, linked counters). Pair with `variant=\"link\"`.\n   * @default false\n   */\n  readonly inline = input(false);\n\n  /**\n   * Drop the inline padding so a `variant=\"link\"` button sits flush with the\n   * content edge: the label starts at the edge, and the button keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the host or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  readonly clicked = output<void>();\n  readonly focused = output<void>();\n  readonly blurred = output<void>();\n\n  @ViewChild('buttonElement') buttonElement!: ElementRef<HTMLButtonElement>;\n\n  readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  /**\n   * Tooltip actually applied to the button: `disabledReason` while disabled,\n   * `title` otherwise.\n   */\n  readonly effectiveTitle = computed(() => {\n    if (this.isDisabled() && this.disabledReason()) {\n      return this.disabledReason();\n    }\n    return this.title() || null;\n  });\n\n  /**\n   * Emits `clicked` unless the button is disabled or loading. While loading\n   * (and not natively disabled) the event is cancelled and stopped, so a form\n   * isn't submitted and a host `(click)` doesn't fire. The parameter is\n   * optional, so callers without an argument still work.\n   */\n  handleClick(event?: Event): void {\n    if (this.loading() && !this.disabled()) {\n      event?.preventDefault();\n      event?.stopImmediatePropagation();\n      return;\n    }\n    if (!this.isDisabled()) {\n      this.clicked.emit();\n    }\n  }\n\n  handleFocus(): void {\n    this.focused.emit();\n  }\n\n  handleBlur(): void {\n    this.blurred.emit();\n  }\n\n  focus(): void {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  blur(): void {\n    this.buttonElement?.nativeElement.blur();\n  }\n}\n","<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport type { ButtonSize, ButtonTone, ButtonVariant } from './button.component';\n\n/**\n * `lc-button` styling on a native link: `<a lcButton href=\"…\">`.\n *\n * Use it for navigation that looks like a button — calls to action, \"read\n * more\" links, a language switch. The host *is* the anchor, so every native\n * link attribute (`href`, `hreflang`, `lang`, `rel`, `target`, `download`,\n * `title`, `aria-*`) passes through untouched, and the component adds no event\n * listeners: after server-side rendering or prerendering the markup is a plain\n * `<a class=\"btn btn-primary btn-md\" href=\"…\">` that works without JavaScript.\n * For a description, set `aria-describedby` on the anchor itself; unlike\n * `lc-button` there is no `ariaDescribedBy` input (3.26).\n * `routerLink` can sit on the same anchor for in-app navigation.\n *\n * Same variants, sizes and modifiers as `lc-button` (it shares its stylesheet).\n * Use `size=\"lg\"` (48.5 px) where the link must meet the 44 px touch target. A link\n * cannot be disabled or busy — render plain text or an `lc-button` for those\n * states. An `iconOnly` link needs an `aria-label`.\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions, the next-step-card's narrow actions and the narrow alert's actions.\n *\n * @example\n * ```html\n * <a lcButton variant=\"primary\" size=\"lg\" href=\"/de/neuigkeiten\">Schau uns beim Bauen zu</a>\n * <a lcButton variant=\"ghost\" href=\"/en/security\" hreflang=\"en\" lang=\"en\">English</a>\n * <a lcButton variant=\"outline\" href=\"https://www.linkedin.com/in/…\" rel=\"me\">\n *   <lc-icon slot=\"icon-before\" name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n *   LinkedIn\n * </a>\n * ```\n */\n@Component({\n  // An attribute selector on purpose: the anchor must stay the element in the\n  // DOM so native link behaviour and attributes are untouched.\n  selector: 'a[lcButton]',\n  template: `<ng-content select=\"[slot='icon-before']\" /><ng-content /><ng-content\n      select=\"[slot='icon-after']\"\n    />`,\n  // The same stylesheet as lc-button: identical style text is registered once,\n  // whichever of the two renders first.\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ButtonLinkComponent {\n  /**\n   * Visual variant. `inverse` is a white pill with dark ink and a white focus\n   * ring for dark, coloured or image backgrounds that don't follow the theme,\n   * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,\n   * accent-violet). It looks the same in both themes. Not for light backgrounds\n   * or `variant=\"light\"` heroes. CSS hook `--lc-button-inverse-fg` (default\n   * `#0d353d`) sets its ink; keep 4.5:1 on white.\n   * @default 'primary'\n   */\n  readonly variant = input<ButtonVariant>('primary');\n  /**\n   * Colour tone of `variant=\"outline\"`, as on `lc-button`: `'primary'` sets\n   * text and border to the primary colour (`--color-primary-700` / `-600`;\n   * hover `--color-surface-selected`, active `--color-primary-200`). Other\n   * variants ignore it.\n   * @default 'neutral'\n   */\n  readonly tone = input<ButtonTone>('neutral');\n  /** Size, as on `lc-button`. `lg` (48.5 px high) meets the 44 px touch target. */\n  readonly size = input<ButtonSize>('md');\n  /** Stretch the link to the full width of its container. */\n  readonly fullWidth = input(false);\n  /** Square icon-only link. Give the anchor an `aria-label`. */\n  readonly iconOnly = input(false);\n  /**\n   * Flow with the surrounding text instead of forming a pill (inherits font\n   * size, weight and line-height). Pair with `variant=\"link\"`.\n   */\n  readonly inline = input(false);\n  /**\n   * Drop the inline padding so a `variant=\"link\"` link sits flush with the\n   * content edge: the label starts at the edge, and the link keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the link or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  /** Classes on the anchor; merged with the consumer's own `class`. */\n  protected readonly hostClasses = computed(() => {\n    const classes = ['btn', `btn-${this.variant()}`, `btn-${this.size()}`];\n    if (this.iconOnly()) classes.push('btn-icon-only');\n    if (this.fullWidth()) classes.push('btn-full-width');\n    if (this.inline()) classes.push('btn-inline');\n    if (this.flush()) classes.push('btn-flush');\n    if (this.variant() === 'outline' && this.tone() === 'primary') classes.push('btn-tone-primary');\n    return classes.join(' ');\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-button.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/button/button.component.ts","../../../../libs/angular-ui-kit/src/lib/button/button.component.html","../../../../libs/angular-ui-kit/src/lib/button/button-link.component.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  output,\n  computed,\n  ViewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgClass } from '@angular/common';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'link'\n  | 'danger'\n  | 'warning'\n  | 'info'\n  | 'inverse'\n  | 'inverse-outline';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * Colour tone of `variant=\"outline\"` (3.15). `primary`: text and border in the\n * primary colour. Other variants ignore it.\n */\nexport type ButtonTone = 'neutral' | 'primary';\n\n@Component({\n  selector: 'lc-button',\n  standalone: true,\n  imports: [NgClass],\n  templateUrl: './button.component.html',\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Button component for user actions and form submissions.\n *\n * Features:\n * - Multiple variants (primary, secondary, outline, ghost, link, danger,\n *   warning, info, inverse, inverse-outline)\n * - Size options (xs, sm, md, lg)\n * - Loading state with spinner\n * - Icon-only mode\n * - Full-width layout option\n * - Keyboard and focus handling\n * - Accessible with ARIA attributes\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions, the next-step-card's narrow actions and the narrow alert's actions.\n *\n * @example\n * ```html\n * <lc-button variant=\"primary\" size=\"md\">Save</lc-button>\n * ```\n */\nexport class ButtonComponent {\n  /**\n   * Visual variant. `inverse` is a white pill with dark ink and a white focus\n   * ring for dark, coloured or image backgrounds that don't follow the theme,\n   * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,\n   * accent-violet). It looks the same in both themes. Not for light backgrounds\n   * or `variant=\"light\"` heroes. CSS hook `--lc-button-inverse-fg` (default\n   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is\n   * the quieter action beside it on the same bands: white text and keyline on\n   * a dark translucent fill, the same sizes, height, icon slots and states.\n   * @default 'primary'\n   */\n  readonly variant = input<ButtonVariant>('primary');\n\n  /**\n   * Colour tone of `variant=\"outline\"`: `'primary'` sets text and border to\n   * the primary colour (`--color-primary-700` / `-600`; hover\n   * `--color-surface-selected`, active `--color-primary-200`). Other variants\n   * ignore it.\n   * @default 'neutral'\n   */\n  readonly tone = input<ButtonTone>('neutral');\n  readonly size = input<ButtonSize>('md');\n\n  /**\n   * Natively disabled: the button leaves the focus order and ignores clicks.\n   * For a temporary busy state that keeps focus, use `loading`.\n   * @default false\n   */\n  readonly disabled = input(false);\n\n  /**\n   * Shows a spinner in place of the icon slots and makes the button\n   * unavailable without removing it from the focus order (3.17). The inner\n   * `<button>` gets `aria-disabled=\"true\"` and `aria-busy=\"true\"` instead of\n   * the native `disabled`, so a focused button keeps focus. While it is\n   * loading, click, Enter and Space are ignored: `clicked` is not emitted, the\n   * click event stops at the button (a `(click)` on the host doesn't fire),\n   * and a `type=\"submit\"`/`\"reset\"` button doesn't submit or reset its form.\n   * The look is unchanged: spinner, 50 % opacity, no hover. Screen readers may\n   * announce the state change (\"unavailable\"/\"dimmed\"), but the button doesn't\n   * announce the outcome: the page does that, for example with a polite live\n   * region (\"USM wird geladen.\", then the result). `disabledReason` also\n   * applies while loading. If `disabled` is set too, the native `disabled`\n   * wins.\n   * @default false\n   */\n  readonly loading = input(false);\n  readonly iconOnly = input(false);\n  readonly fullWidth = input(false);\n  readonly ariaLabel = input('');\n\n  /**\n   * Id, or space-separated ids, of elements that describe the button, set as\n   * `aria-describedby` on the inner `<button>`: a screen reader reads the\n   * button's name and then their text, also while `disabled` or `loading`.\n   * Use it to tie a visible reason line (\"Wählen Sie zuerst eine Datei.\") to a\n   * disabled button; `disabledReason` stays a tooltip for pointers (with both\n   * set, the description comes from the ids, so the tooltip is not read\n   * twice). Empty renders no attribute. The kit does not check that the ids\n   * exist. Don't put `aria-describedby` on `<lc-button>` itself: it would stay\n   * on the host. (3.26)\n   * @default ''\n   */\n  readonly ariaDescribedBy = input('');\n  readonly type = input<ButtonType>('button');\n\n  /**\n   * Native tooltip (title attribute) on the button.\n   */\n  readonly title = input('');\n\n  /**\n   * Reason shown as tooltip while the button is disabled (or loading).\n   * Takes precedence over `title` in that state. The tooltip also appears\n   * over the disabled button — the component guarantees the inner button\n   * never gets `pointer-events: none`.\n   */\n  readonly disabledReason = input('');\n\n  /**\n   * Render as an inline text button that inherits font size, weight and\n   * line-height from the surrounding text (for links inside copy, clickable\n   * row titles, linked counters). Pair with `variant=\"link\"`.\n   * @default false\n   */\n  readonly inline = input(false);\n\n  /**\n   * Drop the inline padding so a `variant=\"link\"` button sits flush with the\n   * content edge: the label starts at the edge, and the button keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the host or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  readonly clicked = output<void>();\n  readonly focused = output<void>();\n  readonly blurred = output<void>();\n\n  @ViewChild('buttonElement') buttonElement!: ElementRef<HTMLButtonElement>;\n\n  readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  /**\n   * Tooltip actually applied to the button: `disabledReason` while disabled,\n   * `title` otherwise.\n   */\n  readonly effectiveTitle = computed(() => {\n    if (this.isDisabled() && this.disabledReason()) {\n      return this.disabledReason();\n    }\n    return this.title() || null;\n  });\n\n  /**\n   * Emits `clicked` unless the button is disabled or loading. While loading\n   * (and not natively disabled) the event is cancelled and stopped, so a form\n   * isn't submitted and a host `(click)` doesn't fire. The parameter is\n   * optional, so callers without an argument still work.\n   */\n  handleClick(event?: Event): void {\n    if (this.loading() && !this.disabled()) {\n      event?.preventDefault();\n      event?.stopImmediatePropagation();\n      return;\n    }\n    if (!this.isDisabled()) {\n      this.clicked.emit();\n    }\n  }\n\n  handleFocus(): void {\n    this.focused.emit();\n  }\n\n  handleBlur(): void {\n    this.blurred.emit();\n  }\n\n  focus(): void {\n    this.buttonElement?.nativeElement.focus();\n  }\n\n  blur(): void {\n    this.buttonElement?.nativeElement.blur();\n  }\n}\n","<button\n  #buttonElement\n  [type]=\"type()\"\n  [disabled]=\"disabled()\"\n  [attr.title]=\"effectiveTitle()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  [attr.aria-disabled]=\"isDisabled() ? 'true' : 'false'\"\n  [attr.aria-busy]=\"loading() ? 'true' : 'false'\"\n  [ngClass]=\"{\n    'btn': true,\n    'btn-primary': variant() === 'primary',\n    'btn-secondary': variant() === 'secondary',\n    'btn-outline': variant() === 'outline',\n    'btn-ghost': variant() === 'ghost',\n    'btn-link': variant() === 'link',\n    'btn-danger': variant() === 'danger',\n    'btn-warning': variant() === 'warning',\n    'btn-info': variant() === 'info',\n    'btn-inverse': variant() === 'inverse',\n    'btn-inverse-outline': variant() === 'inverse-outline',\n    'btn-xs': size() === 'xs',\n    'btn-sm': size() === 'sm',\n    'btn-md': size() === 'md',\n    'btn-lg': size() === 'lg',\n    'btn-icon-only': iconOnly(),\n    'btn-full-width': fullWidth(),\n    'btn-inline': inline(),\n    'btn-flush': flush(),\n    'btn-tone-primary': variant() === 'outline' && tone() === 'primary',\n    'btn-loading': loading()\n  }\"\n  (click)=\"handleClick($event)\"\n  (focus)=\"handleFocus()\"\n  (blur)=\"handleBlur()\"\n>\n  @if (loading()) {\n    <span class=\"loading-spinner\"></span>\n  }\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-before']\" />\n  }\n  <ng-content></ng-content>\n  @if (!loading()) {\n    <ng-content select=\"[slot='icon-after']\" />\n  }\n</button>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport type { ButtonSize, ButtonTone, ButtonVariant } from './button.component';\n\n/**\n * `lc-button` styling on a native link: `<a lcButton href=\"…\">`.\n *\n * Use it for navigation that looks like a button — calls to action, \"read\n * more\" links, a language switch. The host *is* the anchor, so every native\n * link attribute (`href`, `hreflang`, `lang`, `rel`, `target`, `download`,\n * `title`, `aria-*`) passes through untouched, and the component adds no event\n * listeners: after server-side rendering or prerendering the markup is a plain\n * `<a class=\"btn btn-primary btn-md\" href=\"…\">` that works without JavaScript.\n * For a description, set `aria-describedby` on the anchor itself; unlike\n * `lc-button` there is no `ariaDescribedBy` input (3.26).\n * `routerLink` can sit on the same anchor for in-app navigation.\n *\n * Same variants, sizes and modifiers as `lc-button` (it shares its stylesheet).\n * Use `size=\"lg\"` (48.5 px) where the link must meet the 44 px touch target. A link\n * cannot be disabled or busy — render plain text or an `lc-button` for those\n * states. An `iconOnly` link needs an `aria-label`.\n *\n * CSS hook `--lc-btn-overflow-wrap` (`break-word | anywhere`, default\n * `break-word`): `anywhere` lets a single word wider than the button's line\n * break inside the word, so the button stays inside its container (WCAG 1.4.10\n * at 320 px or 200 % text). Set it on the button, the `lc-button` host or an\n * ancestor that is a wrapping row or a column. In a non-wrapping row it lets a\n * one-word button shrink with its neighbours, which is why the default stays\n * `break-word`. The kit sets it in `lc-footer`'s link row, the page-header\n * actions, the next-step-card's narrow actions and the narrow alert's actions.\n *\n * @example\n * ```html\n * <a lcButton variant=\"primary\" size=\"lg\" href=\"/de/neuigkeiten\">Schau uns beim Bauen zu</a>\n * <a lcButton variant=\"ghost\" href=\"/en/security\" hreflang=\"en\" lang=\"en\">English</a>\n * <a lcButton variant=\"outline\" href=\"https://www.linkedin.com/in/…\" rel=\"me\">\n *   <lc-icon slot=\"icon-before\" name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n *   LinkedIn\n * </a>\n * ```\n */\n@Component({\n  // An attribute selector on purpose: the anchor must stay the element in the\n  // DOM so native link behaviour and attributes are untouched.\n  selector: 'a[lcButton]',\n  template: `<ng-content select=\"[slot='icon-before']\" /><ng-content /><ng-content\n      select=\"[slot='icon-after']\"\n    />`,\n  // The same stylesheet as lc-button: identical style text is registered once,\n  // whichever of the two renders first.\n  styleUrl: './button.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ButtonLinkComponent {\n  /**\n   * Visual variant. `inverse` is a white pill with dark ink and a white focus\n   * ring for dark, coloured or image backgrounds that don't follow the theme,\n   * such as the default `lc-hero` bands (primary, neutral, info, accent-purple,\n   * accent-violet). It looks the same in both themes. Not for light backgrounds\n   * or `variant=\"light\"` heroes. CSS hook `--lc-button-inverse-fg` (default\n   * `#0d353d`) sets its ink; keep 4.5:1 on white. `inverse-outline` (3.36) is\n   * the quieter link beside it on the same bands: white text and keyline on a\n   * dark translucent fill, the same sizes and height.\n   * @default 'primary'\n   */\n  readonly variant = input<ButtonVariant>('primary');\n  /**\n   * Colour tone of `variant=\"outline\"`, as on `lc-button`: `'primary'` sets\n   * text and border to the primary colour (`--color-primary-700` / `-600`;\n   * hover `--color-surface-selected`, active `--color-primary-200`). Other\n   * variants ignore it.\n   * @default 'neutral'\n   */\n  readonly tone = input<ButtonTone>('neutral');\n  /** Size, as on `lc-button`. `lg` (48.5 px high) meets the 44 px touch target. */\n  readonly size = input<ButtonSize>('md');\n  /** Stretch the link to the full width of its container. */\n  readonly fullWidth = input(false);\n  /** Square icon-only link. Give the anchor an `aria-label`. */\n  readonly iconOnly = input(false);\n  /**\n   * Flow with the surrounding text instead of forming a pill (inherits font\n   * size, weight and line-height). Pair with `variant=\"link\"`.\n   */\n  readonly inline = input(false);\n  /**\n   * Drop the inline padding so a `variant=\"link\"` link sits flush with the\n   * content edge: the label starts at the edge, and the link keeps its height\n   * and a 44 × 44 px minimum target. At the end edge of a row, set the CSS\n   * hook `--lc-btn-flush-align: end` (default `start`) on the link or an\n   * ancestor: every line of the label then ends at the edge. Ignored on other\n   * variants and with `iconOnly` (3.9, AS-26).\n   * @default false\n   */\n  readonly flush = input(false);\n\n  /** Classes on the anchor; merged with the consumer's own `class`. */\n  protected readonly hostClasses = computed(() => {\n    const classes = ['btn', `btn-${this.variant()}`, `btn-${this.size()}`];\n    if (this.iconOnly()) classes.push('btn-icon-only');\n    if (this.fullWidth()) classes.push('btn-full-width');\n    if (this.inline()) classes.push('btn-inline');\n    if (this.flush()) classes.push('btn-flush');\n    if (this.variant() === 'outline' && this.tone() === 'primary') classes.push('btn-tone-primary');\n    return classes.join(' ');\n  });\n}\n"],"mappings":"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"}