@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-button.mjs

@@ -0,0 +1,81 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, booleanAttribute, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Button — enhances a native `<button>` or `<a>` so semantics and keyboard
+ * behaviour come for free. Fully themed via `--mk-*` tokens.
+ *
+ * ```html
+ * <button mkButton tone="primary">Save</button>
+ * <button mkButton variant="outline" tone="danger" [loading]="saving()">Delete</button>
+ * <a mkButton variant="ghost" href="/docs">Docs</a>
+ * ```
+ */
+class MkButton {
+    host = inject(ElementRef);
+    isAnchor = this.host.nativeElement.tagName.toLowerCase() === 'a';
+    /** Visual treatment. */
+    variant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Semantic color tone. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Control size. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Shows a spinner and blocks interaction without collapsing layout. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Stretch to fill the container width. */
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Square, icon-only button (ensure an `aria-label` is provided). */
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable the button (native `disabled` for `<button>`, aria for `<a>`). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    nativeDisabled = computed(() => !this.isAnchor && this.isDisabled() ? '' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeDisabled" }] : /* istanbul ignore next */ []));
+    ariaDisabled = computed(() => this.isAnchor && this.isDisabled() ? 'true' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDisabled" }] : /* istanbul ignore next */ []));
+    linkDisabledTabindex = computed(() => this.isAnchor && this.isDisabled() ? '-1' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linkDisabledTabindex" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.isDisabled()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkButton, isStandalone: true, selector: "button[mkButton], a[mkButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.mk-button--sm": "size() === 'sm'", "class.mk-button--md": "size() === 'md'", "class.mk-button--lg": "size() === 'lg'", "class.mk-button--solid": "variant() === 'solid'", "class.mk-button--soft": "variant() === 'soft'", "class.mk-button--outline": "variant() === 'outline'", "class.mk-button--ghost": "variant() === 'ghost'", "class.mk-button--link": "variant() === 'link'", "attr.data-tone": "tone()", "class.mk-button--block": "fullWidth()", "class.mk-button--icon": "iconOnly()", "class.mk-button--loading": "loading()", "class.mk-button--disabled": "isDisabled()", "attr.aria-busy": "loading() || null", "attr.disabled": "nativeDisabled()", "attr.aria-disabled": "ariaDisabled()", "attr.tabindex": "linkDisabledTabindex()" }, classAttribute: "mk-button" }, ngImport: i0, template: "@if (loading()) {\n  <span class=\"mk-button__spinner\" aria-hidden=\"true\"></span>\n}\n<span class=\"mk-button__content\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);position:relative;height:var(--mk-control-height-md);padding:0 var(--mk-space-4);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-button--sm){height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-button--lg){height:var(--mk-control-height-lg);padding:0 var(--mk-space-5);font-size:var(--mk-font-size-lg)}:host(.mk-button--block){display:flex;width:100%}:host(.mk-button--icon){padding:0;width:var(--mk-control-height-md);aspect-ratio:1}:host(.mk-button--icon.mk-button--sm){width:var(--mk-control-height-sm)}:host(.mk-button--icon.mk-button--lg){width:var(--mk-control-height-lg)}:host(.mk-button--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-button--solid:hover){background-color:var(--_hover)}:host(.mk-button--solid:active){background-color:var(--_active)}:host(.mk-button--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-button--soft:hover){background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}:host(.mk-button--soft:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-button--outline:hover){background-color:var(--_subtle);border-color:var(--_main)}:host(.mk-button--outline:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--ghost){background-color:transparent;color:var(--_subtle-text)}:host(.mk-button--ghost:hover){background-color:var(--_subtle)}:host(.mk-button--ghost:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--link){height:auto;padding:0;background:transparent;color:var(--_main);border-radius:var(--mk-radius-xs)}:host(.mk-button--link:hover){text-decoration:underline}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-button--disabled),:host([disabled]){cursor:not-allowed;opacity:.55;box-shadow:none;pointer-events:none}:host(.mk-button--loading){cursor:progress}:host(.mk-button--loading) .mk-button__content{visibility:hidden}.mk-button__content{display:inline-flex;align-items:center;gap:var(--mk-space-2);min-width:0}.mk-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mk-button-spin .6s linear infinite}@keyframes mk-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-button__spinner{animation-duration:1.2s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mkButton], a[mkButton]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-button',
+                        '[class.mk-button--sm]': "size() === 'sm'",
+                        '[class.mk-button--md]': "size() === 'md'",
+                        '[class.mk-button--lg]': "size() === 'lg'",
+                        '[class.mk-button--solid]': "variant() === 'solid'",
+                        '[class.mk-button--soft]': "variant() === 'soft'",
+                        '[class.mk-button--outline]': "variant() === 'outline'",
+                        '[class.mk-button--ghost]': "variant() === 'ghost'",
+                        '[class.mk-button--link]': "variant() === 'link'",
+                        '[attr.data-tone]': 'tone()',
+                        '[class.mk-button--block]': 'fullWidth()',
+                        '[class.mk-button--icon]': 'iconOnly()',
+                        '[class.mk-button--loading]': 'loading()',
+                        '[class.mk-button--disabled]': 'isDisabled()',
+                        '[attr.aria-busy]': 'loading() || null',
+                        '[attr.disabled]': 'nativeDisabled()',
+                        '[attr.aria-disabled]': 'ariaDisabled()',
+                        '[attr.tabindex]': 'linkDisabledTabindex()',
+                        '(click)': 'onClick($event)',
+                    }, template: "@if (loading()) {\n  <span class=\"mk-button__spinner\" aria-hidden=\"true\"></span>\n}\n<span class=\"mk-button__content\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text);display:inline-flex;align-items:center;justify-content:center;gap:var(--mk-space-2);position:relative;height:var(--mk-control-height-md);padding:0 var(--mk-space-4);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-md);font-family:inherit;font-size:var(--mk-font-size-md);font-weight:var(--mk-font-weight-medium);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-button--sm){height:var(--mk-control-height-sm);padding:0 var(--mk-space-3);font-size:var(--mk-font-size-sm);border-radius:var(--mk-radius-sm)}:host(.mk-button--lg){height:var(--mk-control-height-lg);padding:0 var(--mk-space-5);font-size:var(--mk-font-size-lg)}:host(.mk-button--block){display:flex;width:100%}:host(.mk-button--icon){padding:0;width:var(--mk-control-height-md);aspect-ratio:1}:host(.mk-button--icon.mk-button--sm){width:var(--mk-control-height-sm)}:host(.mk-button--icon.mk-button--lg){width:var(--mk-control-height-lg)}:host(.mk-button--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-button--solid:hover){background-color:var(--_hover)}:host(.mk-button--solid:active){background-color:var(--_active)}:host(.mk-button--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-button--soft:hover){background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}:host(.mk-button--soft:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-button--outline:hover){background-color:var(--_subtle);border-color:var(--_main)}:host(.mk-button--outline:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--ghost){background-color:transparent;color:var(--_subtle-text)}:host(.mk-button--ghost:hover){background-color:var(--_subtle)}:host(.mk-button--ghost:active){background-image:linear-gradient(var(--mk-active-overlay),var(--mk-active-overlay))}:host(.mk-button--link){height:auto;padding:0;background:transparent;color:var(--_main);border-radius:var(--mk-radius-xs)}:host(.mk-button--link:hover){text-decoration:underline}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-button--disabled),:host([disabled]){cursor:not-allowed;opacity:.55;box-shadow:none;pointer-events:none}:host(.mk-button--loading){cursor:progress}:host(.mk-button--loading) .mk-button__content{visibility:hidden}.mk-button__content{display:inline-flex;align-items:center;gap:var(--mk-space-2);min-width:0}.mk-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mk-button-spin .6s linear infinite}@keyframes mk-button-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mk-button__spinner{animation-duration:1.2s}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkButton };
+//# sourceMappingURL=mk-kit-ui-button.mjs.map

package/fesm2022/mk-kit-ui-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mk-kit-ui-button.mjs","sources":["../../../projects/mk-kit/button/button.ts","../../../projects/mk-kit/button/button.html","../../../projects/mk-kit/button/mk-kit-ui-button.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n} from '@angular/core';\nimport type { MkSize, MkTone, MkVariant } from '@mk-kit/ui/core';\n\n/**\n * Button — enhances a native `<button>` or `<a>` so semantics and keyboard\n * behaviour come for free. Fully themed via `--mk-*` tokens.\n *\n * ```html\n * <button mkButton tone=\"primary\">Save</button>\n * <button mkButton variant=\"outline\" tone=\"danger\" [loading]=\"saving()\">Delete</button>\n * <a mkButton variant=\"ghost\" href=\"/docs\">Docs</a>\n * ```\n */\n@Component({\n  selector: 'button[mkButton], a[mkButton]',\n  templateUrl: './button.html',\n  styleUrl: './button.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mk-button',\n    '[class.mk-button--sm]': \"size() === 'sm'\",\n    '[class.mk-button--md]': \"size() === 'md'\",\n    '[class.mk-button--lg]': \"size() === 'lg'\",\n    '[class.mk-button--solid]': \"variant() === 'solid'\",\n    '[class.mk-button--soft]': \"variant() === 'soft'\",\n    '[class.mk-button--outline]': \"variant() === 'outline'\",\n    '[class.mk-button--ghost]': \"variant() === 'ghost'\",\n    '[class.mk-button--link]': \"variant() === 'link'\",\n    '[attr.data-tone]': 'tone()',\n    '[class.mk-button--block]': 'fullWidth()',\n    '[class.mk-button--icon]': 'iconOnly()',\n    '[class.mk-button--loading]': 'loading()',\n    '[class.mk-button--disabled]': 'isDisabled()',\n    '[attr.aria-busy]': 'loading() || null',\n    '[attr.disabled]': 'nativeDisabled()',\n    '[attr.aria-disabled]': 'ariaDisabled()',\n    '[attr.tabindex]': 'linkDisabledTabindex()',\n    '(click)': 'onClick($event)',\n  },\n})\nexport class MkButton {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly isAnchor =\n    this.host.nativeElement.tagName.toLowerCase() === 'a';\n\n  /** Visual treatment. */\n  readonly variant = input<MkVariant>('solid');\n  /** Semantic color tone. */\n  readonly tone = input<MkTone>('primary');\n  /** Control size. */\n  readonly size = input<MkSize>('md');\n  /** Shows a spinner and blocks interaction without collapsing layout. */\n  readonly loading = input(false, { transform: booleanAttribute });\n  /** Stretch to fill the container width. */\n  readonly fullWidth = input(false, { transform: booleanAttribute });\n  /** Square, icon-only button (ensure an `aria-label` is provided). */\n  readonly iconOnly = input(false, { transform: booleanAttribute });\n  /** Disable the button (native `disabled` for `<button>`, aria for `<a>`). */\n  readonly disabled = input(false, { transform: booleanAttribute });\n\n  protected readonly isDisabled = computed(\n    () => this.disabled() || this.loading(),\n  );\n\n  protected readonly nativeDisabled = computed(() =>\n    !this.isAnchor && this.isDisabled() ? '' : null,\n  );\n  protected readonly ariaDisabled = computed(() =>\n    this.isAnchor && this.isDisabled() ? 'true' : null,\n  );\n  protected readonly linkDisabledTabindex = computed(() =>\n    this.isAnchor && this.isDisabled() ? '-1' : null,\n  );\n\n  protected onClick(event: Event): void {\n    if (this.isDisabled()) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n","@if (loading()) {\n  <span class=\"mk-button__spinner\" aria-hidden=\"true\"></span>\n}\n<span class=\"mk-button__content\"><ng-content /></span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAWA;;;;;;;;;AASG;MA4BU,QAAQ,CAAA;AACF,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC;AAClD,IAAA,QAAQ,GACvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG;;IAG9C,OAAO,GAAG,KAAK,CAAY,OAAO;gFAAC;;IAEnC,IAAI,GAAG,KAAK,CAAS,SAAS;6EAAC;;IAE/B,IAAI,GAAG,KAAK,CAAS,IAAI;6EAAC;;IAE1B,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAEvD,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAEzD,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAExD,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE9C,IAAA,UAAU,GAAG,QAAQ,CACtC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE;mFACxC;IAEkB,cAAc,GAAG,QAAQ,CAAC,MAC3C,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,GAAG,IAAI;uFAChD;IACkB,YAAY,GAAG,QAAQ,CAAC,MACzC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,MAAM,GAAG,IAAI;qFACnD;IACkB,oBAAoB,GAAG,QAAQ,CAAC,MACjD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,GAAG,IAAI;6FACjD;AAES,IAAA,OAAO,CAAC,KAAY,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,wBAAwB,EAAE;QAClC;IACF;uGAvCW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,ixDChDrB,qJAIA,EAAA,MAAA,EAAA,CAAA,q7JAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD4Ca,QAAQ,EAAA,UAAA,EAAA,CAAA;kBA3BpB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,+BAA+B,EAAA,eAAA,EAGxB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,uBAAuB,EAAE,iBAAiB;AAC1C,wBAAA,uBAAuB,EAAE,iBAAiB;AAC1C,wBAAA,uBAAuB,EAAE,iBAAiB;AAC1C,wBAAA,0BAA0B,EAAE,uBAAuB;AACnD,wBAAA,yBAAyB,EAAE,sBAAsB;AACjD,wBAAA,4BAA4B,EAAE,yBAAyB;AACvD,wBAAA,0BAA0B,EAAE,uBAAuB;AACnD,wBAAA,yBAAyB,EAAE,sBAAsB;AACjD,wBAAA,kBAAkB,EAAE,QAAQ;AAC5B,wBAAA,0BAA0B,EAAE,aAAa;AACzC,wBAAA,yBAAyB,EAAE,YAAY;AACvC,wBAAA,4BAA4B,EAAE,WAAW;AACzC,wBAAA,6BAA6B,EAAE,cAAc;AAC7C,wBAAA,kBAAkB,EAAE,mBAAmB;AACvC,wBAAA,iBAAiB,EAAE,kBAAkB;AACrC,wBAAA,sBAAsB,EAAE,gBAAgB;AACxC,wBAAA,iBAAiB,EAAE,wBAAwB;AAC3C,wBAAA,SAAS,EAAE,iBAAiB;AAC7B,qBAAA,EAAA,QAAA,EAAA,qJAAA,EAAA,MAAA,EAAA,CAAA,q7JAAA,CAAA,EAAA;;;AE9CH;;AAEG;;;;"}

package/fesm2022/mk-kit-ui-checkbox.mjs

@@ -0,0 +1,136 @@
+import * as i0 from '@angular/core';
+import { inject, model, input, booleanAttribute, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { MkFieldContext, mkUniqueId, mkValidatorChange } from '@mk-kit/ui/core';
+
+/**
+ * Checkbox — a themed checkbox built on a visually-hidden native
+ * `input[type=checkbox]` (so keyboard + form semantics are native) with a
+ * custom box. Supports an `indeterminate` state and projects its label.
+ *
+ * Implements `ControlValueAccessor` with a two-way `checked` model, so it works
+ * with `[(ngModel)]`, reactive forms and `[(checked)]`.
+ *
+ * ```html
+ * <mk-checkbox [(ngModel)]="accepted">Accept terms</mk-checkbox>
+ * <mk-checkbox [(checked)]="all" [indeterminate]="some()" tone="success">
+ *   Select all
+ * </mk-checkbox>
+ * ```
+ */
+class MkCheckbox {
+    field = inject(MkFieldContext, { optional: true });
+    /** Two-way checked state. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Two-way indeterminate ("mixed") state; cleared when the user toggles. */
+    indeterminate = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Disable the control. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Force the invalid visual + `aria-invalid` when used standalone. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mark required (adds `aria-required`). */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Control size. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Semantic color tone for the checked box. */
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Accessible label when no text content is projected. */
+    ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    inputId = this.field?.controlId ?? mkUniqueId('mk-checkbox');
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isRequired = computed(() => this.required() || (this.field?.isRequired() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || (this.field?.hasError() ?? false), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    onNativeChange(event) {
+        const target = event.target;
+        this.indeterminate.set(false);
+        this.checked.set(target.checked);
+        this.onChange(target.checked);
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- Validator ------------------------------------------------------------
+    validatorChange = mkValidatorChange(() => {
+        this.required();
+    });
+    /**
+     * Reports `required` for an unchecked box when `[required]` is set, so
+     * `required` on the element behaves like `Validators.requiredTrue`.
+     */
+    validate(control) {
+        if (!this.required())
+            return null;
+        return control.value === true ? null : { required: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorChange.register(fn);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MkCheckbox, isStandalone: true, selector: "mk-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { properties: { "class.mk-checkbox--sm": "size() === 'sm'", "class.mk-checkbox--md": "size() === 'md'", "class.mk-checkbox--lg": "size() === 'lg'", "class.mk-checkbox--checked": "checked()", "class.mk-checkbox--indeterminate": "indeterminate()", "class.mk-checkbox--disabled": "isDisabled()", "class.mk-checkbox--invalid": "isInvalid()", "attr.data-tone": "tone()" }, classAttribute: "mk-checkbox" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MkCheckbox),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => MkCheckbox),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label class=\"mk-checkbox__root\">\n  <span class=\"mk-checkbox__control\">\n    <input\n      class=\"mk-checkbox__native\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"isRequired() || null\"\n      [attr.aria-invalid]=\"isInvalid() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (change)=\"onNativeChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n    <span class=\"mk-checkbox__box\" aria-hidden=\"true\">\n      <span class=\"mk-checkbox__check\"></span>\n      <span class=\"mk-checkbox__dash\"></span>\n    </span>\n  </span>\n  <span class=\"mk-checkbox__text\"><ng-content /></span>\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);display:inline-flex;font-family:var(--mk-font-sans);--_box-size: 1.15rem}:host(.mk-checkbox--sm){--_box-size: 1rem}:host(.mk-checkbox--lg){--_box-size: 1.35rem}:host([data-tone=primary]){--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast)}:host([data-tone=success]){--_main: var(--mk-success);--_contrast: var(--mk-success-contrast)}:host([data-tone=warning]){--_main: var(--mk-warning);--_contrast: var(--mk-warning-contrast)}:host([data-tone=danger]){--_main: var(--mk-danger);--_contrast: var(--mk-danger-contrast)}:host([data-tone=info]){--_main: var(--mk-info);--_contrast: var(--mk-info-contrast)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse)}.mk-checkbox__root{display:inline-flex;align-items:center;gap:var(--mk-space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--mk-font-size-md);color:var(--mk-text)}:host(.mk-checkbox--sm) .mk-checkbox__root{font-size:var(--mk-font-size-sm)}:host(.mk-checkbox--lg) .mk-checkbox__root{font-size:var(--mk-font-size-lg)}.mk-checkbox__control{position:relative;display:inline-flex;flex:none;width:var(--_box-size);height:var(--_box-size)}.mk-checkbox__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}@media(pointer:coarse){.mk-checkbox__native{width:auto;height:auto;inset:min(0px,(100% - 24px) / 2)}}.mk-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-checkbox__check{width:30%;height:55%;border-right:2px solid var(--_contrast);border-bottom:2px solid var(--_contrast);transform:rotate(45deg) translateY(-8%);opacity:0}.mk-checkbox__dash{position:absolute;width:55%;height:0;border-top:2px solid var(--_contrast);opacity:0}:host(.mk-checkbox--checked:not(.mk-checkbox--indeterminate)) .mk-checkbox__box{background-color:var(--_main);border-color:var(--_main)}:host(.mk-checkbox--checked:not(.mk-checkbox--indeterminate)) .mk-checkbox__check{opacity:1}:host(.mk-checkbox--indeterminate) .mk-checkbox__box{background-color:var(--_main);border-color:var(--_main)}:host(.mk-checkbox--indeterminate) .mk-checkbox__dash{opacity:1}.mk-checkbox__root:hover .mk-checkbox__box{border-color:var(--_main)}.mk-checkbox__native:focus-visible+.mk-checkbox__box{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-checkbox--invalid) .mk-checkbox__box{border-color:var(--mk-danger)}:host(.mk-checkbox--disabled) .mk-checkbox__root{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.mk-checkbox__box{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-checkbox',
+                        '[class.mk-checkbox--sm]': "size() === 'sm'",
+                        '[class.mk-checkbox--md]': "size() === 'md'",
+                        '[class.mk-checkbox--lg]': "size() === 'lg'",
+                        '[class.mk-checkbox--checked]': 'checked()',
+                        '[class.mk-checkbox--indeterminate]': 'indeterminate()',
+                        '[class.mk-checkbox--disabled]': 'isDisabled()',
+                        '[class.mk-checkbox--invalid]': 'isInvalid()',
+                        '[attr.data-tone]': 'tone()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MkCheckbox),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MkCheckbox),
+                            multi: true,
+                        },
+                    ], template: "<label class=\"mk-checkbox__root\">\n  <span class=\"mk-checkbox__control\">\n    <input\n      class=\"mk-checkbox__native\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"isRequired() || null\"\n      [attr.aria-invalid]=\"isInvalid() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (change)=\"onNativeChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n    <span class=\"mk-checkbox__box\" aria-hidden=\"true\">\n      <span class=\"mk-checkbox__check\"></span>\n      <span class=\"mk-checkbox__dash\"></span>\n    </span>\n  </span>\n  <span class=\"mk-checkbox__text\"><ng-content /></span>\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast);display:inline-flex;font-family:var(--mk-font-sans);--_box-size: 1.15rem}:host(.mk-checkbox--sm){--_box-size: 1rem}:host(.mk-checkbox--lg){--_box-size: 1.35rem}:host([data-tone=primary]){--_main: var(--mk-primary);--_contrast: var(--mk-primary-contrast)}:host([data-tone=success]){--_main: var(--mk-success);--_contrast: var(--mk-success-contrast)}:host([data-tone=warning]){--_main: var(--mk-warning);--_contrast: var(--mk-warning-contrast)}:host([data-tone=danger]){--_main: var(--mk-danger);--_contrast: var(--mk-danger-contrast)}:host([data-tone=info]){--_main: var(--mk-info);--_contrast: var(--mk-info-contrast)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse)}.mk-checkbox__root{display:inline-flex;align-items:center;gap:var(--mk-space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--mk-font-size-md);color:var(--mk-text)}:host(.mk-checkbox--sm) .mk-checkbox__root{font-size:var(--mk-font-size-sm)}:host(.mk-checkbox--lg) .mk-checkbox__root{font-size:var(--mk-font-size-lg)}.mk-checkbox__control{position:relative;display:inline-flex;flex:none;width:var(--_box-size);height:var(--_box-size)}.mk-checkbox__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}@media(pointer:coarse){.mk-checkbox__native{width:auto;height:auto;inset:min(0px,(100% - 24px) / 2)}}.mk-checkbox__box{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--mk-surface);border:var(--mk-border-width-strong) solid var(--mk-border-strong);border-radius:var(--mk-radius-sm);transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard)}.mk-checkbox__check{width:30%;height:55%;border-right:2px solid var(--_contrast);border-bottom:2px solid var(--_contrast);transform:rotate(45deg) translateY(-8%);opacity:0}.mk-checkbox__dash{position:absolute;width:55%;height:0;border-top:2px solid var(--_contrast);opacity:0}:host(.mk-checkbox--checked:not(.mk-checkbox--indeterminate)) .mk-checkbox__box{background-color:var(--_main);border-color:var(--_main)}:host(.mk-checkbox--checked:not(.mk-checkbox--indeterminate)) .mk-checkbox__check{opacity:1}:host(.mk-checkbox--indeterminate) .mk-checkbox__box{background-color:var(--_main);border-color:var(--_main)}:host(.mk-checkbox--indeterminate) .mk-checkbox__dash{opacity:1}.mk-checkbox__root:hover .mk-checkbox__box{border-color:var(--_main)}.mk-checkbox__native:focus-visible+.mk-checkbox__box{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-checkbox--invalid) .mk-checkbox__box{border-color:var(--mk-danger)}:host(.mk-checkbox--disabled) .mk-checkbox__root{cursor:not-allowed;opacity:.6}@media(prefers-reduced-motion:reduce){.mk-checkbox__box{transition:none}}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkCheckbox };
+//# sourceMappingURL=mk-kit-ui-checkbox.mjs.map

package/fesm2022/mk-kit-ui-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mk-kit-ui-checkbox.mjs","sources":["../../../projects/mk-kit/checkbox/checkbox.ts","../../../projects/mk-kit/checkbox/checkbox.html","../../../projects/mk-kit/checkbox/mk-kit-ui-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  type AbstractControl,\n  type ValidationErrors,\n  type Validator,\n} from '@angular/forms';\nimport type { MkSize, MkTone } from '@mk-kit/ui/core';\nimport { MkFieldContext } from '@mk-kit/ui/core';\nimport { mkUniqueId } from '@mk-kit/ui/core';\nimport { mkValidatorChange } from '@mk-kit/ui/core';\n\n/**\n * Checkbox — a themed checkbox built on a visually-hidden native\n * `input[type=checkbox]` (so keyboard + form semantics are native) with a\n * custom box. Supports an `indeterminate` state and projects its label.\n *\n * Implements `ControlValueAccessor` with a two-way `checked` model, so it works\n * with `[(ngModel)]`, reactive forms and `[(checked)]`.\n *\n * ```html\n * <mk-checkbox [(ngModel)]=\"accepted\">Accept terms</mk-checkbox>\n * <mk-checkbox [(checked)]=\"all\" [indeterminate]=\"some()\" tone=\"success\">\n *   Select all\n * </mk-checkbox>\n * ```\n */\n@Component({\n  selector: 'mk-checkbox',\n  templateUrl: './checkbox.html',\n  styleUrl: './checkbox.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mk-checkbox',\n    '[class.mk-checkbox--sm]': \"size() === 'sm'\",\n    '[class.mk-checkbox--md]': \"size() === 'md'\",\n    '[class.mk-checkbox--lg]': \"size() === 'lg'\",\n    '[class.mk-checkbox--checked]': 'checked()',\n    '[class.mk-checkbox--indeterminate]': 'indeterminate()',\n    '[class.mk-checkbox--disabled]': 'isDisabled()',\n    '[class.mk-checkbox--invalid]': 'isInvalid()',\n    '[attr.data-tone]': 'tone()',\n  },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => MkCheckbox),\n      multi: true,\n    },\n  ],\n})\nexport class MkCheckbox implements ControlValueAccessor, Validator {\n  private readonly field = inject(MkFieldContext, { optional: true });\n\n  /** Two-way checked state. */\n  readonly checked = model(false);\n  /** Two-way indeterminate (\"mixed\") state; cleared when the user toggles. */\n  readonly indeterminate = model(false);\n  /** Disable the control. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Force the invalid visual + `aria-invalid` when used standalone. */\n  readonly invalid = input(false, { transform: booleanAttribute });\n  /** Mark required (adds `aria-required`). */\n  readonly required = input(false, { transform: booleanAttribute });\n  /** Control size. */\n  readonly size = input<MkSize>('md');\n  /** Semantic color tone for the checked box. */\n  readonly tone = input<MkTone>('primary');\n  /** Accessible label when no text content is projected. */\n  readonly ariaLabel = input<string>('', { alias: 'aria-label' });\n\n  private readonly cvaDisabled = signal(false);\n  private onChange: (value: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  readonly inputId = this.field?.controlId ?? mkUniqueId('mk-checkbox');\n\n  protected readonly isDisabled = computed(\n    () => this.disabled() || this.cvaDisabled(),\n  );\n  protected readonly isRequired = computed(\n    () => this.required() || (this.field?.isRequired() ?? false),\n  );\n  protected readonly isInvalid = computed(\n    () => this.invalid() || (this.field?.hasError() ?? false),\n  );\n  protected readonly describedBy = computed(\n    () => this.field?.describedBy() ?? null,\n  );\n\n  protected onNativeChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.indeterminate.set(false);\n    this.checked.set(target.checked);\n    this.onChange(target.checked);\n  }\n\n  // --- ControlValueAccessor -------------------------------------------------\n  writeValue(value: unknown): void {\n    this.checked.set(!!value);\n  }\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n\n  // --- Validator ------------------------------------------------------------\n  private readonly validatorChange = mkValidatorChange(() => {\n    this.required();\n  });\n\n  /**\n   * Reports `required` for an unchecked box when `[required]` is set, so\n   * `required` on the element behaves like `Validators.requiredTrue`.\n   */\n  validate(control: AbstractControl): ValidationErrors | null {\n    if (!this.required()) return null;\n    return control.value === true ? null : { required: true };\n  }\n\n  registerOnValidatorChange(fn: () => void): void {\n    this.validatorChange.register(fn);\n  }\n}\n","<label class=\"mk-checkbox__root\">\n  <span class=\"mk-checkbox__control\">\n    <input\n      class=\"mk-checkbox__native\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked()\"\n      [indeterminate]=\"indeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-required]=\"isRequired() || null\"\n      [attr.aria-invalid]=\"isInvalid() || null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      (change)=\"onNativeChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n    <span class=\"mk-checkbox__box\" aria-hidden=\"true\">\n      <span class=\"mk-checkbox__check\"></span>\n      <span class=\"mk-checkbox__dash\"></span>\n    </span>\n  </span>\n  <span class=\"mk-checkbox__text\"><ng-content /></span>\n</label>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/mk-kit-ui-chip.mjs

@@ -0,0 +1,122 @@
+import * as i0 from '@angular/core';
+import { inject, input, booleanAttribute, computed, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';
+
+/**
+ * Chip — an interactive, optionally removable/selectable token. Use it for
+ * filters, active selections or editable input tokens. For a purely decorative
+ * label use {@link MkTag} instead.
+ *
+ * ```html
+ * <mk-chip removable (removed)="drop(item)">{{ item.name }}</mk-chip>
+ * <mk-chip selectable [(selected)]="active" tone="primary">Filter</mk-chip>
+ * ```
+ */
+class MkChip {
+    i18n = inject(MK_I18N);
+    /** Semantic color tone. */
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Visual treatment. */
+    variant = input('soft', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Size scale. */
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Make the chip toggle a selected state on click / Enter / Space. */
+    selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Show a trailing remove button and enable Delete/Backspace removal. */
+    removable = input(false, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disable all interaction. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label for the remove button. */
+    removeLabel = input(this.i18n.remove, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** Id of the projected content, so the remove button's name can include it. */
+    contentId = mkUniqueId('mk-chip-content');
+    /** Id of the sr-only "Remove" text inside the remove button. */
+    removeTextId = mkUniqueId('mk-chip-remove');
+    /**
+     * A consumer-supplied `removeLabel`, or `null` when it is still the i18n
+     * default. With the default the button is named via `aria-labelledby`
+     * ("Remove <chip text>") so N chips don't get N identical names;
+     * `aria-labelledby` would beat `aria-label` in the accname algorithm, so the
+     * two bindings are branched rather than stacked.
+     */
+    customRemoveLabel = computed(() => {
+        const label = this.removeLabel();
+        return label === this.i18n.remove ? null : label;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customRemoveLabel" }] : /* istanbul ignore next */ []));
+    /** Two-way selected state (only meaningful when `selectable`). */
+    selected = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Emitted when the chip is removed via the button or Delete/Backspace. */
+    removed = output();
+    hostTabindex() {
+        // Removable chips advertise Delete/Backspace removal, so they must be
+        // focusable even when they are not selectable.
+        return (this.selectable() || this.removable()) && !this.disabled()
+            ? 0
+            : null;
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        if (this.selectable())
+            this.selected.set(!this.selected());
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const key = event.key;
+        if (this.selectable() && (key === 'Enter' || key === ' ')) {
+            event.preventDefault();
+            this.selected.set(!this.selected());
+        }
+        else if (this.removable() && (key === 'Delete' || key === 'Backspace')) {
+            event.preventDefault();
+            this.remove();
+        }
+    }
+    onRemoveClick(event) {
+        event.stopPropagation();
+        this.remove();
+    }
+    remove() {
+        if (this.disabled())
+            return;
+        this.removed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MkChip, isStandalone: true, selector: "mk-chip", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", removed: "removed" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class.mk-chip--sm": "size() === 'sm'", "class.mk-chip--md": "size() === 'md'", "class.mk-chip--lg": "size() === 'lg'", "class.mk-chip--solid": "variant() === 'solid'", "class.mk-chip--soft": "variant() === 'soft'", "class.mk-chip--outline": "variant() === 'outline'", "class.mk-chip--selectable": "selectable()", "class.mk-chip--selected": "selectable() && selected()", "class.mk-chip--disabled": "disabled()", "attr.data-tone": "tone()", "attr.role": "selectable() ? 'button' : null", "attr.tabindex": "hostTabindex()", "attr.aria-pressed": "selectable() ? selected() : null", "attr.aria-disabled": "disabled() ? 'true' : null" }, classAttribute: "mk-chip" }, ngImport: i0, template: "<span class=\"mk-chip__content\" [id]=\"contentId\"><ng-content /></span>\n@if (removable()) {\n  <button\n    type=\"button\"\n    class=\"mk-chip__remove\"\n    [attr.aria-label]=\"customRemoveLabel()\"\n    [attr.aria-labelledby]=\"\n      customRemoveLabel() ? null : removeTextId + ' ' + contentId\n    \"\n    [disabled]=\"disabled()\"\n    (click)=\"onRemoveClick($event)\"\n  >\n    <span class=\"mk-visually-hidden\" [id]=\"removeTextId\">{{ i18n.remove }}</span>\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text);display:inline-flex;align-items:center;gap:var(--mk-space-1);height:1.75rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-chip--sm){height:1.5rem;font-size:var(--mk-font-size-xs)}:host(.mk-chip--lg){height:2rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-md)}:host(.mk-chip--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-chip--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-chip--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-chip--selectable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-chip--selectable:hover){background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}:host(.mk-chip--selected){background-color:var(--_main);color:var(--_contrast);border-color:transparent}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-chip--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}.mk-chip__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.mk-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:1.125em;height:1.125em;margin-inline-end:calc(-1 * var(--mk-space-1));padding:0;background:transparent;border:0;border-radius:var(--mk-radius-circle);color:currentColor;font-size:1.15em;line-height:1;cursor:pointer;opacity:.75;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-chip__remove{position:relative}.mk-chip__remove:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-chip__remove:hover{opacity:1;background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-chip__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);opacity:1}.mk-chip__remove:disabled{cursor:not-allowed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'mk-chip', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mk-chip',
+                        '[class.mk-chip--sm]': "size() === 'sm'",
+                        '[class.mk-chip--md]': "size() === 'md'",
+                        '[class.mk-chip--lg]': "size() === 'lg'",
+                        '[class.mk-chip--solid]': "variant() === 'solid'",
+                        '[class.mk-chip--soft]': "variant() === 'soft'",
+                        '[class.mk-chip--outline]': "variant() === 'outline'",
+                        '[class.mk-chip--selectable]': 'selectable()',
+                        '[class.mk-chip--selected]': 'selectable() && selected()',
+                        '[class.mk-chip--disabled]': 'disabled()',
+                        '[attr.data-tone]': 'tone()',
+                        '[attr.role]': "selectable() ? 'button' : null",
+                        '[attr.tabindex]': 'hostTabindex()',
+                        '[attr.aria-pressed]': 'selectable() ? selected() : null',
+                        '[attr.aria-disabled]': "disabled() ? 'true' : null",
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: "<span class=\"mk-chip__content\" [id]=\"contentId\"><ng-content /></span>\n@if (removable()) {\n  <button\n    type=\"button\"\n    class=\"mk-chip__remove\"\n    [attr.aria-label]=\"customRemoveLabel()\"\n    [attr.aria-labelledby]=\"\n      customRemoveLabel() ? null : removeTextId + ' ' + contentId\n    \"\n    [disabled]=\"disabled()\"\n    (click)=\"onRemoveClick($event)\"\n  >\n    <span class=\"mk-visually-hidden\" [id]=\"removeTextId\">{{ i18n.remove }}</span>\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n}\n", styles: ["@charset \"UTF-8\";:host{--_main: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text);display:inline-flex;align-items:center;gap:var(--mk-space-1);height:1.75rem;padding:0 var(--mk-space-2);border:var(--mk-border-width) solid transparent;border-radius:var(--mk-radius-pill);font-family:inherit;font-size:var(--mk-font-size-sm);font-weight:var(--mk-font-weight-medium);line-height:1;white-space:nowrap;vertical-align:middle;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard),border-color var(--mk-duration-fast) var(--mk-ease-standard),box-shadow var(--mk-duration-fast) var(--mk-ease-standard)}:host([data-tone=primary]){--_main: var(--mk-primary);--_hover: var(--mk-primary-hover);--_active: var(--mk-primary-active);--_contrast: var(--mk-primary-contrast);--_subtle: var(--mk-primary-subtle);--_subtle-text: var(--mk-primary-subtle-text)}:host([data-tone=success]){--_main: var(--mk-success);--_hover: var(--mk-success-hover);--_active: var(--mk-success-hover);--_contrast: var(--mk-success-contrast);--_subtle: var(--mk-success-subtle);--_subtle-text: var(--mk-success-subtle-text)}:host([data-tone=warning]){--_main: var(--mk-warning);--_hover: var(--mk-warning-hover);--_active: var(--mk-warning-hover);--_contrast: var(--mk-warning-contrast);--_subtle: var(--mk-warning-subtle);--_subtle-text: var(--mk-warning-subtle-text)}:host([data-tone=danger]){--_main: var(--mk-danger);--_hover: var(--mk-danger-hover);--_active: var(--mk-danger-hover);--_contrast: var(--mk-danger-contrast);--_subtle: var(--mk-danger-subtle);--_subtle-text: var(--mk-danger-subtle-text)}:host([data-tone=info]){--_main: var(--mk-info);--_hover: var(--mk-info-hover);--_active: var(--mk-info-hover);--_contrast: var(--mk-info-contrast);--_subtle: var(--mk-info-subtle);--_subtle-text: var(--mk-info-subtle-text)}:host([data-tone=neutral]){--_main: var(--mk-surface-inverse);--_hover: var(--mk-surface-inverse);--_active: var(--mk-surface-inverse);--_contrast: var(--mk-text-inverse);--_subtle: var(--mk-neutral-subtle);--_subtle-text: var(--mk-neutral-subtle-text)}:host(.mk-chip--sm){height:1.5rem;font-size:var(--mk-font-size-xs)}:host(.mk-chip--lg){height:2rem;padding:0 var(--mk-space-3);font-size:var(--mk-font-size-md)}:host(.mk-chip--solid){background-color:var(--_main);color:var(--_contrast)}:host(.mk-chip--soft){background-color:var(--_subtle);color:var(--_subtle-text)}:host(.mk-chip--outline){background-color:transparent;color:var(--_subtle-text);border-color:color-mix(in srgb,var(--_main) 42%,var(--mk-border-strong))}:host(.mk-chip--selectable){cursor:pointer;-webkit-user-select:none;user-select:none}:host(.mk-chip--selectable:hover){background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}:host(.mk-chip--selected){background-color:var(--_main);color:var(--_contrast);border-color:transparent}:host(:focus-visible){outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}:host(.mk-chip--disabled){cursor:not-allowed;opacity:.55;pointer-events:none}.mk-chip__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.mk-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:1.125em;height:1.125em;margin-inline-end:calc(-1 * var(--mk-space-1));padding:0;background:transparent;border:0;border-radius:var(--mk-radius-circle);color:currentColor;font-size:1.15em;line-height:1;cursor:pointer;opacity:.75;transition:background-color var(--mk-duration-fast) var(--mk-ease-standard)}@media(pointer:coarse){.mk-chip__remove{position:relative}.mk-chip__remove:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-chip__remove:hover{opacity:1;background-image:linear-gradient(var(--mk-hover-overlay),var(--mk-hover-overlay))}.mk-chip__remove:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset);opacity:1}.mk-chip__remove:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MkChip };
+//# sourceMappingURL=mk-kit-ui-chip.mjs.map

package/fesm2022/mk-kit-ui-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mk-kit-ui-chip.mjs","sources":["../../../projects/mk-kit/chip/chip.ts","../../../projects/mk-kit/chip/chip.html","../../../projects/mk-kit/chip/mk-kit-ui-chip.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { MK_I18N, mkUniqueId } from '@mk-kit/ui/core';\nimport type { MkSize, MkTone } from '@mk-kit/ui/core';\n\n/** Visual treatment for a {@link MkChip}. */\nexport type MkChipVariant = 'solid' | 'soft' | 'outline';\n\n/**\n * Chip — an interactive, optionally removable/selectable token. Use it for\n * filters, active selections or editable input tokens. For a purely decorative\n * label use {@link MkTag} instead.\n *\n * ```html\n * <mk-chip removable (removed)=\"drop(item)\">{{ item.name }}</mk-chip>\n * <mk-chip selectable [(selected)]=\"active\" tone=\"primary\">Filter</mk-chip>\n * ```\n */\n@Component({\n  selector: 'mk-chip',\n  templateUrl: './chip.html',\n  styleUrl: './chip.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mk-chip',\n    '[class.mk-chip--sm]': \"size() === 'sm'\",\n    '[class.mk-chip--md]': \"size() === 'md'\",\n    '[class.mk-chip--lg]': \"size() === 'lg'\",\n    '[class.mk-chip--solid]': \"variant() === 'solid'\",\n    '[class.mk-chip--soft]': \"variant() === 'soft'\",\n    '[class.mk-chip--outline]': \"variant() === 'outline'\",\n    '[class.mk-chip--selectable]': 'selectable()',\n    '[class.mk-chip--selected]': 'selectable() && selected()',\n    '[class.mk-chip--disabled]': 'disabled()',\n    '[attr.data-tone]': 'tone()',\n    '[attr.role]': \"selectable() ? 'button' : null\",\n    '[attr.tabindex]': 'hostTabindex()',\n    '[attr.aria-pressed]': 'selectable() ? selected() : null',\n    '[attr.aria-disabled]': \"disabled() ? 'true' : null\",\n    '(click)': 'onClick()',\n    '(keydown)': 'onKeydown($event)',\n  },\n})\nexport class MkChip {\n  protected readonly i18n = inject(MK_I18N);\n\n  /** Semantic color tone. */\n  readonly tone = input<MkTone>('neutral');\n  /** Visual treatment. */\n  readonly variant = input<MkChipVariant>('soft');\n  /** Size scale. */\n  readonly size = input<MkSize>('md');\n  /** Make the chip toggle a selected state on click / Enter / Space. */\n  readonly selectable = input(false, { transform: booleanAttribute });\n  /** Show a trailing remove button and enable Delete/Backspace removal. */\n  readonly removable = input(false, { transform: booleanAttribute });\n  /** Disable all interaction. */\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Accessible label for the remove button. */\n  readonly removeLabel = input(this.i18n.remove);\n\n  /** Id of the projected content, so the remove button's name can include it. */\n  protected readonly contentId = mkUniqueId('mk-chip-content');\n  /** Id of the sr-only \"Remove\" text inside the remove button. */\n  protected readonly removeTextId = mkUniqueId('mk-chip-remove');\n  /**\n   * A consumer-supplied `removeLabel`, or `null` when it is still the i18n\n   * default. With the default the button is named via `aria-labelledby`\n   * (\"Remove <chip text>\") so N chips don't get N identical names;\n   * `aria-labelledby` would beat `aria-label` in the accname algorithm, so the\n   * two bindings are branched rather than stacked.\n   */\n  protected readonly customRemoveLabel = computed(() => {\n    const label = this.removeLabel();\n    return label === this.i18n.remove ? null : label;\n  });\n\n  /** Two-way selected state (only meaningful when `selectable`). */\n  readonly selected = model(false);\n  /** Emitted when the chip is removed via the button or Delete/Backspace. */\n  readonly removed = output<void>();\n\n  protected hostTabindex(): number | null {\n    // Removable chips advertise Delete/Backspace removal, so they must be\n    // focusable even when they are not selectable.\n    return (this.selectable() || this.removable()) && !this.disabled()\n      ? 0\n      : null;\n  }\n\n  protected onClick(): void {\n    if (this.disabled()) return;\n    if (this.selectable()) this.selected.set(!this.selected());\n  }\n\n  protected onKeydown(event: Event): void {\n    if (this.disabled()) return;\n    const key = (event as KeyboardEvent).key;\n    if (this.selectable() && (key === 'Enter' || key === ' ')) {\n      event.preventDefault();\n      this.selected.set(!this.selected());\n    } else if (this.removable() && (key === 'Delete' || key === 'Backspace')) {\n      event.preventDefault();\n      this.remove();\n    }\n  }\n\n  protected onRemoveClick(event: Event): void {\n    event.stopPropagation();\n    this.remove();\n  }\n\n  private remove(): void {\n    if (this.disabled()) return;\n    this.removed.emit();\n  }\n}\n","<span class=\"mk-chip__content\" [id]=\"contentId\"><ng-content /></span>\n@if (removable()) {\n  <button\n    type=\"button\"\n    class=\"mk-chip__remove\"\n    [attr.aria-label]=\"customRemoveLabel()\"\n    [attr.aria-labelledby]=\"\n      customRemoveLabel() ? null : removeTextId + ' ' + contentId\n    \"\n    [disabled]=\"disabled()\"\n    (click)=\"onRemoveClick($event)\"\n  >\n    <span class=\"mk-visually-hidden\" [id]=\"removeTextId\">{{ i18n.remove }}</span>\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}