@shibui-ui/ui 1.23.0 → 1.24.1

package/dist/components/atoms/button/lib-button.component.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
-import { LibSize, LibVariant } from '../../../types';
+import { LibSize } from '../../../types';
+import { LibButtonVariant } from './lib-button.types';
 /**
  * @tag lib-button
  * @element lib-button
@@ -12,9 +13,9 @@ export declare class LibButton extends LitElement {
     private _buttonId;
     constructor();
     /**
-   * @type {"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "accent"}
+   * @type {"primary" | "secondary" | "ghost" | "accent" | "danger" | "kintsugi" | "brutal"}
    */
-    variant: LibVariant;
+    variant: LibButtonVariant;
     /**
    * @type {"sm" | "md" | "lg" | "xl"}
    */
@@ -28,6 +29,14 @@ export declare class LibButton extends LitElement {
      */
     glass: boolean;
     /**
+   * @type {boolean}
+   */
+    spotlight: boolean;
+    private _onMouseMove;
+    private _onMouseLeave;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
    * @type {'button' | 'submit' | 'reset'}
    */
     type: 'button' | 'submit' | 'reset';

package/dist/components/atoms/button/lib-button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAsB,MAAM,gBAAgB,CAAC;AAK9E;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAOpB;IAEF,OAAO,CAAC,SAAS,CAAS;;IAO1B;;KAEC;IAED,OAAO,EAAE,UAAU,CAAa;IAEhC;;KAEC;IAED,IAAI,EAAE,OAAO,CAAQ;IAErB;;KAEC;IAED,QAAQ,UAAS;IAEnB;;OAEG;IAED,KAAK,UAAS;IAEd;;KAEC;IAED,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;KAEC;IAED,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC;;KAEC;IAEQ,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;OAEG;IACM,MAAM,IAAI,cAAc;IAcjC,OAAO,CAAC,YAAY;CAerB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"lib-button.component.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,OAAO,KAAK,EAAE,OAAO,EAAsB,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAK3D;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAOpB;IAEF,OAAO,CAAC,SAAS,CAAS;;IAO1B;;KAEC;IAED,OAAO,EAAE,gBAAgB,CAAa;IAEtC;;KAEC;IAED,IAAI,EAAE,OAAO,CAAQ;IAErB;;KAEC;IAED,QAAQ,UAAS;IAEnB;;OAEG;IAED,KAAK,UAAS;IAEd;;KAEC;IAED,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,aAAa,CAGnB;IAEO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC;;KAEC;IAED,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;KAEC;IAED,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpC;;KAEC;IAEQ,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzC;;OAEG;IACM,MAAM,IAAI,cAAc;IAejC,OAAO,CAAC,YAAY;CAerB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/atoms/button/lib-button.html.d.ts

@@ -1,14 +1,16 @@
 import { TemplateResult } from 'lit';
-import { LibSize, LibVariant } from '../../../types';
+import { LibSize } from '../../../types';
+import { LibButtonVariant } from './lib-button.types';
 export interface ButtonTemplateProps {
     buttonId: string;
     type: 'button' | 'submit' | 'reset';
     disabled: boolean;
     ariaLabel?: string | undefined;
     handleClick: (event: Event) => void;
-    variant: LibVariant;
+    variant: LibButtonVariant;
     size: LibSize;
     glass: boolean;
+    spotlight: boolean;
     customPadding?: string | undefined;
 }
 /**

package/dist/components/atoms/button/lib-button.html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-button.html.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,cAAc,CAgBzE"}
+{"version":3,"file":"lib-button.html.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,cAAc,CAiBzE"}

package/dist/components/atoms/button/lib-button.stories.d.ts

@@ -9,6 +9,9 @@ export default meta;
 type Story = StoryObj<LibButtonStoryArgs>;
 export declare const Playground: Story;
 export declare const AllVariants: Story;
+export declare const Kintsugi: Story;
+export declare const Brutal: Story;
+export declare const SpotlightEffect: Story;
 export declare const Sizes: Story;
 export declare const Disabled: Story;
 export declare const GlassEffect: Story;

package/dist/components/atoms/button/lib-button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,KAAK,kBAAkB,GAAG,SAAS,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CAAA;CAAE,CAAC;AAEhF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAmClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC"}
+{"version":3,"file":"lib-button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3C,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,KAAK,kBAAkB,GAAG,SAAS,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,cAAc,CAAA;CAAE,CAAC;AAEhF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAwClC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAoBpB,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAoB7B,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC"}

package/dist/components/atoms/button/lib-button.types.d.ts

@@ -0,0 +1,2 @@
+export type LibButtonVariant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'danger' | 'kintsugi' | 'brutal';
+//# sourceMappingURL=lib-button.types.d.ts.map

package/dist/components/atoms/button/lib-button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib-button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/button/lib-button.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,SAAS,GACT,WAAW,GACX,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,QAAQ,CAAC"}

package/dist/components/atoms/step/lib-step.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
-import { LibStepStatus, LibStepOrientation, LibStepVariant, LibStepSize } from './lib-step.html';
+import { LibStepStatus, LibStepOrientation, LibStepVariant, LibStepSize } from './lib-step.types';
 /**
  * @element lib-step
  *

package/dist/components/atoms/step/lib-step.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-step.component.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAKzB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAGpB;IAEF,2DAA2D;IAE3D,KAAK,SAAM;IAEX,yCAAyC;IAEzC,GAAG,SAAM;IAET;;;OAGG;IAEH,KAAK,SAAK;IAEV;;;;;;;OAOG;IAEH,MAAM,EAAE,aAAa,CAAa;IAElC;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,WAAW,EAAE,kBAAkB,CAAgB;IAE/C;;;;;OAKG;IAEH,OAAO,EAAE,cAAc,CAAa;IAEpC;;;;;OAKG;IAEH,IAAI,EAAE,WAAW,CAAQ;IAEhB,MAAM,IAAI,cAAc;CAUlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"lib-step.component.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,WAAW,EACZ,MAAM,kBAAkB,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAGpB;IAEF,2DAA2D;IAE3D,KAAK,SAAM;IAEX,yCAAyC;IAEzC,GAAG,SAAM;IAET;;;OAGG;IAEH,KAAK,SAAK;IAEV;;;;;;;OAOG;IAEH,MAAM,EAAE,aAAa,CAAa;IAElC;;;OAGG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,WAAW,EAAE,kBAAkB,CAAgB;IAE/C;;;;;OAKG;IAEH,OAAO,EAAE,cAAc,CAAa;IAEpC;;;;;OAKG;IAEH,IAAI,EAAE,WAAW,CAAQ;IAEhB,MAAM,IAAI,cAAc;CAUlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/atoms/step/lib-step.html.d.ts

@@ -1,8 +1,7 @@
 import { TemplateResult } from 'lit';
-export type LibStepStatus = 'pending' | 'active' | 'completed' | 'error';
-export type LibStepOrientation = 'horizontal' | 'vertical';
-export type LibStepVariant = 'default' | 'minimal' | 'kintsugi';
-export type LibStepSize = 'sm' | 'md' | 'lg';
+import { LibStepStatus, LibStepOrientation } from './lib-step.types';
+export type { LibStepStatus, LibStepOrientation } from './lib-step.types';
+export type { LibStepVariant, LibStepSize } from './lib-step.types';
 export interface StepTemplateProps {
     index: number;
     status: LibStepStatus;

package/dist/components/atoms/step/lib-step.html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-step.html.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,MAAM,MAAM,aAAa,GAAQ,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAC9E,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAO,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACpE,MAAM,MAAM,WAAW,GAAU,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAQ,MAAM,CAAC;IACpB,MAAM,EAAO,aAAa,CAAC;IAC3B,KAAK,EAAQ,MAAM,CAAC;IACpB,GAAG,EAAU,MAAM,CAAC;IACpB,IAAI,EAAS,OAAO,CAAC;IACrB,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAwBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,cAAc,CAgCrE"}
+{"version":3,"file":"lib-step.html.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAQ,MAAM,CAAC;IACpB,MAAM,EAAO,aAAa,CAAC;IAC3B,KAAK,EAAQ,MAAM,CAAC;IACpB,GAAG,EAAU,MAAM,CAAC;IACpB,IAAI,EAAS,OAAO,CAAC;IACrB,WAAW,EAAE,kBAAkB,CAAC;CACjC;AAwBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,cAAc,CAgCrE"}

package/dist/components/atoms/step/lib-step.stories.d.ts

@@ -5,12 +5,14 @@ interface StepArgs {
     index: number;
     status: 'pending' | 'active' | 'completed' | 'error';
     orientation: 'horizontal' | 'vertical';
-    variant: 'default' | 'minimal' | 'kintsugi';
+    variant: 'default' | 'minimal' | 'kintsugi' | 'brutal';
     size: 'sm' | 'md' | 'lg';
 }
 declare const meta: Meta<StepArgs>;
 export default meta;
 type Story = StoryObj<StepArgs>;
 export declare const Playground: Story;
+export declare const Kintsugi: Story;
+export declare const Brutal: Story;
 export declare const States: Story;
 //# sourceMappingURL=lib-step.stories.d.ts.map

package/dist/components/atoms/step/lib-step.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lib-step.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAE9B,UAAU,QAAQ;IAChB,KAAK,EAAQ,MAAM,CAAC;IACpB,GAAG,EAAU,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,MAAM,EAAO,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,OAAO,EAAM,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAChD,IAAI,EAAS,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,QAAQ,CA2BxB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAGhC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC"}
+{"version":3,"file":"lib-step.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAE9B,UAAU,QAAQ;IAChB,KAAK,EAAQ,MAAM,CAAC;IACpB,GAAG,EAAU,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,MAAM,EAAO,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;IAC1D,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,OAAO,EAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC3D,IAAI,EAAS,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,QAAQ,CA2BxB,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAGhC,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC"}

package/dist/components/atoms/step/lib-step.types.d.ts

@@ -0,0 +1,5 @@
+export type LibStepStatus = 'pending' | 'active' | 'completed' | 'error';
+export type LibStepOrientation = 'horizontal' | 'vertical';
+export type LibStepVariant = 'default' | 'minimal' | 'kintsugi' | 'brutal';
+export type LibStepSize = 'sm' | 'md' | 'lg';
+//# sourceMappingURL=lib-step.types.d.ts.map

package/dist/components/atoms/step/lib-step.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib-step.types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/step/lib-step.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAQ,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,OAAO,CAAC;AAC9E,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAO,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAU,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/custom-elements.json

@@ -1104,7 +1104,7 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"accent\""
+                "text": "\"primary\" | \"secondary\" | \"ghost\" | \"accent\" | \"danger\" | \"kintsugi\" | \"brutal\""
               },
               "default": "'primary'",
               "attribute": "variant",
@@ -1140,6 +1140,26 @@
               "attribute": "glass",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "spotlight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "spotlight",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseLeave",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -1202,7 +1222,7 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"default\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"accent\""
+                "text": "\"primary\" | \"secondary\" | \"ghost\" | \"accent\" | \"danger\" | \"kintsugi\" | \"brutal\""
               },
               "default": "'primary'",
               "fieldName": "variant"
@@ -1231,6 +1251,14 @@
               "default": "false",
               "fieldName": "glass"
             },
+            {
+              "name": "spotlight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "spotlight"
+            },
             {
               "name": "type",
               "type": {

package/dist/index14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index14.js","sources":["../src/components/atoms/step/lib-step.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n  LibStepStatus,\n  LibStepOrientation,\n  LibStepVariant,\n  LibStepSize,\n} from './lib-step.html';\nimport { stepTemplate } from './lib-step.html';\nimport stepCss from './lib-step.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-step\n *\n * Paso individual del stepper. Diseñado para usarse dentro de `<lib-stepper>`,\n * que inyecta automáticamente `index`, `status`, `last`, `orientation`,\n * `variant` y `size`. El usuario solo necesita declarar `label` y, opcionalmente, `sub`.\n *\n * En modo vertical acepta contenido descriptivo en el slot por defecto.\n *\n * @example — dentro de lib-stepper (uso recomendado)\n * <lib-stepper current=\"2\">\n *   <lib-step label=\"Información\" sub=\"Datos personales\"></lib-step>\n *   <lib-step label=\"Pago\" sub=\"Método de pago\"></lib-step>\n *   <lib-step label=\"Confirmación\"></lib-step>\n * </lib-stepper>\n *\n * @example — vertical con contenido en slot\n * <lib-stepper orientation=\"vertical\">\n *   <lib-step label=\"Crea tu cuenta\">\n *     Registro completado. Tu correo ha sido verificado.\n *   </lib-step>\n * </lib-stepper>\n */\n@customElement('lib-step')\nexport class LibStep extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stepCss)}`,\n  ];\n\n  /** Texto principal del paso (requerido por el usuario). */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario corto (opcional). */\n  @property({ type: String })\n  sub = '';\n\n  /**\n   * Número ordinal del paso.\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Number, reflect: true })\n  index = 1;\n\n  /**\n   * Estado visual del nodo.\n   * Inyectado automáticamente por lib-stepper.\n   * - pending   : por defecto — nodo vacío\n   * - active    : paso en curso — fondo oscuro + halo\n   * - completed : paso superado — checkmark\n   * - error     : fallo — icono de exclamación\n   */\n  @property({ type: String, reflect: true })\n  status: LibStepStatus = 'pending';\n\n  /**\n   * Marca el último paso del stepper (no renderiza conector).\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Boolean, reflect: true })\n  last = false;\n\n  /**\n   * Dirección del flujo. Inyectado por lib-stepper.\n   */\n  @property({ type: String, reflect: true })\n  orientation: LibStepOrientation = 'horizontal';\n\n  /**\n   * Variante visual. Inyectada por lib-stepper.\n   * - default  : nodo circular washi\n   * - minimal  : nodo cuadrado kaki\n   * - kintsugi : venas doradas sobre superficie oscura\n   */\n  @property({ type: String, reflect: true })\n  variant: LibStepVariant = 'default';\n\n  /**\n   * Tamaño del nodo. Inyectado por lib-stepper.\n   * - sm : 24px\n   * - md : 32px (default)\n   * - lg : 40px\n   */\n  @property({ type: String, reflect: true })\n  size: LibStepSize = 'md';\n\n  override render(): TemplateResult {\n    return stepTemplate({\n      index:       this.index,\n      status:      this.status,\n      label:       this.label,\n      sub:         this.sub,\n      last:        this.last,\n      orientation: this.orientation,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-step': LibStep;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoCO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,MAAM;AAON,SAAA,QAAQ;AAWR,SAAA,SAAwB;AAOxB,SAAA,OAAO;AAMP,SAAA,cAAkC;AASlC,SAAA,UAA0B;AAS1B,SAAA,OAAoB;AAAA,EAAA;AAAA,EAEX,SAAyB;AAChC,WAAO,aAAa;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,QAAa,KAAK;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,KAAa,KAAK;AAAA,MAClB,MAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,IAAA,CACnB;AAAA,EACH;AACF;AAzEa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,QAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,QAYX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,QAmBX,WAAA,SAAA,CAAA;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7B9B,QA8BX,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,QAqCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1C9B,QA2CX,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnD9B,QAoDX,WAAA,WAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5D9B,QA6DX,WAAA,QAAA,CAAA;AA7DW,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}
+{"version":3,"file":"index14.js","sources":["../src/components/atoms/step/lib-step.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport type {\n  LibStepStatus,\n  LibStepOrientation,\n  LibStepVariant,\n  LibStepSize,\n} from './lib-step.types';\nimport { stepTemplate } from './lib-step.html';\nimport stepCss from './lib-step.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\n\n/**\n * @element lib-step\n *\n * Paso individual del stepper. Diseñado para usarse dentro de `<lib-stepper>`,\n * que inyecta automáticamente `index`, `status`, `last`, `orientation`,\n * `variant` y `size`. El usuario solo necesita declarar `label` y, opcionalmente, `sub`.\n *\n * En modo vertical acepta contenido descriptivo en el slot por defecto.\n *\n * @example — dentro de lib-stepper (uso recomendado)\n * <lib-stepper current=\"2\">\n *   <lib-step label=\"Información\" sub=\"Datos personales\"></lib-step>\n *   <lib-step label=\"Pago\" sub=\"Método de pago\"></lib-step>\n *   <lib-step label=\"Confirmación\"></lib-step>\n * </lib-stepper>\n *\n * @example — vertical con contenido en slot\n * <lib-stepper orientation=\"vertical\">\n *   <lib-step label=\"Crea tu cuenta\">\n *     Registro completado. Tu correo ha sido verificado.\n *   </lib-step>\n * </lib-stepper>\n */\n@customElement('lib-step')\nexport class LibStep extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(stepCss)}`,\n  ];\n\n  /** Texto principal del paso (requerido por el usuario). */\n  @property({ type: String })\n  label = '';\n\n  /** Texto secundario corto (opcional). */\n  @property({ type: String })\n  sub = '';\n\n  /**\n   * Número ordinal del paso.\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Number, reflect: true })\n  index = 1;\n\n  /**\n   * Estado visual del nodo.\n   * Inyectado automáticamente por lib-stepper.\n   * - pending   : por defecto — nodo vacío\n   * - active    : paso en curso — fondo oscuro + halo\n   * - completed : paso superado — checkmark\n   * - error     : fallo — icono de exclamación\n   */\n  @property({ type: String, reflect: true })\n  status: LibStepStatus = 'pending';\n\n  /**\n   * Marca el último paso del stepper (no renderiza conector).\n   * Inyectado automáticamente por lib-stepper.\n   */\n  @property({ type: Boolean, reflect: true })\n  last = false;\n\n  /**\n   * Dirección del flujo. Inyectado por lib-stepper.\n   */\n  @property({ type: String, reflect: true })\n  orientation: LibStepOrientation = 'horizontal';\n\n  /**\n   * Variante visual. Inyectada por lib-stepper.\n   * - default  : nodo circular washi\n   * - minimal  : nodo cuadrado kaki\n   * - kintsugi : venas doradas sobre superficie oscura\n   */\n  @property({ type: String, reflect: true })\n  variant: LibStepVariant = 'default';\n\n  /**\n   * Tamaño del nodo. Inyectado por lib-stepper.\n   * - sm : 24px\n   * - md : 32px (default)\n   * - lg : 40px\n   */\n  @property({ type: String, reflect: true })\n  size: LibStepSize = 'md';\n\n  override render(): TemplateResult {\n    return stepTemplate({\n      index:       this.index,\n      status:      this.status,\n      label:       this.label,\n      sub:         this.sub,\n      last:        this.last,\n      orientation: this.orientation,\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-step': LibStep;\n  }\n}"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoCO,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAAQ;AAIR,SAAA,MAAM;AAON,SAAA,QAAQ;AAWR,SAAA,SAAwB;AAOxB,SAAA,OAAO;AAMP,SAAA,cAAkC;AASlC,SAAA,UAA0B;AAS1B,SAAA,OAAoB;AAAA,EAAA;AAAA,EAEX,SAAyB;AAChC,WAAO,aAAa;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,QAAa,KAAK;AAAA,MAClB,OAAa,KAAK;AAAA,MAClB,KAAa,KAAK;AAAA,MAClB,MAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,IAAA,CACnB;AAAA,EACH;AACF;AAzEa,QACK,SAAS;AAAA,EACvB,MAAM,UAAU,YAAY,CAAC;AAAA,EAC7B,MAAM,UAAU,OAAO,CAAC;AAC1B;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,QAQX,WAAA,SAAA,CAAA;AAIA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAXf,QAYX,WAAA,OAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlB9B,QAmBX,WAAA,SAAA,CAAA;AAWA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA7B9B,QA8BX,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GApC/B,QAqCX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1C9B,QA2CX,WAAA,eAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAnD9B,QAoDX,WAAA,WAAA,CAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA5D9B,QA6DX,WAAA,QAAA,CAAA;AA7DW,UAAN,gBAAA;AAAA,EADN,cAAc,UAAU;AAAA,GACZ,OAAA;"}

package/dist/index210.js

@@ -1,4 +1,4 @@
-const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.pb-wrap{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.pb-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-sm)}.pb-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-snug)}.pb-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0}.pb-sub{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([tone="error"]) .pb-label{color:var(--color-error)}:host([tone="error"]) .pb-value{color:var(--color-error)}:host([tone="error"]) .pb-sub{color:var(--color-error)}:host([tone="celadon"]) .pb-value{color:var(--color-celadon-600)}.pb{width:100%;background:var(--color-washi-200);border-radius:var(--radius-full);overflow:hidden;position:relative}:host([size="xs"]) .pb{height:2px}:host([size="sm"]) .pb{height:4px}:host([size="md"]) .pb,.pb{height:8px}:host([size="lg"]) .pb{height:12px}:host([size="xl"]) .pb{height:20px}:host([tone="kaki"]) .pb{background:var(--color-kaki-100)}:host([tone="celadon"]) .pb{background:var(--color-celadon-100)}:host([tone="error"]) .pb{background:var(--color-error-light, #F5DDD9)}:host([square]) .pb,:host([square]) .pb-fill{border-radius:var(--radius-sm)}.pb-fill{height:100%;border-radius:var(--radius-full);background:var(--color-washi-900);transition:width .6s var(--ease-default);position:relative;overflow:hidden}:host([square]) .pb-fill{border-radius:var(--radius-sm)}:host([tone="kaki"]) .pb-fill{background:var(--color-kaki-500)}:host([tone="celadon"]) .pb-fill{background:var(--color-celadon-500)}:host([tone="error"]) .pb-fill{background:var(--color-error)}:host([striped]) .pb-fill{background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgb(255,255,255,.18) 6px,rgb(255,255,255,.18) 12px)}.pb-inner-value{display:flex;align-items:center;height:100%;padding-left:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);color:#ffffffb3;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes pb-slide{0%{left:-40%;width:40%}50%{left:30%;width:60%}to{left:110%;width:40%}}:host([indeterminate]) .pb-fill{width:100%!important;background:transparent}:host([indeterminate]) .pb-fill:after{content:"";position:absolute;top:0;bottom:0;width:40%;background:var(--color-washi-900);border-radius:var(--radius-full);animation:pb-slide 1.6s cubic-bezier(.4,0,.6,1) infinite}:host([indeterminate][tone="kaki"]) .pb-fill:after{background:var(--color-kaki-500)}:host([indeterminate][tone="celadon"]) .pb-fill:after{background:var(--color-celadon-500)}:host([indeterminate][tone="error"]) .pb-fill:after{background:var(--color-error)}:host([indeterminate][square]) .pb-fill:after{border-radius:var(--radius-sm)}.pb-multi{display:flex;width:100%;border-radius:var(--radius-full);overflow:hidden;gap:2px;background:transparent}:host([size="xs"]) .pb-multi{height:2px}:host([size="sm"]) .pb-multi{height:4px}:host([size="md"]) .pb-multi,.pb-multi{height:8px}:host([size="lg"]) .pb-multi{height:12px}:host([size="xl"]) .pb-multi{height:20px}:host([square]) .pb-multi{border-radius:var(--radius-sm)}.pb-segment{height:100%;transition:width .6s var(--ease-default);flex-shrink:0}.pb-segment:first-child{border-radius:var(--radius-full) 0 0 var(--radius-full)}.pb-segment:last-child{border-radius:0 var(--radius-full) var(--radius-full) 0}.pb-segment:only-child{border-radius:var(--radius-full)}:host([square]) .pb-segment:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}:host([square]) .pb-segment:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}:host([square]) .pb-segment:only-child{border-radius:var(--radius-sm)}.seg-default{background:var(--color-washi-900)}.seg-kaki{background:var(--color-kaki-500)}.seg-celadon{background:var(--color-celadon-500)}.seg-error{background:var(--color-error)}.seg-muted{background:var(--color-washi-300);flex:1}.pb-legend{display:flex;gap:var(--lib-space-md);flex-wrap:wrap;margin-top:var(--lib-space-sm)}.pb-legend-item{display:flex;align-items:center;gap:var(--lib-space-xs)}.pb-legend-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.pb-legend-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}}';
+const progressCss = '@layer tokens,reset,components;@layer reset{:host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}}@layer components{.pb-wrap{display:flex;flex-direction:column;gap:var(--lib-space-xs);width:100%}.pb-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--lib-space-sm)}.pb-label{font-family:var(--lib-font-body);font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-snug)}.pb-value{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);flex-shrink:0}.pb-sub{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wider);color:var(--text-muted);text-transform:uppercase}:host([tone="error"]) .pb-label{color:var(--color-error)}:host([tone="error"]) .pb-value{color:var(--color-error)}:host([tone="error"]) .pb-sub{color:var(--color-error)}:host([tone="celadon"]) .pb-value{color:var(--color-celadon-600)}.pb{width:100%;background:var(--color-washi-200);border-radius:var(--radius-full);overflow:hidden;position:relative}:host([size="xs"]) .pb{height:2px}:host([size="sm"]) .pb{height:4px}:host([size="md"]) .pb,.pb{height:8px}:host([size="lg"]) .pb{height:12px}:host([size="xl"]) .pb{height:20px}:host([tone="kaki"]) .pb{background:var(--color-kaki-100)}:host([tone="celadon"]) .pb{background:var(--color-celadon-100)}:host([tone="error"]) .pb{background:var(--color-error-light, #F5DDD9)}:host([square]) .pb,:host([square]) .pb-fill{border-radius:var(--radius-sm)}.pb-fill{height:100%;border-radius:var(--radius-full);background:var(--color-washi-900);transition:width .6s var(--ease-default);position:relative;overflow:hidden}:host([square]) .pb-fill{border-radius:var(--radius-sm)}:host([tone="kaki"]) .pb-fill{background:var(--color-kaki-500)}:host([tone="celadon"]) .pb-fill{background:var(--color-celadon-500)}:host([tone="error"]) .pb-fill{background:var(--color-error)}:host([striped]) .pb-fill{background-image:repeating-linear-gradient(-45deg,transparent,transparent 6px,rgb(255,255,255,.18) 6px,rgb(255,255,255,.18) 12px)}.pb-inner-value{display:flex;align-items:center;height:100%;padding-left:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:9px;letter-spacing:var(--tracking-wider);color:#ffffffb3;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none}@keyframes pb-slide{0%{left:-40%;width:40%}50%{left:30%;width:60%}to{left:110%;width:40%}}:host([indeterminate]) .pb-fill{width:100%!important;background:transparent}:host([indeterminate]) .pb-fill:after{content:"";position:absolute;top:0;bottom:0;width:40%;background:var(--color-washi-900);border-radius:var(--radius-full);animation:pb-slide 1.6s cubic-bezier(.4,0,.6,1) infinite}:host([indeterminate][tone="kaki"]) .pb-fill:after{background:var(--color-kaki-500)}:host([indeterminate][tone="celadon"]) .pb-fill:after{background:var(--color-celadon-500)}:host([indeterminate][tone="error"]) .pb-fill:after{background:var(--color-error)}:host([indeterminate][square]) .pb-fill:after{border-radius:var(--radius-sm)}.pb-multi{display:flex;width:100%;border-radius:var(--radius-full);overflow:hidden;gap:2px;background:transparent}:host([size="xs"]) .pb-multi{height:2px}:host([size="sm"]) .pb-multi{height:4px}:host([size="md"]) .pb-multi,.pb-multi{height:8px}:host([size="lg"]) .pb-multi{height:12px}:host([size="xl"]) .pb-multi{height:20px}:host([square]) .pb-multi{border-radius:var(--radius-sm)}.pb-segment{height:100%;transition:width .6s var(--ease-default);flex-shrink:0}.pb-segment:first-child{border-radius:var(--radius-full) 0 0 var(--radius-full)}.pb-segment:last-child{border-radius:0 var(--radius-full) var(--radius-full) 0}.pb-segment:only-child{border-radius:var(--radius-full)}:host([square]) .pb-segment:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}:host([square]) .pb-segment:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}:host([square]) .pb-segment:only-child{border-radius:var(--radius-sm)}.seg-default{background:var(--color-washi-900)}.seg-kaki{background:var(--color-kaki-500)}.seg-celadon{background:var(--color-celadon-500)}.seg-error{background:var(--color-error)}.seg-muted{background:var(--color-washi-300);flex:1}.pb-legend{display:flex;gap:var(--lib-space-md);flex-wrap:wrap;margin-top:var(--lib-space-sm)}.pb-legend-item{display:flex;align-items:center;gap:var(--lib-space-xs)}.pb-legend-dot{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}.pb-legend-text{font-family:var(--lib-font-mono);font-size:10px;letter-spacing:var(--tracking-wide);color:var(--text-muted)}@media(prefers-reduced-motion:reduce){.pb-fill,.pb-segment{transition:none}:host([indeterminate]) .pb-fill:after{animation:none}}}';
 export {
   progressCss as default
 };

package/dist/index216.js.map

@@ -1 +1 @@
-{"version":3,"file":"index216.js","sources":["../src/components/atoms/step/lib-step.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\n\nexport type LibStepStatus      = 'pending' | 'active' | 'completed' | 'error';\nexport type LibStepOrientation = 'horizontal' | 'vertical';\nexport type LibStepVariant     = 'default' | 'minimal' | 'kintsugi';\nexport type LibStepSize        = 'sm' | 'md' | 'lg';\n\nexport interface StepTemplateProps {\n  index:       number;\n  status:      LibStepStatus;\n  label:       string;\n  sub:         string;\n  last:        boolean;\n  orientation: LibStepOrientation;\n}\n\n/* ── SVG icons ─────────────────────────────────────────────── */\nconst iconCheck = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>\n`;\n\nconst iconError = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 14 14\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n       aria-hidden=\"true\">\n    <line x1=\"7\" y1=\"3\" x2=\"7\" y2=\"7.5\"/>\n    <circle cx=\"7\" cy=\"10\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/>\n  </svg>\n`;\n\nfunction nodeContent(props: StepTemplateProps): TemplateResult {\n  if (props.status === 'completed') return iconCheck;\n  if (props.status === 'error')     return iconError;\n  return html`${props.index}`;\n}\n\n/**\n * Template para lib-step.\n *\n * Estructura (orientación horizontal):\n *   .step-node     — círculo/cuadrado con número o icono\n *   .step-connector— línea que conecta con el siguiente paso (oculta en [last])\n *   .step-text     — label + sub\n *\n * Estructura (orientación vertical):\n *   .step-node\n *   .step-connector (vertical)\n *   .step-body\n *     .step-title\n *     .step-content  ← <slot> para contenido descriptivo\n */\nexport function stepTemplate(props: StepTemplateProps): TemplateResult {\n  const isVertical = props.orientation === 'vertical';\n\n  return html`\n    <div\n      class=\"step-inner\"\n      role=\"listitem\"\n      aria-current=${props.status === 'active' ? 'step' : nothing}\n    >\n      <div class=\"step-node\" aria-hidden=\"true\">\n        ${nodeContent(props)}\n      </div>\n\n      ${!props.last ? html`<div class=\"step-connector\" aria-hidden=\"true\"></div>` : nothing}\n\n      ${isVertical\n        ? html`\n          <div class=\"step-body\">\n            <p class=\"step-title\">${props.label}</p>\n            ${props.sub ? html`<p class=\"step-sub\">${props.sub}</p>` : nothing}\n            <div class=\"step-content\"><slot></slot></div>\n          </div>\n        `\n        : html`\n          <div class=\"step-text\">\n            <span class=\"step-label\">${props.label}</span>\n            ${props.sub ? html`<span class=\"step-sub\">${props.sub}</span>` : nothing}\n          </div>\n        `\n      }\n    </div>\n  `;\n}"],"names":[],"mappings":";AAiBA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,SAAS,YAAY,OAA0C;AAC7D,MAAI,MAAM,WAAW,YAAa,QAAO;AACzC,MAAI,MAAM,WAAW,QAAa,QAAO;AACzC,SAAO,OAAO,MAAM,KAAK;AAC3B;AAiBO,SAAS,aAAa,OAA0C;AACrE,QAAM,aAAa,MAAM,gBAAgB;AAEzC,SAAO;AAAA;AAAA;AAAA;AAAA,qBAIY,MAAM,WAAW,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA,UAGvD,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,QAGpB,CAAC,MAAM,OAAO,8DAA8D,OAAO;AAAA;AAAA,QAEnF,aACE;AAAA;AAAA,oCAE0B,MAAM,KAAK;AAAA,cACjC,MAAM,MAAM,2BAA2B,MAAM,GAAG,SAAS,OAAO;AAAA;AAAA;AAAA,YAIpE;AAAA;AAAA,uCAE6B,MAAM,KAAK;AAAA,cACpC,MAAM,MAAM,8BAA8B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,SAG9E;AAAA;AAAA;AAGN;"}
+{"version":3,"file":"index216.js","sources":["../src/components/atoms/step/lib-step.html.ts"],"sourcesContent":["import { html, nothing, svg, TemplateResult } from 'lit';\nimport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\n\nexport type { LibStepStatus, LibStepOrientation } from './lib-step.types';\nexport type { LibStepVariant, LibStepSize } from './lib-step.types';\n\nexport interface StepTemplateProps {\n  index:       number;\n  status:      LibStepStatus;\n  label:       string;\n  sub:         string;\n  last:        boolean;\n  orientation: LibStepOrientation;\n}\n\n/* ── SVG icons ─────────────────────────────────────────────── */\nconst iconCheck = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n    <polyline points=\"2,6 5,9 10,3\"/>\n  </svg>\n`;\n\nconst iconError = svg`\n  <svg class=\"step-icon\" viewBox=\"0 0 14 14\" fill=\"none\"\n       stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n       aria-hidden=\"true\">\n    <line x1=\"7\" y1=\"3\" x2=\"7\" y2=\"7.5\"/>\n    <circle cx=\"7\" cy=\"10\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/>\n  </svg>\n`;\n\nfunction nodeContent(props: StepTemplateProps): TemplateResult {\n  if (props.status === 'completed') return iconCheck;\n  if (props.status === 'error')     return iconError;\n  return html`${props.index}`;\n}\n\n/**\n * Template para lib-step.\n *\n * Estructura (orientación horizontal):\n *   .step-node     — círculo/cuadrado con número o icono\n *   .step-connector— línea que conecta con el siguiente paso (oculta en [last])\n *   .step-text     — label + sub\n *\n * Estructura (orientación vertical):\n *   .step-node\n *   .step-connector (vertical)\n *   .step-body\n *     .step-title\n *     .step-content  ← <slot> para contenido descriptivo\n */\nexport function stepTemplate(props: StepTemplateProps): TemplateResult {\n  const isVertical = props.orientation === 'vertical';\n\n  return html`\n    <div\n      class=\"step-inner\"\n      role=\"listitem\"\n      aria-current=${props.status === 'active' ? 'step' : nothing}\n    >\n      <div class=\"step-node\" aria-hidden=\"true\">\n        ${nodeContent(props)}\n      </div>\n\n      ${!props.last ? html`<div class=\"step-connector\" aria-hidden=\"true\"></div>` : nothing}\n\n      ${isVertical\n        ? html`\n          <div class=\"step-body\">\n            <p class=\"step-title\">${props.label}</p>\n            ${props.sub ? html`<p class=\"step-sub\">${props.sub}</p>` : nothing}\n            <div class=\"step-content\"><slot></slot></div>\n          </div>\n        `\n        : html`\n          <div class=\"step-text\">\n            <span class=\"step-label\">${props.label}</span>\n            ${props.sub ? html`<span class=\"step-sub\">${props.sub}</span>` : nothing}\n          </div>\n        `\n      }\n    </div>\n  `;\n}"],"names":[],"mappings":";AAgBA,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,SAAS,YAAY,OAA0C;AAC7D,MAAI,MAAM,WAAW,YAAa,QAAO;AACzC,MAAI,MAAM,WAAW,QAAa,QAAO;AACzC,SAAO,OAAO,MAAM,KAAK;AAC3B;AAiBO,SAAS,aAAa,OAA0C;AACrE,QAAM,aAAa,MAAM,gBAAgB;AAEzC,SAAO;AAAA;AAAA;AAAA;AAAA,qBAIY,MAAM,WAAW,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA,UAGvD,YAAY,KAAK,CAAC;AAAA;AAAA;AAAA,QAGpB,CAAC,MAAM,OAAO,8DAA8D,OAAO;AAAA;AAAA,QAEnF,aACE;AAAA;AAAA,oCAE0B,MAAM,KAAK;AAAA,cACjC,MAAM,MAAM,2BAA2B,MAAM,GAAG,SAAS,OAAO;AAAA;AAAA;AAAA,YAIpE;AAAA;AAAA,uCAE6B,MAAM,KAAK;AAAA,cACpC,MAAM,MAAM,8BAA8B,MAAM,GAAG,YAAY,OAAO;AAAA;AAAA,SAG9E;AAAA;AAAA;AAGN;"}

package/dist/index217.js

@@ -1,4 +1,4 @@
-const stepCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;flex:1;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.step-inner{display:flex;flex-direction:column;align-items:center;position:relative}.step-node{width:32px;height:32px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);position:relative;z-index:1;flex-shrink:0;transition:background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}.step-icon{width:12px;height:12px;stroke:currentcolor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}.step-text{margin-top:var(--lib-space-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--lib-space-xs)}.step-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-base) var(--ease-default)}.step-sub{font-family:var(--lib-font-body);font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-snug)}.step-connector{position:absolute;top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:1px;background:var(--border-default);transition:background var(--duration-slow) var(--ease-out);pointer-events:none}:host([status="active"]) .step-node{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:0 0 0 4px var(--color-washi-100)}:host([status="active"]) .step-label{color:var(--text-primary)}:host([status="completed"]) .step-node{background:var(--color-washi-700);border-color:var(--color-washi-700);color:var(--color-washi-50)}:host([status="completed"]) .step-label{color:var(--text-secondary)}:host([status="completed"]) .step-connector{background:var(--color-washi-700)}:host([status="error"]) .step-node{background:#fff8f7;border-color:var(--color-error);color:var(--color-error)}:host([status="error"]) .step-label{color:var(--color-error)}:host([size="sm"]) .step-node{width:24px;height:24px;font-size:9px}:host([size="sm"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([size="sm"]) .step-label{font-size:9px}:host([size="lg"]) .step-node{width:40px;height:40px;font-size:var(--text-sm)}:host([size="lg"]) .step-connector{top:19px;left:calc(50% + 20px);width:calc(100% - 40px)}:host([variant="minimal"]) .step-node{width:24px;height:24px;border-radius:var(--radius-none);background:transparent;font-size:9px}:host([variant="minimal"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([variant="minimal"][status="active"]) .step-node{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:var(--color-white);box-shadow:none}:host([variant="minimal"][status="active"]) .step-label{color:var(--color-kaki-500)}:host([variant="minimal"][status="completed"]) .step-node{background:transparent;border-color:var(--color-washi-700);color:var(--color-washi-700)}:host([variant="kintsugi"][status="completed"]) .step-node{background:#190f0a;border:none;color:#decbb1}:host([variant="kintsugi"][status="completed"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}:host([variant="kintsugi"][status="active"]) .step-node{background:#100704;border:none;color:#e3d5c2;box-shadow:0 0 0 4px #6d4d3e1a}:host([variant="kintsugi"][status="active"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1.5px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:kintsugi-pulse 2.5s ease-in-out infinite}@keyframes kintsugi-pulse{0%,to{opacity:.7}50%{opacity:1}}:host([variant="kintsugi"][status="completed"]) .step-connector{background:linear-gradient(90deg,#66503f80,#866c534d)}:host([variant="kintsugi"]) .step-label{color:#484848}:host([variant="kintsugi"][status="active"]) .step-label{color:#dedede}:host([variant="kintsugi"][status="completed"]) .step-label{color:gray}:host([variant="kintsugi"]) .step-node{background:#090504;border-color:#26201e;color:#484848}:host([variant="kintsugi"]) .step-connector{background:#1f1917}:host([orientation="vertical"]){flex:none}:host([orientation="vertical"]) .step-inner{flex-direction:row;align-items:flex-start;gap:var(--lib-space-lg)}:host([orientation="vertical"]) .step-connector{position:absolute;left:15px;top:32px;bottom:0;width:1px;height:auto}:host([orientation="vertical"][size="sm"]) .step-connector{left:11px;top:24px}:host([orientation="vertical"][size="lg"]) .step-connector{left:19px;top:40px}.step-body{padding-bottom:var(--lib-space-xl);flex:1}.step-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);line-height:32px;transition:color var(--duration-base) var(--ease-default)}:host([orientation="vertical"][status="active"]) .step-title{color:var(--text-primary)}:host([orientation="vertical"][status="completed"]) .step-title{color:var(--text-secondary)}:host([orientation="vertical"][status="error"]) .step-title{color:var(--color-error)}.step-content{margin-top:var(--lib-space-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:420px}@media(prefers-reduced-motion:reduce){.step-node,.step-connector,.step-label{transition:none}:host([variant="kintsugi"][status="active"]) .step-node:after{animation:none}}}';
+const stepCss = '@layer tokens,reset,components;@layer reset{:host{display:block;position:relative;flex:1;flex-shrink:0}*,*:before,*:after{box-sizing:border-box}}@layer components{.step-inner{display:flex;flex-direction:column;align-items:center;position:relative}.step-node{width:32px;height:32px;border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--bg-elevated);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-family:var(--lib-font-mono);font-size:var(--text-xs);position:relative;z-index:1;flex-shrink:0;transition:background var(--duration-slow) var(--ease-out),border-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out),box-shadow var(--duration-slow) var(--ease-out)}.step-icon{width:12px;height:12px;stroke:currentcolor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}.step-text{margin-top:var(--lib-space-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--lib-space-xs)}.step-label{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);color:var(--text-muted);text-transform:uppercase;transition:color var(--duration-base) var(--ease-default)}.step-sub{font-family:var(--lib-font-body);font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-snug)}.step-connector{position:absolute;top:15px;left:calc(50% + 16px);width:calc(100% - 32px);height:1px;background:var(--border-default);transition:background var(--duration-slow) var(--ease-out);pointer-events:none}:host([status="active"]) .step-node{background:var(--color-washi-900);border-color:var(--color-washi-900);color:var(--color-washi-50);box-shadow:0 0 0 4px var(--color-washi-100)}:host([status="active"]) .step-label{color:var(--text-primary)}:host([status="completed"]) .step-node{background:var(--color-washi-700);border-color:var(--color-washi-700);color:var(--color-washi-50)}:host([status="completed"]) .step-label{color:var(--text-secondary)}:host([status="completed"]) .step-connector{background:var(--color-washi-700)}:host([status="error"]) .step-node{background:var(--color-error-subtle);border-color:var(--color-error);color:var(--color-error)}:host([status="error"]) .step-label{color:var(--color-error)}:host([size="sm"]) .step-node{width:24px;height:24px;font-size:9px}:host([size="sm"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([size="sm"]) .step-label{font-size:9px}:host([size="lg"]) .step-node{width:40px;height:40px;font-size:var(--text-sm)}:host([size="lg"]) .step-connector{top:19px;left:calc(50% + 20px);width:calc(100% - 40px)}:host([variant="minimal"]) .step-node{width:24px;height:24px;border-radius:var(--radius-none);background:transparent;font-size:9px}:host([variant="minimal"]) .step-connector{top:11px;left:calc(50% + 12px);width:calc(100% - 24px)}:host([variant="minimal"][status="active"]) .step-node{background:var(--color-kaki-500);border-color:var(--color-kaki-500);color:var(--color-white);box-shadow:none}:host([variant="minimal"][status="active"]) .step-label{color:var(--color-kaki-500)}:host([variant="minimal"][status="completed"]) .step-node{background:transparent;border-color:var(--color-washi-700);color:var(--color-washi-700)}:host([variant="kintsugi"][status="completed"]) .step-node{background:var(--color-washi-900);border:none;color:var(--color-washi-200)}:host([variant="kintsugi"][status="completed"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}:host([variant="kintsugi"][status="active"]) .step-node{background:var(--color-washi-950);border:none;color:var(--color-washi-200);box-shadow:0 0 0 4px #6d4d3e1a}:host([variant="kintsugi"][status="active"]) .step-node:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1.5px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:kintsugi-pulse 2.5s ease-in-out infinite}@keyframes kintsugi-pulse{0%,to{opacity:.7}50%{opacity:1}}:host([variant="kintsugi"][status="completed"]) .step-connector{background:linear-gradient(90deg,#66503f80,#866c534d)}:host([variant="kintsugi"]) .step-label{color:var(--color-washi-700)}:host([variant="kintsugi"][status="active"]) .step-label{color:var(--color-washi-100)}:host([variant="kintsugi"][status="completed"]) .step-label{color:var(--color-washi-500)}:host([variant="kintsugi"]) .step-node{background:var(--color-washi-950);border-color:var(--color-washi-800);color:var(--color-washi-700)}:host([variant="kintsugi"]) .step-connector{background:var(--color-washi-800)}:host([orientation="vertical"]){flex:none}:host([orientation="vertical"]) .step-inner{flex-direction:row;align-items:flex-start;gap:var(--lib-space-lg)}:host([orientation="vertical"]) .step-connector{position:absolute;left:15px;top:32px;bottom:0;width:1px;height:auto}:host([orientation="vertical"][size="sm"]) .step-connector{left:11px;top:24px}:host([orientation="vertical"][size="lg"]) .step-connector{left:19px;top:40px}.step-body{padding-bottom:var(--lib-space-xl);flex:1}.step-title{font-family:var(--lib-font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);line-height:32px;transition:color var(--duration-base) var(--ease-default)}:host([orientation="vertical"][status="active"]) .step-title{color:var(--text-primary)}:host([orientation="vertical"][status="completed"]) .step-title{color:var(--text-secondary)}:host([orientation="vertical"][status="error"]) .step-title{color:var(--color-error)}.step-content{margin-top:var(--lib-space-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);max-width:420px}:host([variant="brutal"]) .step-node{border-radius:0;background:var(--color-washi-50);border:2px solid var(--color-ink-100);color:var(--color-ink-100);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="active"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:var(--lib-shadow-brutal)}:host([variant="brutal"][status="completed"]) .step-node{background:var(--color-ink-100);border-color:var(--color-ink-100);color:var(--color-washi-50);box-shadow:2px 2px 0 0 var(--lib-shibui-ink)}:host([variant="brutal"][status="error"]) .step-node{background:var(--color-washi-50);border-color:var(--color-error);color:var(--color-error);box-shadow:4px 4px 0 0 var(--color-error)}:host([variant="brutal"]) .step-connector{background:var(--color-ink-100);height:2px}:host([variant="brutal"][status="completed"]) .step-connector{background:var(--color-ink-100)}:host([variant="brutal"]) .step-label{color:var(--color-ink-100);letter-spacing:var(--tracking-widest)}:host([variant="brutal"][status="active"]) .step-label{color:var(--color-ink-100);font-weight:var(--weight-semibold)}:host([variant="brutal"][status="completed"]) .step-label{color:var(--text-secondary)}:host([variant="brutal"][status="error"]) .step-label{color:var(--color-error)}@media(prefers-reduced-motion:reduce){.step-node,.step-connector,.step-label{transition:none}:host([variant="kintsugi"][status="active"]) .step-node:after{animation:none}}}';
 export {
   stepCss as default
 };

package/dist/index23.js

@@ -21,11 +21,37 @@ let LibButton = class extends LitElement {
     this.size = "md";
     this.disabled = false;
     this.glass = false;
+    this.spotlight = false;
+    this._onMouseMove = (e) => {
+      var _a;
+      if (!this.spotlight) return;
+      const btn = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".btn");
+      if (!btn) return;
+      const rect = btn.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width * 100;
+      const y = (e.clientY - rect.top) / rect.height * 100;
+      this.style.setProperty("--lib-spotlight-x", `${x}%`);
+      this.style.setProperty("--lib-spotlight-y", `${y}%`);
+    };
+    this._onMouseLeave = () => {
+      this.style.setProperty("--lib-spotlight-x", "50%");
+      this.style.setProperty("--lib-spotlight-y", "50%");
+    };
     this.type = "button";
     this.customPadding = null;
     this.ariaLabel = null;
     this._buttonId = generateUniqueId("lib-button-");
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mousemove", this._onMouseMove);
+    this.addEventListener("mouseleave", this._onMouseLeave);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("mousemove", this._onMouseMove);
+    this.removeEventListener("mouseleave", this._onMouseLeave);
+  }
   /**
    * Implementación del renderizado siguiendo la regla de tipado explícito.
    */
@@ -39,6 +65,7 @@ let LibButton = class extends LitElement {
       variant: this.variant,
       size: this.size,
       glass: this.glass,
+      spotlight: this.spotlight,
       customPadding: this.customPadding ?? void 0
     });
   }
@@ -77,6 +104,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], LibButton.prototype, "glass", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButton.prototype, "spotlight", 2);
 __decorateClass([
   property({ type: String })
 ], LibButton.prototype, "type", 2);

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/atoms/button/lib-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSize, LibVariant, UiClickEventDetail } from '../../../types';\nimport buttonCss from './lib-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { buttonTemplate } from './lib-button.html';\n\n/**\n * @tag lib-button\n * @element lib-button\n * @fires ui-lib-click - Evento personalizado disparado al hacer clic.\n * @event lib-click\n * @csspart button - El elemento <button> nativo.\n */\n@customElement('lib-button')\nexport class LibButton extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(buttonCss)}\n    `\n  ];\n\n  private _buttonId: string;\n\n  constructor() {\n    super();\n    this._buttonId = generateUniqueId('lib-button-');\n  }\n\n  /**\n * @type {\"default\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"accent\"}\n */\n  @property({ type: String, reflect: true })\n  variant: LibVariant = 'primary';\n\n  /**\n * @type {\"sm\" | \"md\" | \"lg\" | \"xl\"}\n */\n  @property({ type: String, reflect: true })\n  size: LibSize = 'md';\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n/**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  glass = false;\n\n  /**\n * @type {'button' | 'submit' | 'reset'}\n */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'custom-padding' })\n  customPadding: string | null = null;\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Implementación del renderizado siguiendo la regla de tipado explícito.\n   */\n  override render(): TemplateResult {\n    return buttonTemplate({\n      buttonId: this._buttonId,\n      type: this.type,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? undefined,\n      handleClick: this._handleClick.bind(this),\n      variant: this.variant,\n      size: this.size,\n      glass:this.glass,\n      customPadding: this.customPadding ?? undefined,\n    });\n  }\n\n  private _handleClick(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<UiClickEventDetail>('ui-lib-click', {\n        detail: { originalEvent: event, timestamp: Date.now() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button': LibButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAYxC,cAAc;AACZ,UAAA;AAQF,SAAA,UAAsB;AAMtB,SAAA,OAAgB;AAMhB,SAAA,WAAW;AAMX,SAAA,QAAQ;AAMR,SAAA,OAAsC;AAMtC,SAAA,gBAA+B;AAM/B,SAAS,YAA2B;AA3ClC,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA,EA+CS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,WAAW,KAAK,aAAa;AAAA,MAC7B,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,MACxC,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAM,KAAK;AAAA,MACX,eAAe,KAAK,iBAAiB;AAAA,IAAA,CACtC;AAAA,EACH;AAAA,EAEQ,aAAa,OAAoB;AACvC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAgC,gBAAgB;AAAA,QAClD,QAAQ,EAAE,eAAe,OAAO,WAAW,KAAK,MAAI;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA3Fa,UACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,SAAS,CAAC;AAAA;AAE1B;AAaA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAhC/B,UAiCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtC/B,UAuCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Cf,UA6CX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GAlD5C,UAmDX,WAAA,iBAAA,CAAA;AAMS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAxDxC,UAyDF,WAAA,aAAA,CAAA;AAzDE,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}
+{"version":3,"file":"index23.js","sources":["../src/components/atoms/button/lib-button.component.ts"],"sourcesContent":["import { LitElement, css, unsafeCSS, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { generateUniqueId } from '../../../core/a11y';\nimport type { LibSize, UiClickEventDetail } from '../../../types';\nimport type { LibButtonVariant } from './lib-button.types';\nimport buttonCss from './lib-button.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport { buttonTemplate } from './lib-button.html';\n\n/**\n * @tag lib-button\n * @element lib-button\n * @fires ui-lib-click - Evento personalizado disparado al hacer clic.\n * @event lib-click\n * @csspart button - El elemento <button> nativo.\n */\n@customElement('lib-button')\nexport class LibButton extends LitElement {\n  static override styles = [\n    css`\n      ${unsafeCSS(sharedTokens)}\n    `,\n    css`\n      ${unsafeCSS(buttonCss)}\n    `\n  ];\n\n  private _buttonId: string;\n\n  constructor() {\n    super();\n    this._buttonId = generateUniqueId('lib-button-');\n  }\n\n  /**\n * @type {\"primary\" | \"secondary\" | \"ghost\" | \"accent\" | \"danger\" | \"kintsugi\" | \"brutal\"}\n */\n  @property({ type: String, reflect: true })\n  variant: LibButtonVariant = 'primary';\n\n  /**\n * @type {\"sm\" | \"md\" | \"lg\" | \"xl\"}\n */\n  @property({ type: String, reflect: true })\n  size: LibSize = 'md';\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n/**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  glass = false;\n\n  /**\n * @type {boolean}\n */\n  @property({ type: Boolean, reflect: true })\n  spotlight = false;\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this.spotlight) return;\n    const btn = this.shadowRoot?.querySelector('.btn');\n    if (!btn) return;\n    const rect = btn.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width) * 100;\n    const y = ((e.clientY - rect.top) / rect.height) * 100;\n    this.style.setProperty('--lib-spotlight-x', `${x}%`);\n    this.style.setProperty('--lib-spotlight-y', `${y}%`);\n  };\n\n  private _onMouseLeave = (): void => {\n    this.style.setProperty('--lib-spotlight-x', '50%');\n    this.style.setProperty('--lib-spotlight-y', '50%');\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('mousemove', this._onMouseMove);\n    this.addEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mousemove', this._onMouseMove);\n    this.removeEventListener('mouseleave', this._onMouseLeave);\n  }\n\n  /**\n * @type {'button' | 'submit' | 'reset'}\n */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'custom-padding' })\n  customPadding: string | null = null;\n\n  /**\n * @type {string | null}\n */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Implementación del renderizado siguiendo la regla de tipado explícito.\n   */\n  override render(): TemplateResult {\n    return buttonTemplate({\n      buttonId: this._buttonId,\n      type: this.type,\n      disabled: this.disabled,\n      ariaLabel: this.ariaLabel ?? undefined,\n      handleClick: this._handleClick.bind(this),\n      variant: this.variant,\n      size: this.size,\n      glass: this.glass,\n      spotlight: this.spotlight,\n      customPadding: this.customPadding ?? undefined,\n    });\n  }\n\n  private _handleClick(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<UiClickEventDetail>('ui-lib-click', {\n        detail: { originalEvent: event, timestamp: Date.now() },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-button': LibButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBO,IAAM,YAAN,cAAwB,WAAW;AAAA,EAYxC,cAAc;AACZ,UAAA;AAQF,SAAA,UAA4B;AAM5B,SAAA,OAAgB;AAMhB,SAAA,WAAW;AAMX,SAAA,QAAQ;AAMR,SAAA,YAAY;AAEZ,SAAQ,eAAe,CAAC,MAAwB;;AAC9C,UAAI,CAAC,KAAK,UAAW;AACrB,YAAM,OAAM,UAAK,eAAL,mBAAiB,cAAc;AAC3C,UAAI,CAAC,IAAK;AACV,YAAM,OAAO,IAAI,sBAAA;AACjB,YAAM,KAAM,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAS;AACnD,YAAM,KAAM,EAAE,UAAU,KAAK,OAAO,KAAK,SAAU;AACnD,WAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AACnD,WAAK,MAAM,YAAY,qBAAqB,GAAG,CAAC,GAAG;AAAA,IACrD;AAEA,SAAQ,gBAAgB,MAAY;AAClC,WAAK,MAAM,YAAY,qBAAqB,KAAK;AACjD,WAAK,MAAM,YAAY,qBAAqB,KAAK;AAAA,IACnD;AAkBA,SAAA,OAAsC;AAMtC,SAAA,gBAA+B;AAM/B,SAAS,YAA2B;AA7ElC,SAAK,YAAY,iBAAiB,aAAa;AAAA,EACjD;AAAA,EAgDS,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,iBAAiB,aAAa,KAAK,YAAY;AACpD,SAAK,iBAAiB,cAAc,KAAK,aAAa;AAAA,EACxD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,oBAAoB,aAAa,KAAK,YAAY;AACvD,SAAK,oBAAoB,cAAc,KAAK,aAAa;AAAA,EAC3D;AAAA;AAAA;AAAA;AAAA,EAuBS,SAAyB;AAChC,WAAO,eAAe;AAAA,MACpB,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,WAAW,KAAK,aAAa;AAAA,MAC7B,aAAa,KAAK,aAAa,KAAK,IAAI;AAAA,MACxC,SAAS,KAAK;AAAA,MACd,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,WAAW,KAAK;AAAA,MAChB,eAAe,KAAK,iBAAiB;AAAA,IAAA,CACtC;AAAA,EACH;AAAA,EAEQ,aAAa,OAAoB;AACvC,QAAI,KAAK,UAAU;AACjB,YAAM,eAAA;AACN,YAAM,gBAAA;AACN;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAgC,gBAAgB;AAAA,QAClD,QAAQ,EAAE,eAAe,OAAO,WAAW,KAAK,MAAI;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AACF;AA9Ha,UACK,SAAS;AAAA,EACvB;AAAA,QACI,UAAU,YAAY,CAAC;AAAA;AAAA,EAE3B;AAAA,QACI,UAAU,SAAS,CAAC;AAAA;AAE1B;AAaA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GApB9B,UAqBX,WAAA,WAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GA1B9B,UA2BX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAhC/B,UAiCX,WAAA,YAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAtC/B,UAuCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA5C/B,UA6CX,WAAA,aAAA,CAAA;AAkCA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Ef,UA+EX,WAAA,QAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB;AAAA,GApF5C,UAqFX,WAAA,iBAAA,CAAA;AAMS,gBAAA;AAAA,EADR,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GA1FxC,UA2FF,WAAA,aAAA,CAAA;AA3FE,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/index232.js

@@ -1,4 +1,4 @@
-const buttonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-sm) var(--lib-space-md);width:100%;border:var(--lib-border-width) solid transparent;border-radius:var(--radius-none);background:transparent;cursor:pointer;outline:none;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn ::slotted(*){position:relative;z-index:1}.btn:active:not(:disabled){transform:translateY(1px)}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([disabled]) .btn{opacity:.38;cursor:not-allowed;pointer-events:none}:host([variant="primary"]) .btn{background:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="primary"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-kaki-400);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);z-index:0}:host([variant="primary"]) .btn:hover{box-shadow:var(--shadow-md)}:host([variant="primary"]) .btn:hover:after{transform:scaleX(1)}:host([variant="secondary"]) .btn{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}:host([variant="secondary"]) .btn:hover{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .btn:hover{color:var(--text-primary);background:var(--color-ink-10)}:host([variant="accent"]) .btn{background:var(--color-kaki-400);color:var(--color-white)}:host([variant="accent"]) .btn:hover{background:var(--color-kaki-500);box-shadow:var(--shadow-md)}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border-color:var(--color-error)}:host([variant="danger"]) .btn:hover{background:var(--color-error);color:var(--color-white)}:host([glass]) .btn{border-radius:var(--radius-md);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);background:var(--lib-glass-bg);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow)}:host([glass]) .btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}:host([glass]) .btn:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-1px)}:host([glass][variant="primary"]) .btn{background:var(--lib-glass-bg-water);border-color:#ffffff40}:host([glass][variant="accent"]) .btn{background:var(--lib-glass-bg-kaki);border-color:#6d4d3e59}:host([glass][variant="primary"]) .btn:after{display:none}}';
+const buttonCss = '@layer tokens,reset,components;@layer reset{:host{display:inline-block;vertical-align:middle}*,*:before,*:after{box-sizing:border-box}}@layer components{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--lib-space-sm);font-family:var(--lib-font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wider);text-transform:uppercase;white-space:nowrap;line-height:1;padding:var(--lib-space-sm) var(--lib-space-md);width:100%;border:var(--lib-border-width) solid transparent;border-radius:var(--radius-none);background:transparent;cursor:pointer;outline:none;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-base) var(--ease-default),color var(--duration-base) var(--ease-default),border-color var(--duration-base) var(--ease-default),box-shadow var(--duration-base) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.btn ::slotted(*){position:relative;z-index:1}.btn:active:not(:disabled){transform:translateY(1px)}:host([size="sm"]) .btn{padding:var(--lib-space-xs) var(--lib-space-sm);font-size:10px}:host([size="lg"]) .btn{padding:var(--lib-space-md) var(--lib-space-lg);font-size:var(--text-sm);letter-spacing:var(--tracking-widest)}:host([disabled]) .btn{opacity:.38;cursor:not-allowed;pointer-events:none}:host([variant="primary"]) .btn{background:var(--color-washi-900);color:var(--color-washi-50)}:host([variant="primary"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-kaki-400);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-slow) var(--ease-out);z-index:0}:host([variant="primary"]) .btn:hover{box-shadow:var(--shadow-md)}:host([variant="primary"]) .btn:hover:after{transform:scaleX(1)}:host([variant="secondary"]) .btn{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}:host([variant="secondary"]) .btn:hover{background:var(--color-washi-900);color:var(--color-washi-50);border-color:var(--color-washi-900)}:host([variant="ghost"]) .btn{background:transparent;color:var(--text-secondary)}:host([variant="ghost"]) .btn:hover{color:var(--text-primary);background:var(--color-ink-10)}:host([variant="accent"]) .btn{background:var(--color-kaki-400);color:var(--color-white)}:host([variant="accent"]) .btn:hover{background:var(--color-kaki-500);box-shadow:var(--shadow-md)}:host([variant="danger"]) .btn{background:transparent;color:var(--color-error);border-color:var(--color-error)}:host([variant="danger"]) .btn:hover{background:var(--color-error);color:var(--color-white)}:host([glass]) .btn{border-radius:var(--radius-md);-webkit-backdrop-filter:var(--lib-glass-filter);backdrop-filter:var(--lib-glass-filter);background:var(--lib-glass-bg);border:var(--lib-glass-border);box-shadow:var(--lib-glass-shadow);color:var(--lib-glass-text);text-shadow:var(--lib-glass-text-shadow)}:host([glass]) .btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--lib-glass-shine);pointer-events:none;z-index:0}:host([glass]) .btn:hover{box-shadow:var(--lib-glass-shadow-hover);transform:translateY(-1px)}:host([glass][variant="primary"]) .btn{background:var(--lib-glass-bg-water);border-color:#ffffff40}:host([glass][variant="accent"]) .btn{background:var(--lib-glass-bg-kaki);border-color:#6d4d3e59}:host([glass][variant="primary"]) .btn:after{display:none}:host([variant="kintsugi"]) .btn{background:var(--color-washi-950);color:var(--color-washi-50);border-color:transparent}:host([variant="kintsugi"]) .btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:1px;background:var(--lib-kintsugi-border);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0}@media(hover:hover){:host([variant="kintsugi"]) .btn:hover{background:var(--color-washi-900)}}:host([variant="brutal"]) .btn{background:var(--color-washi-50);color:var(--color-ink-100);border:2px solid var(--color-ink-100);box-shadow:var(--lib-shadow-brutal);border-radius:0;transition:transform var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default)}@media(hover:hover){:host([variant="brutal"]) .btn:hover{transform:translate(4px,4px);box-shadow:none}}:host([variant="brutal"]) .btn:active{transform:translate(4px,4px);box-shadow:none}.spotlight-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--lib-spotlight-gradient-white);transition:var(--lib-spotlight-transition);pointer-events:none;z-index:0}:host([variant="brutal"]) .spotlight-layer,:host([variant="secondary"]) .spotlight-layer,:host([variant="ghost"]) .spotlight-layer{background:var(--lib-spotlight-gradient)}}';
 export {
   buttonCss as default
 };

package/dist/index233.js

@@ -10,6 +10,7 @@ function buttonTemplate(props) {
       @click="${props.handleClick}"
       class="btn"
     >
+      ${props.spotlight ? html`<span class="spotlight-layer" aria-hidden="true"></span>` : nothing}
       <slot name="prefix"></slot>
       <slot></slot>
       <slot name="suffix"></slot>

package/dist/index233.js.map

@@ -1 +1 @@
-{"version":3,"file":"index233.js","sources":["../src/components/atoms/button/lib-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibSize, LibVariant } from '../../../types';\n\nexport interface ButtonTemplateProps {\n  buttonId: string;\n  type: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  ariaLabel?: string | undefined;\n  handleClick: (event: Event) => void;\n  variant: LibVariant;\n  size: LibSize;\n  glass: boolean;\n  customPadding?: string | undefined;\n}\n    \n/**\n * Plantilla base para el componente lib-button.\n * Renderiza un único <button> estilizado vía :host() selectors.\n */\nexport function buttonTemplate(props: ButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      id=\"${props.buttonId}\"\n      type=\"${props.type}\"\n      ?disabled=\"${props.disabled}\"\n      aria-label=\"${props.ariaLabel ?? nothing}\"\n      style=\"${props.customPadding ? `padding: ${props.customPadding}` : nothing}\"\n      @click=\"${props.handleClick}\"\n      class=\"btn\"\n    >\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAmBO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA,YAEG,MAAM,QAAQ;AAAA,cACZ,MAAM,IAAI;AAAA,mBACL,MAAM,QAAQ;AAAA,oBACb,MAAM,aAAa,OAAO;AAAA,eAC/B,MAAM,gBAAgB,YAAY,MAAM,aAAa,KAAK,OAAO;AAAA,gBAChE,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC;"}
+{"version":3,"file":"index233.js","sources":["../src/components/atoms/button/lib-button.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibSize } from '../../../types';\nimport type { LibButtonVariant } from './lib-button.types';\n\nexport interface ButtonTemplateProps {\n  buttonId: string;\n  type: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  ariaLabel?: string | undefined;\n  handleClick: (event: Event) => void;\n  variant: LibButtonVariant;\n  size: LibSize;\n  glass: boolean;\n  spotlight: boolean;\n  customPadding?: string | undefined;\n}\n    \n/**\n * Plantilla base para el componente lib-button.\n * Renderiza un único <button> estilizado vía :host() selectors.\n */\nexport function buttonTemplate(props: ButtonTemplateProps): TemplateResult {\n  return html`\n    <button\n      id=\"${props.buttonId}\"\n      type=\"${props.type}\"\n      ?disabled=\"${props.disabled}\"\n      aria-label=\"${props.ariaLabel ?? nothing}\"\n      style=\"${props.customPadding ? `padding: ${props.customPadding}` : nothing}\"\n      @click=\"${props.handleClick}\"\n      class=\"btn\"\n    >\n      ${props.spotlight ? html`<span class=\"spotlight-layer\" aria-hidden=\"true\"></span>` : nothing}\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    </button>\n  `;\n}"],"names":[],"mappings":";AAqBO,SAAS,eAAe,OAA4C;AACzE,SAAO;AAAA;AAAA,YAEG,MAAM,QAAQ;AAAA,cACZ,MAAM,IAAI;AAAA,mBACL,MAAM,QAAQ;AAAA,oBACb,MAAM,aAAa,OAAO;AAAA,eAC/B,MAAM,gBAAgB,YAAY,MAAM,aAAa,KAAK,OAAO;AAAA,gBAChE,MAAM,WAAW;AAAA;AAAA;AAAA,QAGzB,MAAM,YAAY,iEAAiE,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlG;"}

package/dist/index254.js

@@ -1,4 +1,4 @@
-const spinnerCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}@keyframes sp-rotate{to{transform:rotate(360deg)}}@keyframes sp-rotate-reverse{to{transform:rotate(-360deg)}}:host([variant="enso"]) svg,:host(:not([variant])) svg{display:block;animation:sp-rotate 2.2s cubic-bezier(.5,.1,.5,.9) infinite}:host([variant="enso"][size="sm"]) svg,:host(:not([variant])[size="sm"]) svg{width:24px;height:24px}:host([variant="enso"][size="md"]) svg,:host(:not([variant])[size="md"]) svg,:host([variant="enso"]:not([size])) svg,:host(:not([variant],[size])) svg{width:48px;height:48px}:host([variant="enso"][size="lg"]) svg,:host(:not([variant])[size="lg"]) svg{width:72px;height:72px}.sp-sumi-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.sp-sumi{border-radius:50%;filter:blur(.6px);animation:sp-rotate 1.6s linear infinite;background:conic-gradient(from 0deg,#2a1f1a00,#2a1f1a14 8.33%,#2a1f1a40 25%,#2a1f1aa6,#2a1f1aeb 75%,#2a1f1a 86.11%,#2a1f1a33 95.83%,#2a1f1a00);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][tone="celadon"]) .sp-sumi{background:conic-gradient(from 0deg,#487d7300,#487d7314 8.33%,#487d734d 27.78%,#487d73b3,#487d73 83.33%,#487d7326 97.22%,#487d7300);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark]) .sp-sumi{background:conic-gradient(from 0deg,#fef7f200,#fef7f214 8.33%,#fef7f240 25%,#fef7f2a6,#fef7f2eb 75%,#fef7f2 86.11%,#fef7f233 95.83%,#fef7f200);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark][tone="kaki"]) .sp-sumi{background:conic-gradient(from 0deg,#c47c3b00,#c47c3b1a 8.33%,#c47c3b4d 27.78%,#c47c3bbf,#c47c3b 83.33%,#c47c3b26 97.22%,#c47c3b00);filter:blur(.5px) drop-shadow(0 0 4px oklch(65% .12 60deg / .4));mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][size="sm"]) .sp-sumi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="sumi"]:not([size])) .sp-sumi,:host([variant="sumi"][size="md"]) .sp-sumi{width:48px;height:48px}:host([variant="sumi"][size="lg"]) .sp-sumi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-kintsugi{border-radius:50%;background:conic-gradient(from 0deg,#6d4d3e00,#7f594426 11.11%,#a36b4480,#c47c3b 61.11%,#d28425,#ad704099 88.89%,#6d4d3e00);mask:radial-gradient(circle at center,transparent 56%,black 57%);filter:blur(.4px) drop-shadow(0 0 4px oklch(65% .12 60deg / .5));animation:sp-rotate 2s cubic-bezier(.4,0,.6,1) infinite}:host([variant="kintsugi"][dark]) .sp-kintsugi{background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,#ea8e00,#ec9100 73.61%,#f19600 80.56%,#ea9100d9,#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,color(xyz 0.438 0.369 0.044),color(xyz 0.452 0.381 0.039) 73.61%,color(xyz 0.481 0.404 0.028) 80.56%,color(xyz 0.447 0.377 0.036 / 0.85),#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);filter:blur(.3px) drop-shadow(0 0 6px oklch(70% .14 62deg / .6))}:host([variant="kintsugi"][size="sm"]) .sp-kintsugi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="kintsugi"]:not([size])) .sp-kintsugi,:host([variant="kintsugi"][size="md"]) .sp-kintsugi{width:48px;height:48px}:host([variant="kintsugi"][size="lg"]) .sp-kintsugi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-shizuku{position:relative;border-radius:50%;animation:sp-rotate 1.8s linear infinite}.sp-shizuku span{position:absolute;border-radius:50%;background:#2a1f1a;top:50%;left:50%;transform-origin:0 0}:host([variant="shizuku"][tone="kaki"]) .sp-shizuku span,:host([variant="shizuku"][dark]) .sp-shizuku span{background:#c47c3b}.sp-shizuku.sp-shizuku--md{width:48px;height:48px}.sp-shizuku.sp-shizuku--md span{margin:-3px}.sp-shizuku.sp-shizuku--md span:nth-child(1){width:7px;height:7px;transform:rotate(0) translate(18px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--md span:nth-child(2){width:5.5px;height:5.5px;transform:rotate(60deg) translate(18px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--md span:nth-child(3){width:4px;height:4px;transform:rotate(115deg) translate(18px) translateY(-50%);opacity:.48}.sp-shizuku.sp-shizuku--md span:nth-child(4){width:3px;height:3px;transform:rotate(160deg) translate(18px) translateY(-50%);opacity:.28}.sp-shizuku.sp-shizuku--md span:nth-child(5){width:2px;height:2px;transform:rotate(200deg) translate(18px) translateY(-50%);opacity:.13}.sp-shizuku.sp-shizuku--md span:nth-child(6){width:1.5px;height:1.5px;transform:rotate(235deg) translate(18px) translateY(-50%);opacity:.06}.sp-shizuku.sp-shizuku--sm{width:24px;height:24px}.sp-shizuku.sp-shizuku--sm span{margin:-1.5px}.sp-shizuku.sp-shizuku--sm span:nth-child(1){width:4px;height:4px;transform:rotate(0) translate(9px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--sm span:nth-child(2){width:3px;height:3px;transform:rotate(60deg) translate(9px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--sm span:nth-child(3){width:2px;height:2px;transform:rotate(115deg) translate(9px) translateY(-50%);opacity:.45}.sp-shizuku.sp-shizuku--sm span:nth-child(4){width:1.5px;height:1.5px;transform:rotate(160deg) translate(9px) translateY(-50%);opacity:.25}.sp-shizuku.sp-shizuku--sm span:nth-child(5){width:1px;height:1px;transform:rotate(200deg) translate(9px) translateY(-50%);opacity:.1}.sp-shizuku.sp-shizuku--sm span:nth-child(6){width:1px;height:1px;transform:rotate(235deg) translate(9px) translateY(-50%);opacity:.05}.sp-shizuku.sp-shizuku--lg{width:72px;height:72px}.sp-shizuku.sp-shizuku--lg span{margin:-4.5px}.sp-shizuku.sp-shizuku--lg span:nth-child(1){width:10px;height:10px;transform:rotate(0) translate(27px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--lg span:nth-child(2){width:8px;height:8px;transform:rotate(55deg) translate(27px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--lg span:nth-child(3){width:6px;height:6px;transform:rotate(105deg) translate(27px) translateY(-50%);opacity:.5}.sp-shizuku.sp-shizuku--lg span:nth-child(4){width:4.5px;height:4.5px;transform:rotate(148deg) translate(27px) translateY(-50%);opacity:.3}.sp-shizuku.sp-shizuku--lg span:nth-child(5){width:3px;height:3px;transform:rotate(185deg) translate(27px) translateY(-50%);opacity:.15}.sp-shizuku.sp-shizuku--lg span:nth-child(6){width:2px;height:2px;transform:rotate(218deg) translate(27px) translateY(-50%);opacity:.06}}';
+const spinnerCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-flex;align-items:center;justify-content:center}@keyframes sp-rotate{to{transform:rotate(360deg)}}@keyframes sp-rotate-reverse{to{transform:rotate(-360deg)}}:host([variant="enso"]) svg,:host(:not([variant])) svg{display:block;animation:sp-rotate 2.2s cubic-bezier(.5,.1,.5,.9) infinite}:host([variant="enso"][size="sm"]) svg,:host(:not([variant])[size="sm"]) svg{width:24px;height:24px}:host([variant="enso"][size="md"]) svg,:host(:not([variant])[size="md"]) svg,:host([variant="enso"]:not([size])) svg,:host(:not([variant],[size])) svg{width:48px;height:48px}:host([variant="enso"][size="lg"]) svg,:host(:not([variant])[size="lg"]) svg{width:72px;height:72px}.sp-sumi-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}.sp-sumi{border-radius:50%;filter:blur(.6px);animation:sp-rotate 1.6s linear infinite;background:conic-gradient(from 0deg,#2a1f1a00,#2a1f1a14 8.33%,#2a1f1a40 25%,#2a1f1aa6,#2a1f1aeb 75%,#2a1f1a 86.11%,#2a1f1a33 95.83%,#2a1f1a00);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][tone="celadon"]) .sp-sumi{background:conic-gradient(from 0deg,#487d7300,#487d7314 8.33%,#487d734d 27.78%,#487d73b3,#487d73 83.33%,#487d7326 97.22%,#487d7300);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark]) .sp-sumi{background:conic-gradient(from 0deg,#fef7f200,#fef7f214 8.33%,#fef7f240 25%,#fef7f2a6,#fef7f2eb 75%,#fef7f2 86.11%,#fef7f233 95.83%,#fef7f200);mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][dark][tone="kaki"]) .sp-sumi{background:conic-gradient(from 0deg,#c47c3b00,#c47c3b1a 8.33%,#c47c3b4d 27.78%,#c47c3bbf,#c47c3b 83.33%,#c47c3b26 97.22%,#c47c3b00);filter:blur(.5px) drop-shadow(0 0 4px oklch(65% .12 60deg / .4));mask:radial-gradient(circle at center,transparent 56%,black 57%)}:host([variant="sumi"][size="sm"]) .sp-sumi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="sumi"]:not([size])) .sp-sumi,:host([variant="sumi"][size="md"]) .sp-sumi{width:48px;height:48px}:host([variant="sumi"][size="lg"]) .sp-sumi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-kintsugi{border-radius:50%;background:conic-gradient(from 0deg,#6d4d3e00,#7f594426 11.11%,#a36b4480,#c47c3b 61.11%,#d28425,#ad704099 88.89%,#6d4d3e00);mask:radial-gradient(circle at center,transparent 56%,black 57%);filter:blur(.4px) drop-shadow(0 0 4px oklch(65% .12 60deg / .5));animation:sp-rotate 2s cubic-bezier(.4,0,.6,1) infinite}:host([variant="kintsugi"][dark]) .sp-kintsugi{background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,#ea8e00,#ec9100 73.61%,#f19600 80.56%,#ea9100d9,#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);background:conic-gradient(from 0deg,#6d4d3e00,#97634633 8.33%,#c57b3db3 41.67%,#d98529d9 54.17%,#e1891cec,#e78c08 66.67%,color(xyz 0.438 0.369 0.044),color(xyz 0.452 0.381 0.039) 73.61%,color(xyz 0.481 0.404 0.028) 80.56%,color(xyz 0.447 0.377 0.036 / 0.85),#e18907b3,#ce802b8c,#ae6f4266 94.44%,#6d4d3e00);filter:blur(.3px) drop-shadow(0 0 6px oklch(70% .14 62deg / .6))}:host([variant="kintsugi"][size="sm"]) .sp-kintsugi{width:24px;height:24px;mask:radial-gradient(circle at center,transparent 52%,black 53%)}:host([variant="kintsugi"]:not([size])) .sp-kintsugi,:host([variant="kintsugi"][size="md"]) .sp-kintsugi{width:48px;height:48px}:host([variant="kintsugi"][size="lg"]) .sp-kintsugi{width:72px;height:72px;mask:radial-gradient(circle at center,transparent 58%,black 59%)}.sp-shizuku{position:relative;border-radius:50%;animation:sp-rotate 1.8s linear infinite}.sp-shizuku span{position:absolute;border-radius:50%;background:#2a1f1a;top:50%;left:50%;transform-origin:0 0}:host([variant="shizuku"][tone="kaki"]) .sp-shizuku span,:host([variant="shizuku"][dark]) .sp-shizuku span{background:#c47c3b}.sp-shizuku.sp-shizuku--md{width:48px;height:48px}.sp-shizuku.sp-shizuku--md span{margin:-3px}.sp-shizuku.sp-shizuku--md span:nth-child(1){width:7px;height:7px;transform:rotate(0) translate(18px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--md span:nth-child(2){width:5.5px;height:5.5px;transform:rotate(60deg) translate(18px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--md span:nth-child(3){width:4px;height:4px;transform:rotate(115deg) translate(18px) translateY(-50%);opacity:.48}.sp-shizuku.sp-shizuku--md span:nth-child(4){width:3px;height:3px;transform:rotate(160deg) translate(18px) translateY(-50%);opacity:.28}.sp-shizuku.sp-shizuku--md span:nth-child(5){width:2px;height:2px;transform:rotate(200deg) translate(18px) translateY(-50%);opacity:.13}.sp-shizuku.sp-shizuku--md span:nth-child(6){width:1.5px;height:1.5px;transform:rotate(235deg) translate(18px) translateY(-50%);opacity:.06}.sp-shizuku.sp-shizuku--sm{width:24px;height:24px}.sp-shizuku.sp-shizuku--sm span{margin:-1.5px}.sp-shizuku.sp-shizuku--sm span:nth-child(1){width:4px;height:4px;transform:rotate(0) translate(9px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--sm span:nth-child(2){width:3px;height:3px;transform:rotate(60deg) translate(9px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--sm span:nth-child(3){width:2px;height:2px;transform:rotate(115deg) translate(9px) translateY(-50%);opacity:.45}.sp-shizuku.sp-shizuku--sm span:nth-child(4){width:1.5px;height:1.5px;transform:rotate(160deg) translate(9px) translateY(-50%);opacity:.25}.sp-shizuku.sp-shizuku--sm span:nth-child(5){width:1px;height:1px;transform:rotate(200deg) translate(9px) translateY(-50%);opacity:.1}.sp-shizuku.sp-shizuku--sm span:nth-child(6){width:1px;height:1px;transform:rotate(235deg) translate(9px) translateY(-50%);opacity:.05}.sp-shizuku.sp-shizuku--lg{width:72px;height:72px}.sp-shizuku.sp-shizuku--lg span{margin:-4.5px}.sp-shizuku.sp-shizuku--lg span:nth-child(1){width:10px;height:10px;transform:rotate(0) translate(27px) translateY(-50%);opacity:1}.sp-shizuku.sp-shizuku--lg span:nth-child(2){width:8px;height:8px;transform:rotate(55deg) translate(27px) translateY(-50%);opacity:.72}.sp-shizuku.sp-shizuku--lg span:nth-child(3){width:6px;height:6px;transform:rotate(105deg) translate(27px) translateY(-50%);opacity:.5}.sp-shizuku.sp-shizuku--lg span:nth-child(4){width:4.5px;height:4.5px;transform:rotate(148deg) translate(27px) translateY(-50%);opacity:.3}.sp-shizuku.sp-shizuku--lg span:nth-child(5){width:3px;height:3px;transform:rotate(185deg) translate(27px) translateY(-50%);opacity:.15}.sp-shizuku.sp-shizuku--lg span:nth-child(6){width:2px;height:2px;transform:rotate(218deg) translate(27px) translateY(-50%);opacity:.06}@media(prefers-reduced-motion:reduce){:host([variant="enso"]) svg,:host(:not([variant])) svg,.sp-sumi,.sp-kintsugi,.sp-shizuku{animation:none}}}';
 export {
   spinnerCss as default
 };

package/dist/index263.js

@@ -1,4 +1,4 @@
-const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}}';
+const glitchCss = '@layer tokens,reset,components;@layer reset{*,*:before,*:after{box-sizing:border-box}}@layer components{:host{display:inline-block;cursor:default}.tg-inner{position:relative;display:inline-block}:host([variant="slice"]) .tg-inner:before,:host([variant="slice"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="slice"]) .tg-inner:before{color:var(--color-kaki-500);mix-blend-mode:multiply}:host([variant="slice"]) .tg-inner:after{color:var(--color-celadon-400);mix-blend-mode:multiply}:host([variant="slice"]:hover) .tg-inner:before,:host([variant="slice"][active]) .tg-inner:before,:host([variant="slice"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-slice-before .42s steps(1) infinite}:host([variant="slice"]:hover) .tg-inner:after,:host([variant="slice"][active]) .tg-inner:after,:host([variant="slice"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-slice-after .42s steps(1) infinite;animation-delay:60ms}@keyframes tg-slice-before{0%{clip-path:inset(14% 0 72% 0);transform:translate(-3px)}10%{clip-path:inset(52% 0 32% 0);transform:translate(2px)}20%{clip-path:inset(8% 0 82% 0);transform:translate(-4px)}30%{clip-path:inset(66% 0 12% 0);transform:translate(3px)}40%{clip-path:inset(33% 0 44% 0);transform:translate(-2px)}50%{clip-path:inset(0% 0 90% 0);transform:translate(4px)}60%{clip-path:inset(78% 0 8% 0);transform:translate(-3px)}70%{clip-path:inset(22% 0 60% 0);transform:translate(2px)}80%{clip-path:inset(44% 0 38% 0);transform:translate(-4px)}90%{clip-path:inset(60% 0 18% 0);transform:translate(3px)}to{clip-path:inset(10% 0 75% 0);transform:translate(-2px)}}@keyframes tg-slice-after{0%{clip-path:inset(64% 0 20% 0);transform:translate(3px)}10%{clip-path:inset(28% 0 56% 0);transform:translate(-4px)}20%{clip-path:inset(76% 0 6% 0);transform:translate(2px)}30%{clip-path:inset(12% 0 70% 0);transform:translate(-3px)}40%{clip-path:inset(88% 0 4% 0);transform:translate(4px)}50%{clip-path:inset(40% 0 48% 0);transform:translate(-2px)}60%{clip-path:inset(6% 0 84% 0);transform:translate(3px)}70%{clip-path:inset(55% 0 30% 0);transform:translate(-4px)}80%{clip-path:inset(18% 0 66% 0);transform:translate(2px)}90%{clip-path:inset(82% 0 10% 0);transform:translate(-3px)}to{clip-path:inset(36% 0 50% 0);transform:translate(4px)}}:host([variant="scan"]) .tg-inner:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;color:var(--color-kaki-500);opacity:0;clip-path:inset(0 100% 0 0)}:host([variant="scan"]:hover) .tg-inner:before,:host([variant="scan"][active]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) forwards}:host([variant="scan"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-scan-sweep .6s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-scan-sweep{0%{clip-path:inset(0% 100% 0 0);transform:translate(0)}30%{clip-path:inset(0% 0% 0 0);transform:translate(4px)}60%{clip-path:inset(0% 0% 0 0);transform:translate(-2px)}80%{clip-path:inset(0% 0% 0 0);transform:translate(0)}90%{clip-path:inset(0% 0% 0 0);transform:translate(0);opacity:1}to{clip-path:inset(0% 0% 0 0);opacity:0}}:host([variant="shift"]) .tg-inner:before,:host([variant="shift"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;color:inherit}:host([variant="shift"]:hover) .tg-inner:before,:host([variant="shift"][active]) .tg-inner:before,:host([variant="shift"][trigger="always"]) .tg-inner:before{opacity:.55;color:var(--color-kaki-400);animation:tg-shift-a .38s steps(1) infinite}:host([variant="shift"]:hover) .tg-inner:after,:host([variant="shift"][active]) .tg-inner:after,:host([variant="shift"][trigger="always"]) .tg-inner:after{opacity:.35;color:var(--color-celadon-500);animation:tg-shift-b .38s steps(1) infinite;animation-delay:.1s}@keyframes tg-shift-a{0%{transform:translate(-2px,1px);clip-path:inset(20% 0 55% 0)}20%{transform:translate(2px);clip-path:inset(60% 0 10% 0)}40%{transform:translate(-1px,-1px);clip-path:inset(5% 0 70% 0)}60%{transform:translate(3px,1px);clip-path:inset(40% 0 30% 0)}80%{transform:translate(-2px);clip-path:inset(75% 0 5% 0)}to{transform:translate(1px,-1px);clip-path:inset(30% 0 45% 0)}}@keyframes tg-shift-b{0%{transform:translate(3px,-1px);clip-path:inset(50% 0 20% 0)}20%{transform:translate(-2px,1px);clip-path:inset(10% 0 65% 0)}40%{transform:translate(2px);clip-path:inset(70% 0 10% 0)}60%{transform:translate(-3px,-1px);clip-path:inset(25% 0 50% 0)}80%{transform:translate(1px,1px);clip-path:inset(80% 0 5% 0)}to{transform:translate(-2px);clip-path:inset(35% 0 40% 0)}}:host([variant="decode"]) .char{display:inline-block;will-change:transform}:host([variant="decode"]) .char.is-scrambling{color:var(--color-kaki-500);animation:tg-char-jitter 60ms steps(1) infinite}@keyframes tg-char-jitter{0%{transform:translateY(0)}33%{transform:translateY(-1px)}66%{transform:translateY(1px)}}:host([variant="redact"]) .tg-inner:before{content:"";position:absolute;top:0;right:-3px;bottom:0;left:-3px;background:var(--color-washi-900);transform:scaleX(0);transform-origin:left;pointer-events:none}:host([variant="redact"]:hover) .tg-inner:before,:host([variant="redact"][active]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) forwards}:host([variant="redact"][trigger="always"]) .tg-inner:before{animation:tg-redact .7s cubic-bezier(.4,0,.2,1) infinite}@keyframes tg-redact{0%{transform:scaleX(0);transform-origin:left}40%{transform:scaleX(1);transform-origin:left}41%{transform:scaleX(1);transform-origin:right}80%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}:host([variant="noise"]) .tg-inner:before,:host([variant="noise"]) .tg-inner:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}:host([variant="noise"]) .tg-inner:before{color:#9a614dcc}:host([variant="noise"]) .tg-inner:after{color:#487d73b3}:host([variant="noise"]:hover) .tg-inner:before,:host([variant="noise"][active]) .tg-inner:before,:host([variant="noise"][trigger="always"]) .tg-inner:before{opacity:1;animation:tg-noise-a .28s steps(1) infinite}:host([variant="noise"]:hover) .tg-inner:after,:host([variant="noise"][active]) .tg-inner:after,:host([variant="noise"][trigger="always"]) .tg-inner:after{opacity:1;animation:tg-noise-b .28s steps(1) infinite;animation-delay:40ms}@keyframes tg-noise-a{0%{clip-path:inset(18% 0 60% 0);transform:translate(-4px,1px) skew(-1deg)}14%{clip-path:inset(72% 0 8% 0);transform:translate(3px,-2px) skew(2deg)}28%{clip-path:inset(36% 0 40% 0);transform:translate(-2px,2px) skew(-2deg)}42%{clip-path:inset(5% 0 80% 0);transform:translate(4px) skew(1deg)}57%{clip-path:inset(55% 0 22% 0);transform:translate(-3px,-1px) skew(-1deg)}71%{clip-path:inset(85% 0 5% 0);transform:translate(2px,2px) skew(2deg)}85%{clip-path:inset(28% 0 50% 0);transform:translate(-4px,-2px) skew(-2deg)}to{clip-path:inset(48% 0 30% 0);transform:translate(3px,1px) skew(1deg)}}@keyframes tg-noise-b{0%{clip-path:inset(62% 0 18% 0);transform:translate(4px,-1px) skew(2deg)}14%{clip-path:inset(12% 0 68% 0);transform:translate(-3px,2px) skew(-1deg)}28%{clip-path:inset(80% 0 8% 0);transform:translate(2px,-2px) skew(1deg)}42%{clip-path:inset(30% 0 42% 0);transform:translate(-4px,1px) skew(-2deg)}57%{clip-path:inset(5% 0 75% 0);transform:translate(3px,-1px) skew(2deg)}71%{clip-path:inset(45% 0 35% 0);transform:translate(-2px,2px) skew(-1deg)}85%{clip-path:inset(70% 0 12% 0);transform:translate(4px,-2px) skew(1deg)}to{clip-path:inset(22% 0 58% 0);transform:translate(-3px,1px) skew(-2deg)}}@media(prefers-reduced-motion:reduce){.tg-inner:before,.tg-inner:after{animation:none!important;opacity:0!important}.char.is-scrambling{animation:none!important;color:inherit}}}';
 export {
   glitchCss as default
 };

package/dist/index307.js

@@ -1,5 +1,5 @@
 import { nothing, html } from "lit";
-import { unsafeHTML as o } from "./index353.js";
+import { unsafeHTML as o } from "./index357.js";
 function renderBadge(item) {
   return item.badge != null ? html`<span class="tb-badge">${item.badge}</span>` : nothing;
 }

package/dist/index316.js

@@ -1,7 +1,7 @@
-import { renderClassic } from "./index354.js";
-import { renderCentered } from "./index355.js";
-import { renderMega } from "./index356.js";
-import { renderAppBar } from "./index357.js";
+import { renderClassic } from "./index353.js";
+import { renderCentered } from "./index354.js";
+import { renderMega } from "./index355.js";
+import { renderAppBar } from "./index356.js";
 function headerTemplate(ctx) {
   switch (ctx.variant) {
     case "centered":