shirkasoft-ui-components 1.3.7 → 1.3.9

package/fesm2022/shirkasoft-ui-components-toggle.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, effect, forwardRef, Component } from '@angular/core';
+import { input, output, signal, computed, effect, forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
@@ -22,10 +22,14 @@ class ToggleComponent {
         this.checked = input(undefined, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
         /** Emitted with the new value when the user toggles the control. */
         this.checkedChange = output();
+        /** Disables the control (also settable through reactive forms). */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /** Internal controlled/reactive value. */
         this._value = signal(false, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
         /** Reactive disabled state. */
         this._disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+        /** Disabled through the `disabled` input or the form control. */
+        this.isDisabled = computed(() => this.disabled() || this._disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /** Callback notified with the new value on change (ControlValueAccessor). */
         this.onChange = () => { };
         /** Callback notified when the control loses focus or is touched. */
@@ -57,8 +61,15 @@ class ToggleComponent {
      * Inverts the current value (unless disabled), notifies the form control,
      * marks the control as touched and emits `checkedChange`.
      */
+    /** Space/Enter toggles the focused switch or checkbox. */
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
     toggle() {
-        if (this._disabled())
+        if (this.isDisabled())
             return;
         const newValue = !this._value();
         this._value.set(newValue);
@@ -67,7 +78,7 @@ class ToggleComponent {
         this.checkedChange.emit(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ToggleComponent, isStandalone: true, selector: "shk-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ToggleComponent, isStandalone: true, selector: "shk-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
@@ -77,11 +88,21 @@ class ToggleComponent {
     <div class="relative">
       <label
         class="inline-flex items-center gap-3 cursor-pointer select-none"
-        [class.opacity-50]="_disabled()"
-        [class.cursor-not-allowed]="_disabled()"
+        [class.opacity-50]="isDisabled()"
+        [class.cursor-not-allowed]="isDisabled()"
+        [class.shk-toggle-disabled]="isDisabled()"
       >
         @if (mode() === 'toggle') {
-          <div class="relative flex-shrink-0" (click)="toggle()">
+          <div
+            class="shk-toggle-control relative flex-shrink-0 rounded-full"
+            role="switch"
+            [attr.aria-checked]="_value()"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-label]="label() || null"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (keydown)="onKeydown($event)"
+            (click)="toggle()"
+          >
             <div
               class="w-10 h-6 rounded-full transition-colors duration-200"
               [class._shk-bg-primary]="_value()"
@@ -89,13 +110,19 @@ class ToggleComponent {
               [class._shk-dark-bg-surface-600]="!_value()"
             ></div>
             <div
-              class="absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
+              class="shk-toggle-thumb absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
               [class.translate-x-4]="_value()"
             ></div>
           </div>
         } @else {
           <div
-            class="flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            class="shk-toggle-control shk-toggle-box flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            role="checkbox"
+            [attr.aria-checked]="_value()"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-label]="label() || null"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (keydown)="onKeydown($event)"
             [class._shk-bg-primary]="_value()"
             [class._shk-border-primary]="_value()"
             [class._shk-border-surface-300]="!_value()"
@@ -116,23 +143,29 @@ class ToggleComponent {
         }
       </label>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  `, isInline: true, styles: [".shk-toggle-control{outline:none;transition:box-shadow .15s ease}.shk-toggle-control:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--shk-primary-500) 30%,transparent)}.shk-toggle-box{border-radius:.3rem}label:not(.shk-toggle-disabled):hover .shk-toggle-box[aria-checked=false]{border-color:var(--shk-primary-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'shk-toggle',
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `
+            args: [{ selector: 'shk-toggle', standalone: true, imports: [CommonModule], template: `
     <div class="relative">
       <label
         class="inline-flex items-center gap-3 cursor-pointer select-none"
-        [class.opacity-50]="_disabled()"
-        [class.cursor-not-allowed]="_disabled()"
+        [class.opacity-50]="isDisabled()"
+        [class.cursor-not-allowed]="isDisabled()"
+        [class.shk-toggle-disabled]="isDisabled()"
       >
         @if (mode() === 'toggle') {
-          <div class="relative flex-shrink-0" (click)="toggle()">
+          <div
+            class="shk-toggle-control relative flex-shrink-0 rounded-full"
+            role="switch"
+            [attr.aria-checked]="_value()"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-label]="label() || null"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (keydown)="onKeydown($event)"
+            (click)="toggle()"
+          >
             <div
               class="w-10 h-6 rounded-full transition-colors duration-200"
               [class._shk-bg-primary]="_value()"
@@ -140,13 +173,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
               [class._shk-dark-bg-surface-600]="!_value()"
             ></div>
             <div
-              class="absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
+              class="shk-toggle-thumb absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200"
               [class.translate-x-4]="_value()"
             ></div>
           </div>
         } @else {
           <div
-            class="flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            class="shk-toggle-control shk-toggle-box flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center"
+            role="checkbox"
+            [attr.aria-checked]="_value()"
+            [attr.aria-disabled]="isDisabled() || null"
+            [attr.aria-label]="label() || null"
+            [attr.tabindex]="isDisabled() ? -1 : 0"
+            (keydown)="onKeydown($event)"
             [class._shk-bg-primary]="_value()"
             [class._shk-border-primary]="_value()"
             [class._shk-border-surface-300]="!_value()"
@@ -167,16 +206,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
         }
       </label>
     </div>
-  `,
-                    providers: [
+  `, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+                    ], styles: [".shk-toggle-control{outline:none;transition:box-shadow .15s ease}.shk-toggle-control:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--shk-primary-500) 30%,transparent)}.shk-toggle-box{border-radius:.3rem}label:not(.shk-toggle-disabled):hover .shk-toggle-box[aria-checked=false]{border-color:var(--shk-primary-400)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/shirkasoft-ui-components-toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shirkasoft-ui-components-toggle.mjs","sources":["../../../projects/ui-components/toggle/toggle.component.ts","../../../projects/ui-components/toggle/shirkasoft-ui-components-toggle.ts"],"sourcesContent":["import { Component, forwardRef, input, output, signal, effect } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\n\n/**\n * Switch / checkbox component that implements ControlValueAccessor so it can\n * be used with reactive and template-driven forms.\n */\n@Component({\n  selector: 'shk-toggle',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div class=\"relative\">\n      <label\n        class=\"inline-flex items-center gap-3 cursor-pointer select-none\"\n        [class.opacity-50]=\"_disabled()\"\n        [class.cursor-not-allowed]=\"_disabled()\"\n      >\n        @if (mode() === 'toggle') {\n          <div class=\"relative flex-shrink-0\" (click)=\"toggle()\">\n            <div\n              class=\"w-10 h-6 rounded-full transition-colors duration-200\"\n              [class._shk-bg-primary]=\"_value()\"\n              [class._shk-bg-surface-300]=\"!_value()\"\n              [class._shk-dark-bg-surface-600]=\"!_value()\"\n            ></div>\n            <div\n              class=\"absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200\"\n              [class.translate-x-4]=\"_value()\"\n            ></div>\n          </div>\n        } @else {\n          <div\n            class=\"flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center\"\n            [class._shk-bg-primary]=\"_value()\"\n            [class._shk-border-primary]=\"_value()\"\n            [class._shk-border-surface-300]=\"!_value()\"\n            [class._shk-dark-border-surface-600]=\"!_value()\"\n            (click)=\"toggle()\"\n          >\n            @if (_value()) {\n              <svg class=\"w-3 h-3 text-white\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            }\n          </div>\n        }\n        @if (label()) {\n          <span class=\"text-sm _shk-text-surface-700 _shk-dark-text-surface-300\">\n            {{ label() }}\n          </span>\n        }\n      </label>\n    </div>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n})\nexport class ToggleComponent implements ControlValueAccessor {\n  /** Text displayed next to the control. */\n  label = input<string>('');\n  /** Visual style: 'toggle' (switch) or 'checkbox'. Defaults to 'toggle'. */\n  mode = input<'toggle' | 'checkbox'>('toggle');\n  /** Manually controlled checked state (supports one-way binding). */\n  checked = input<boolean | undefined>(undefined);\n  /** Emitted with the new value when the user toggles the control. */\n  checkedChange = output<boolean>();\n\n  /** Internal controlled/reactive value. */\n  _value = signal(false);\n  /** Reactive disabled state. */\n  _disabled = signal(false);\n\n  /** Callback notified with the new value on change (ControlValueAccessor). */\n  private onChange: (value: boolean) => void = () => {};\n\n  /** Callback notified when the control loses focus or is touched. */\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    effect(() => {\n      const manual = this.checked();\n      if (manual !== undefined) {\n        this._value.set(manual);\n      }\n    });\n  }\n\n  /** Sets the value from the form control. */\n  writeValue(value: any): void {\n    this._value.set(!!value);\n  }\n\n  /** Registers the callback invoked on value changes (ControlValueAccessor). */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** Registers the callback invoked when the control is touched. */\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /** Reflects the disabled state of the form control. */\n  setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  /**\n   * Inverts the current value (unless disabled), notifies the form control,\n   * marks the control as touched and emits `checkedChange`.\n   */\n  toggle(): void {\n    if (this._disabled()) return;\n    const newValue = !this._value();\n    this._value.set(newValue);\n    this.onChange(newValue);\n    this.onTouched();\n    this.checkedChange.emit(newValue);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shirkasoft-ui-components-toggle.mjs","sources":["../../../projects/ui-components/toggle/toggle.component.ts","../../../projects/ui-components/toggle/shirkasoft-ui-components-toggle.ts"],"sourcesContent":["import { Component, forwardRef, input, output, signal, effect, computed } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\n\n/**\n * Switch / checkbox component that implements ControlValueAccessor so it can\n * be used with reactive and template-driven forms.\n */\n@Component({\n  selector: 'shk-toggle',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div class=\"relative\">\n      <label\n        class=\"inline-flex items-center gap-3 cursor-pointer select-none\"\n        [class.opacity-50]=\"isDisabled()\"\n        [class.cursor-not-allowed]=\"isDisabled()\"\n        [class.shk-toggle-disabled]=\"isDisabled()\"\n      >\n        @if (mode() === 'toggle') {\n          <div\n            class=\"shk-toggle-control relative flex-shrink-0 rounded-full\"\n            role=\"switch\"\n            [attr.aria-checked]=\"_value()\"\n            [attr.aria-disabled]=\"isDisabled() || null\"\n            [attr.aria-label]=\"label() || null\"\n            [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n            (keydown)=\"onKeydown($event)\"\n            (click)=\"toggle()\"\n          >\n            <div\n              class=\"w-10 h-6 rounded-full transition-colors duration-200\"\n              [class._shk-bg-primary]=\"_value()\"\n              [class._shk-bg-surface-300]=\"!_value()\"\n              [class._shk-dark-bg-surface-600]=\"!_value()\"\n            ></div>\n            <div\n              class=\"shk-toggle-thumb absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200\"\n              [class.translate-x-4]=\"_value()\"\n            ></div>\n          </div>\n        } @else {\n          <div\n            class=\"shk-toggle-control shk-toggle-box flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center\"\n            role=\"checkbox\"\n            [attr.aria-checked]=\"_value()\"\n            [attr.aria-disabled]=\"isDisabled() || null\"\n            [attr.aria-label]=\"label() || null\"\n            [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n            (keydown)=\"onKeydown($event)\"\n            [class._shk-bg-primary]=\"_value()\"\n            [class._shk-border-primary]=\"_value()\"\n            [class._shk-border-surface-300]=\"!_value()\"\n            [class._shk-dark-border-surface-600]=\"!_value()\"\n            (click)=\"toggle()\"\n          >\n            @if (_value()) {\n              <svg class=\"w-3 h-3 text-white\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            }\n          </div>\n        }\n        @if (label()) {\n          <span class=\"text-sm _shk-text-surface-700 _shk-dark-text-surface-300\">\n            {{ label() }}\n          </span>\n        }\n      </label>\n    </div>\n  `,\n  styles: [\n    `\n      .shk-toggle-control {\n        outline: none;\n        transition: box-shadow 0.15s ease;\n      }\n      .shk-toggle-control:focus-visible {\n        box-shadow: 0 0 0 3px color-mix(in srgb, var(--shk-primary-500) 30%, transparent);\n      }\n      .shk-toggle-box {\n        border-radius: 0.3rem;\n      }\n      label:not(.shk-toggle-disabled):hover .shk-toggle-box[aria-checked='false'] {\n        border-color: var(--shk-primary-400);\n      }\n    `,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n})\nexport class ToggleComponent implements ControlValueAccessor {\n  /** Text displayed next to the control. */\n  label = input<string>('');\n  /** Visual style: 'toggle' (switch) or 'checkbox'. Defaults to 'toggle'. */\n  mode = input<'toggle' | 'checkbox'>('toggle');\n  /** Manually controlled checked state (supports one-way binding). */\n  checked = input<boolean | undefined>(undefined);\n  /** Emitted with the new value when the user toggles the control. */\n  checkedChange = output<boolean>();\n  /** Disables the control (also settable through reactive forms). */\n  disabled = input<boolean>(false);\n\n  /** Internal controlled/reactive value. */\n  _value = signal(false);\n  /** Reactive disabled state. */\n  _disabled = signal(false);\n  /** Disabled through the `disabled` input or the form control. */\n  isDisabled = computed(() => this.disabled() || this._disabled());\n\n  /** Callback notified with the new value on change (ControlValueAccessor). */\n  private onChange: (value: boolean) => void = () => {};\n\n  /** Callback notified when the control loses focus or is touched. */\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    effect(() => {\n      const manual = this.checked();\n      if (manual !== undefined) {\n        this._value.set(manual);\n      }\n    });\n  }\n\n  /** Sets the value from the form control. */\n  writeValue(value: any): void {\n    this._value.set(!!value);\n  }\n\n  /** Registers the callback invoked on value changes (ControlValueAccessor). */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** Registers the callback invoked when the control is touched. */\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /** Reflects the disabled state of the form control. */\n  setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  /**\n   * Inverts the current value (unless disabled), notifies the form control,\n   * marks the control as touched and emits `checkedChange`.\n   */\n  /** Space/Enter toggles the focused switch or checkbox. */\n  onKeydown(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  toggle(): void {\n    if (this.isDisabled()) return;\n    const newValue = !this._value();\n    this._value.set(newValue);\n    this.onChange(newValue);\n    this.onTouched();\n    this.checkedChange.emit(newValue);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shirkasoft-ui-components",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "Angular UI Components Library — themeable via CSS custom properties",
   "keywords": [
     "angular",
@@ -19,7 +19,7 @@
   "bugs": {
     "url": "https://github.com/Ansem13/shirkasoft-ui-components/issues"
   },
-  "homepage": "https://ansem13.github.io/shirkasoft-ui-components/",
+  "homepage": "https://ui-library.shirkasoft.com/",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",

package/src/theme.css

@@ -460,3 +460,83 @@
 ._shk-scrollbar::-webkit-scrollbar-corner {
   background: transparent;
 }
+
+/* ============================================================
+   Form controls (text-field, price-input, select trigger…)
+   Soft focus ring + clearly distinguishable disabled state.
+   Element-qualified selectors so they win over the Tailwind
+   utilities used in the templates regardless of import order.
+   ============================================================ */
+:root {
+  --shk-ring: color-mix(in srgb, var(--shk-primary-500) 22%, transparent);
+  --shk-ring-error: color-mix(in srgb, var(--shk-error-500) 22%, transparent);
+}
+input.shk-control,
+textarea.shk-control,
+div.shk-control {
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+input.shk-control:focus,
+textarea.shk-control:focus,
+div.shk-control:focus,
+div.shk-control:focus-within,
+div.shk-control.open {
+  outline: none;
+  border-color: var(--shk-primary-500);
+  box-shadow: 0 0 0 3px var(--shk-ring);
+}
+/* Lift the focused field over an attached button (search, currency…) so
+   the ring isn't hidden on that side. */
+input.shk-control.shk-control-addon:focus {
+  position: relative;
+  z-index: 1;
+}
+/* Field whose error was just fixed keeps its green state while focused. */
+input.shk-control.shk-control-valid:focus,
+textarea.shk-control.shk-control-valid:focus {
+  border-color: var(--shk-success-600);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shk-success-600) 22%, transparent);
+}
+input.shk-control[aria-invalid='true']:focus,
+textarea.shk-control[aria-invalid='true']:focus,
+div.shk-control[aria-invalid='true']:focus-within,
+div.shk-control[aria-invalid='true'].open {
+  border-color: var(--shk-error-500);
+  box-shadow: 0 0 0 3px var(--shk-ring-error);
+}
+input.shk-control:disabled,
+textarea.shk-control:disabled,
+div.shk-control.shk-control-disabled {
+  background-color: var(--shk-surface-100);
+  border-color: var(--shk-surface-200);
+  color: var(--shk-surface-500);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.dark input.shk-control:disabled,
+.dark textarea.shk-control:disabled,
+.dark div.shk-control.shk-control-disabled {
+  background-color: var(--shk-surface-50);
+  color: var(--shk-surface-400);
+}
+div.shk-control.shk-control-disabled * {
+  cursor: not-allowed;
+}
+
+/* ============================================================
+   Reduced motion: honour the OS setting in every component.
+   Loading indicators (spinners, dots, bars) are essential feedback
+   and keep animating, otherwise the UI looks frozen.
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  [class*='shk-']:not([class*='spin']):not([class*='shk-loading']),
+  [class*='shk-']:not([class*='spin']):not([class*='shk-loading'])::before,
+  [class*='shk-']:not([class*='spin']):not([class*='shk-loading'])::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/types/shirkasoft-ui-components-date-picker.d.ts

@@ -2,7 +2,7 @@ import * as _angular_core from '@angular/core';
 import { ControlValueAccessor, FormGroup, FormControl } from '@angular/forms';
 
 /** Which granularity the picker edits: a day, a month or a year. */
-type DatePickerView = 'date' | 'month' | 'year';
+type DatePickerView = 'date' | 'week' | 'month' | 'year';
 /** Which time selection mode the analog clock is in. */
 type ClockMode = 'hours' | 'minutes';
 /**
@@ -22,8 +22,10 @@ declare class DatePickerComponent implements ControlValueAccessor {
     private transloco;
     /** HTML id for the input (for label/for pairing). */
     id: _angular_core.InputSignal<string>;
-    /** Granularity of the picker ('date' | 'month' | 'year'). */
+    /** Granularity of the picker ('date' | 'week' | 'month' | 'year'). */
     view: _angular_core.InputSignal<DatePickerView>;
+    /** First day of the week (0=Sunday ... 6=Saturday), used by week view. */
+    weekStart: _angular_core.InputSignal<number>;
     /** Label shown above the input. */
     label: _angular_core.InputSignal<string>;
     /** Placeholder of the input. */
@@ -128,6 +130,17 @@ declare class DatePickerComponent implements ControlValueAccessor {
     firstDayOfMonth: _angular_core.Signal<number>;
     /** Calendar grid: nulls for leading blanks then the days of the month. */
     calendarDays: _angular_core.Signal<(number | null)[]>;
+    /** Weeks of the viewed month (rows aligned to `weekStart`), for week view. */
+    monthWeeks: _angular_core.Signal<{
+        index: number;
+        start: Date;
+        end: Date;
+        range: string;
+    }[]>;
+    /** Localized range label for a week (e.g. '2 — 8 feb'). */
+    formatWeekRange(start: Date, end: Date): string;
+    /** Localized label for a week row ('Semana N' / 'Week N'). */
+    weekLabel(index: number): string;
     /** Whether the prev navigation button is allowed by `minValue`. */
     canGoPrev: _angular_core.Signal<boolean>;
     /** Whether the next navigation button is allowed by `maxValue`. */
@@ -171,7 +184,8 @@ declare class DatePickerComponent implements ControlValueAccessor {
     selectMonth(monthIndex: number): void;
     /** Selects a day - completes the date selection. */
     selectDay(day: number): void;
-    /** Commits a value, updates the component, the control and the outputs. */
+    /** Selects a week - emits its start date (YYYY-MM-DD). */
+    selectWeek(start: Date): void;
     private setValue;
     /** Confirms the selected time and commits the combined date+time value. */
     confirmTime(): void;
@@ -272,6 +286,12 @@ declare class DatePickerComponent implements ControlValueAccessor {
     private parseTimeOnly;
     /** Whether the given day is today's date. */
     isToday(day: number): boolean;
+    /** ISO date (YYYY-MM-DD) of the week start containing the given date. */
+    private weekStartISO;
+    /** Whether the given week row contains the displayed/selected date. */
+    isSelectedWeek(start: Date): boolean;
+    /** Whether the given week row contains today's date. */
+    isCurrentWeek(start: Date): boolean;
     /** Whether the given month matches the selected month and year. */
     isSelectedMonth(monthIndex: number): boolean;
     isCurrentMonth(monthIndex: number): boolean;
@@ -282,7 +302,7 @@ declare class DatePickerComponent implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatePickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "shk-date-picker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeOnly": { "alias": "timeOnly"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatePickerComponent, "shk-date-picker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "weekStart": { "alias": "weekStart"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "formGroup": { "alias": "formGroup"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorMessages": { "alias": "errorMessages"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "timeOnly": { "alias": "timeOnly"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { DatePickerComponent };

package/types/shirkasoft-ui-components-table.d.ts

@@ -39,6 +39,14 @@ interface RowAction {
     isVisible?: (rowData: any) => boolean;
     isDisabled?: (rowData: any) => boolean;
 }
+interface BulkAction {
+    label: string;
+    icon?: string | any;
+    onClick: (selectedRows: any[]) => void;
+    class?: string;
+    isVisible?: (selectedRows: any[]) => boolean;
+    isDisabled?: (selectedRows: any[]) => boolean;
+}
 interface PageChangeEvent {
     first: number;
     rows: number;
@@ -50,16 +58,13 @@ interface FilterChangeEvent {
         [key: string]: any;
     };
 }
-/**
- * Shirkasoft UI Components.
- * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
- * Belongs to Shirkasoft.
- */
 /**
  * Data table with sorting, column filters, global search, pagination,
  * row/header actions, tag cells and optional server-side mode.
  */
 declare class TableComponent {
+    /** Unique id prefix so several tables on the same page don't share element ids. */
+    protected readonly uid: string;
     private fb;
     private cdr;
     private transloco;
@@ -124,6 +129,19 @@ declare class TableComponent {
     }[]>;
     /** Currently active filter chip value. */
     activeFilter: _angular_core.InputSignal<string>;
+    /** Whether to render the leading checkbox column for multi-row selection. */
+    selectable: _angular_core.InputSignal<boolean>;
+    /**
+     * Field used to identify rows in the selection (keeps it stable across
+     * pages and data reloads). Falls back to the row reference when missing.
+     */
+    dataKey: _angular_core.InputSignal<string>;
+    /** Optional predicate to disable the checkbox of specific rows. */
+    isRowSelectable: _angular_core.InputSignal<((row: any) => boolean) | undefined>;
+    /** Actions shown in the header while at least one row is selected. */
+    bulkActions: _angular_core.InputSignal<BulkAction[]>;
+    /** Selected rows. Supports two-way binding via `[(selection)]`. */
+    selection: _angular_core.ModelSignal<any[]>;
     /** Emits when the user clicks the refresh button. */
     refresh: _angular_core.OutputEmitterRef<void>;
     /** Emits page changes (server-side mode) with first/rows/page info. */
@@ -175,6 +193,20 @@ declare class TableComponent {
     private columnFilterSubscriptions;
     /** Columns array with the leading `actions` column when row actions exist. */
     columnsWithActions: _angular_core.Signal<Column[]>;
+    /** Keys of the selected rows, for O(1) lookups in the template. */
+    private selectedKeys;
+    /** Whether non-empty data has been received (see the selection pruning effect). */
+    private hasReceivedData;
+    /** Selectable rows of the current page. */
+    protected selectablePageRows: _angular_core.Signal<any[]>;
+    /** Whether every selectable row of the current page is selected. */
+    allPageSelected: _angular_core.Signal<boolean>;
+    /** Whether only part of the current page is selected (header checkbox indeterminate). */
+    somePageSelected: _angular_core.Signal<boolean>;
+    /** Visible bulk actions for the current selection. */
+    visibleBulkActions: _angular_core.Signal<BulkAction[]>;
+    /** Number of rendered columns, including the selection column. */
+    totalColspan: _angular_core.Signal<number>;
     /** Total records: server-provided in server mode, locally computed otherwise. */
     effectiveTotalRecords: _angular_core.Signal<number>;
     /**
@@ -208,6 +240,31 @@ declare class TableComponent {
     private applyColumnFilters;
     /** Slices the filtered rows for the current page. */
     private updateDisplayedData;
+    /** Identity used for a row inside the selection. */
+    private getSelectionKey;
+    /** Whether the row's checkbox is enabled. */
+    canSelectRow(row: any): boolean;
+    /** Whether the row is currently selected. */
+    isRowSelected(row: any): boolean;
+    /** Selects/deselects a single row. */
+    toggleRowSelection(row: any): void;
+    /**
+     * Header checkbox: selects every selectable row of the current page or,
+     * when all of them are already selected, removes them from the selection.
+     * Rows selected on other pages are kept.
+     */
+    toggleSelectAllPage(): void;
+    /** Clears the whole selection. */
+    clearSelection(): void;
+    /** Runs a bulk action with the current selection. */
+    runBulkAction(action: BulkAction): void;
+    /** Whether a bulk action is disabled for the current selection. */
+    isBulkActionDisabled(action: BulkAction): boolean;
+    /**
+     * Drops selected rows that no longer exist in the data (client mode, e.g.
+     * after a bulk delete) and refreshes kept rows with their new references.
+     */
+    private pruneSelection;
     /** Emits the filter chip clicked in the template. */
     onFilterClick(value: string): void;
     /** Toggles the sort direction of a column (first click sorts ascending). */
@@ -221,8 +278,26 @@ declare class TableComponent {
     onSearchInput(value: string): void;
     /** Clears a column filter value and hides its input. */
     clearFilter(field: string): void;
-    /** Toggles the visibility of a column filter input. */
-    toggleFilter(field: string): void;
+    /** Width (px) of the column filter popup, used to keep it inside the viewport. */
+    private readonly FILTER_POPUP_WIDTH;
+    /** Viewport position of the open column filter popup. */
+    filterPopupPosition: _angular_core.WritableSignal<{
+        top: number;
+        left: number;
+    }>;
+    /** Filter button the open popup is anchored to, and its scroll/resize listener cleanup. */
+    private filterAnchor;
+    private filterListenersCleanup;
+    /**
+     * Toggles a column filter popup. Only one popup is open at a time. The
+     * popup uses `position: fixed` anchored to the filter button, so the
+     * header cell (`overflow: hidden`) and the scroll wrapper can't clip it.
+     */
+    toggleFilter(field: string, event?: Event): void;
+    /** Closes every column filter popup (values are kept). */
+    closeFilters(): void;
+    /** Places the filter popup under its button, clamped to the viewport. */
+    private updateFilterPopupPosition;
     /**
      * Whether a column filter is non-empty. Avoids treating the number 0 as
      * "no value".
@@ -307,9 +382,11 @@ declare class TableComponent {
     private getRowKey;
     /** Closes all open action dropdowns when clicking anywhere on the document. */
     onDocumentClick(): void;
+    /** Closes the column filter popup with Escape. */
+    onEscape(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "shk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowsPerPage": { "alias": "rowsPerPage"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showActionRow": { "alias": "showActionRow"; "required": false; "isSignal": true; }; "customTemplates": { "alias": "customTemplates"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "hasShadow": { "alias": "hasShadow"; "required": false; "isSignal": true; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; "isSignal": true; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "activeFilter": { "alias": "activeFilter"; "required": false; "isSignal": true; }; }, { "refresh": "refresh"; "pageChange": "pageChange"; "filterChange": "filterChange"; "searchChange": "searchChange"; "filterClick": "filterClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "shk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rowsPerPage": { "alias": "rowsPerPage"; "required": false; "isSignal": true; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showActionRow": { "alias": "showActionRow"; "required": false; "isSignal": true; }; "customTemplates": { "alias": "customTemplates"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "hasShadow": { "alias": "hasShadow"; "required": false; "isSignal": true; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; "isSignal": true; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "serverSide": { "alias": "serverSide"; "required": false; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "activeFilter": { "alias": "activeFilter"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "isRowSelectable": { "alias": "isRowSelectable"; "required": false; "isSignal": true; }; "bulkActions": { "alias": "bulkActions"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; "refresh": "refresh"; "pageChange": "pageChange"; "filterChange": "filterChange"; "searchChange": "searchChange"; "filterClick": "filterClick"; }, never, never, true, never>;
 }
 
 export { TableComponent };
-export type { Column, FilterChangeEvent, PageChangeEvent, RowAction, TableAction };
+export type { BulkAction, Column, FilterChangeEvent, PageChangeEvent, RowAction, TableAction };

package/types/shirkasoft-ui-components-toggle.d.ts

@@ -19,10 +19,14 @@ declare class ToggleComponent implements ControlValueAccessor {
     checked: _angular_core.InputSignal<boolean | undefined>;
     /** Emitted with the new value when the user toggles the control. */
     checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Disables the control (also settable through reactive forms). */
+    disabled: _angular_core.InputSignal<boolean>;
     /** Internal controlled/reactive value. */
     _value: _angular_core.WritableSignal<boolean>;
     /** Reactive disabled state. */
     _disabled: _angular_core.WritableSignal<boolean>;
+    /** Disabled through the `disabled` input or the form control. */
+    isDisabled: _angular_core.Signal<boolean>;
     /** Callback notified with the new value on change (ControlValueAccessor). */
     private onChange;
     /** Callback notified when the control loses focus or is touched. */
@@ -40,9 +44,11 @@ declare class ToggleComponent implements ControlValueAccessor {
      * Inverts the current value (unless disabled), notifies the form control,
      * marks the control as touched and emits `checkedChange`.
      */
+    /** Space/Enter toggles the focused switch or checkbox. */
+    onKeydown(event: KeyboardEvent): void;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "shk-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "shk-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
 }
 
 export { ToggleComponent };