npm - @norconsult-digital-public/isypixel - Versions diffs - 2.0.2-canary.1 → 2.0.2-canary.3 - Mend

@norconsult-digital-public/isypixel 2.0.2-canary.1 → 2.0.2-canary.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/llm.md CHANGED Viewed

@@ -169,9 +169,11 @@ In `index.html` `<body>`:
 ## Components
-| Component   | Description                                                         | Docs                                         |
-| ----------- | ------------------------------------------------------------------- | -------------------------------------------- |
-| `ip-button` | Clickable button with visual variants, loading state, and icon slot | `web-components/components/ip-button/llm.md` |
+| Component        | Description                                                                                | Docs                                              |
+| ---------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------- |
+| `ip-button`      | Clickable button with visual variants, loading state, and icon slot                        | `web-components/components/ip-button/llm.md`      |
+| `ip-icon-button` | Circular icon-only button with CSS ripple, visual variants, and loading state              | `web-components/components/ip-icon-button/llm.md` |
+| `ip-tooltip`     | Tooltip that wraps a trigger and shows non-interactive content on hover, focus, and Escape | `web-components/components/ip-tooltip/llm.md`     |
 ## Services

package/dist/types/components/ip-button/ip-button.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { JSX } from '../../stencil-public-runtime';
 export declare class IpButton {
     internals: ElementInternals;
+    /** Accessible name forwarded to the inner <button>. Useful for icon-only usage, and when provided it overrides the accessible name derived from any slotted label text. */
+    ariaLabel: string | null;
     /** Tracks whether the default slot has assigned content. Used to skip rendering the label `<span>` when the button is icon-only, preventing an unwanted flex gap. Set reactively via `onLabelSlotChange`. */
     private hasLabel;
     /** Visual variant of the button */

package/dist/types/components/ip-icon-button/ip-icon-button.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { JSX } from '../../stencil-public-runtime';
+/** Circular icon-only button with tooltip, five variants, three sizes, and form participation. */
+export declare class IpIconButton {
+    internals: ElementInternals;
+    /** Visual variant of the button. */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
+    /** Size of the button. */
+    size: 'small' | 'medium' | 'large';
+    /** Disables the button. Also set implicitly when `loading` is true. */
+    disabled: boolean;
+    /** Shows a loading spinner replacing the icon and disables interaction. */
+    loading: boolean;
+    /** Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content. */
+    label: string;
+    /** Hides the tooltip. Useful when the button is already described by surrounding context. */
+    disableTooltip: boolean;
+    /** Warns at runtime when no accessible label is provided — icon-only buttons have no other accessible name. */
+    componentDidLoad(): void;
+    /** Delegates form actions to the associated form element based on the `type` prop. */
+    private handleClick;
+    /** Renders the icon button wrapped in an ip-tooltip. */
+    render(): JSX.Element;
+}

package/dist/types/components/ip-tooltip/ip-tooltip.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { EventEmitter, JSX } from '../../stencil-public-runtime';
+export declare class IpTooltip {
+    /** Placement of the tooltip bubble relative to the trigger element. */
+    position: 'top' | 'right' | 'bottom' | 'left';
+    /** Visual size of the tooltip bubble. */
+    size: 'small' | 'medium' | 'large';
+    /** Delay in milliseconds before the tooltip appears on hover. */
+    delay: number;
+    /** Forces the tooltip visible regardless of hover or focus state. */
+    visible: boolean;
+    /** Prevents the tooltip from showing on hover or focus. */
+    disabled: boolean;
+    /** Renders a directional arrow pointing toward the trigger element. */
+    arrow: boolean;
+    /** Maximum width of the tooltip bubble. Use absolute or viewport units — percentage values are not supported as they resolve relative to the trigger element. E.g. "300px", "20rem", "50vw". */
+    maxWidth: string;
+    /** Internal hover/focus activation state, independent of the `visible` prop. */
+    private isActive;
+    /** Emitted when the tooltip transitions from hidden to visible. */
+    tooltipShow: EventEmitter<void>;
+    /** Emitted when the tooltip transitions from visible to hidden. */
+    tooltipHide: EventEmitter<void>;
+    private readonly tooltipId;
+    private delayTimer;
+    private hideTimer;
+    /** Clears any pending show or hide timers. */
+    private clearTimers;
+    /** Updates isActive and emits show/hide when the final visibility state changes. */
+    private setActive;
+    /** Emits show/hide when the `visible` prop changes and the final state differs. */
+    onVisibleChange(newValue: boolean, oldValue: boolean): void;
+    /** Hides the tooltip immediately when the component is disabled while active. */
+    onDisabledChange(newValue: boolean): void;
+    disconnectedCallback(): void;
+    /** Whether the tooltip is currently displayed, combining `visible` and hover/focus state. */
+    private get isTooltipVisible();
+    private handleTriggerMouseEnter;
+    private handleTriggerMouseLeave;
+    private handleTooltipMouseEnter;
+    private handleTooltipMouseLeave;
+    /** Fires when any focusable child (including slotted trigger) receives focus. */
+    handleFocusin(): void;
+    /** Fires when focus leaves the component entirely. */
+    handleFocusout(): void;
+    /** Closes the tooltip on Escape as required by WCAG 1.4.13. Only clears hover/focus state — does not affect the `visible` prop. */
+    private handleKeyDown;
+    render(): JSX.Element;
+}

package/dist/types/components.d.ts CHANGED Viewed

@@ -12,6 +12,11 @@ export namespace Components {
           * @default 'start'
          */
         "alignIcon": 'start' | 'end';
+        /**
+          * Accessible name forwarded to the inner <button>. Useful for icon-only usage, and when provided it overrides the accessible name derived from any slotted label text.
+          * @default null
+         */
+        "ariaLabel": string | null;
         /**
           * Disables the button
           * @default false
@@ -38,6 +43,87 @@ export namespace Components {
          */
         "variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
     }
+    /**
+     * Circular icon-only button with tooltip, five variants, three sizes, and form participation.
+     */
+    interface IpIconButton {
+        /**
+          * Hides the tooltip. Useful when the button is already described by surrounding context.
+          * @default false
+         */
+        "disableTooltip": boolean;
+        /**
+          * Disables the button. Also set implicitly when `loading` is true.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content.
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Shows a loading spinner replacing the icon and disables interaction.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * Size of the button.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it.
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Visual variant of the button.
+          * @default 'primary'
+         */
+        "variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
+    }
+    interface IpTooltip {
+        /**
+          * Renders a directional arrow pointing toward the trigger element.
+          * @default true
+         */
+        "arrow": boolean;
+        /**
+          * Delay in milliseconds before the tooltip appears on hover.
+          * @default 300
+         */
+        "delay": number;
+        /**
+          * Prevents the tooltip from showing on hover or focus.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Maximum width of the tooltip bubble. Use absolute or viewport units — percentage values are not supported as they resolve relative to the trigger element. E.g. "300px", "20rem", "50vw".
+          * @default '300px'
+         */
+        "maxWidth": string;
+        /**
+          * Placement of the tooltip bubble relative to the trigger element.
+          * @default 'top'
+         */
+        "position": 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * Visual size of the tooltip bubble.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * Forces the tooltip visible regardless of hover or focus state.
+          * @default false
+         */
+        "visible": boolean;
+    }
+}
+export interface IpTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIpTooltipElement;
 }
 declare global {
     interface HTMLIpButtonElement extends Components.IpButton, HTMLStencilElement {
@@ -46,8 +132,37 @@ declare global {
         prototype: HTMLIpButtonElement;
         new (): HTMLIpButtonElement;
     };
+    /**
+     * Circular icon-only button with tooltip, five variants, three sizes, and form participation.
+     */
+    interface HTMLIpIconButtonElement extends Components.IpIconButton, HTMLStencilElement {
+    }
+    var HTMLIpIconButtonElement: {
+        prototype: HTMLIpIconButtonElement;
+        new (): HTMLIpIconButtonElement;
+    };
+    interface HTMLIpTooltipElementEventMap {
+        "show": void;
+        "hide": void;
+    }
+    interface HTMLIpTooltipElement extends Components.IpTooltip, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIpTooltipElementEventMap>(type: K, listener: (this: HTMLIpTooltipElement, ev: IpTooltipCustomEvent<HTMLIpTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIpTooltipElementEventMap>(type: K, listener: (this: HTMLIpTooltipElement, ev: IpTooltipCustomEvent<HTMLIpTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIpTooltipElement: {
+        prototype: HTMLIpTooltipElement;
+        new (): HTMLIpTooltipElement;
+    };
     interface HTMLElementTagNameMap {
         "ip-button": HTMLIpButtonElement;
+        "ip-icon-button": HTMLIpIconButtonElement;
+        "ip-tooltip": HTMLIpTooltipElement;
     }
 }
 declare namespace LocalJSX {
@@ -57,6 +172,11 @@ declare namespace LocalJSX {
           * @default 'start'
          */
         "alignIcon"?: 'start' | 'end';
+        /**
+          * Accessible name forwarded to the inner <button>. Useful for icon-only usage, and when provided it overrides the accessible name derived from any slotted label text.
+          * @default null
+         */
+        "ariaLabel"?: string | null;
         /**
           * Disables the button
           * @default false
@@ -91,8 +211,102 @@ declare namespace LocalJSX {
          */
         "variant"?: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
     }
+    /**
+     * Circular icon-only button with tooltip, five variants, three sizes, and form participation.
+     */
+    interface IpIconButton {
+        /**
+          * Hides the tooltip. Useful when the button is already described by surrounding context.
+          * @default false
+         */
+        "disableTooltip"?: boolean;
+        /**
+          * Disables the button. Also set implicitly when `loading` is true.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+          * Accessible label — required. Sets aria-label on the inner button and is used as the tooltip text. Override with slot="tooltip" for HTML content.
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Shows a loading spinner replacing the icon and disables interaction.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * The name of the element, used when submitting an HTML form.
+         */
+        "name"?: string;
+        /**
+          * Size of the button.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Controls form behaviour: "button" does nothing, "submit" submits the associated form, "reset" resets it.
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Visual variant of the button.
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
+    }
+    interface IpTooltip {
+        /**
+          * Renders a directional arrow pointing toward the trigger element.
+          * @default true
+         */
+        "arrow"?: boolean;
+        /**
+          * Delay in milliseconds before the tooltip appears on hover.
+          * @default 300
+         */
+        "delay"?: number;
+        /**
+          * Prevents the tooltip from showing on hover or focus.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Maximum width of the tooltip bubble. Use absolute or viewport units — percentage values are not supported as they resolve relative to the trigger element. E.g. "300px", "20rem", "50vw".
+          * @default '300px'
+         */
+        "maxWidth"?: string;
+        /**
+          * Emitted when the tooltip transitions from visible to hidden.
+         */
+        "onHide"?: (event: IpTooltipCustomEvent<void>) => void;
+        /**
+          * Emitted when the tooltip transitions from hidden to visible.
+         */
+        "onShow"?: (event: IpTooltipCustomEvent<void>) => void;
+        /**
+          * Placement of the tooltip bubble relative to the trigger element.
+          * @default 'top'
+         */
+        "position"?: 'top' | 'right' | 'bottom' | 'left';
+        /**
+          * Visual size of the tooltip bubble.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * Forces the tooltip visible regardless of hover or focus state.
+          * @default false
+         */
+        "visible"?: boolean;
+    }
     interface IpButtonAttributes {
+        "ariaLabel": string | null;
         "variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
         "loading": boolean;
         "disabled": boolean;
@@ -100,9 +314,29 @@ declare namespace LocalJSX {
         "size": 'small' | 'medium' | 'large';
         "alignIcon": 'start' | 'end';
     }
+    interface IpIconButtonAttributes {
+        "variant": 'primary' | 'secondary' | 'tertiary' | 'brand' | 'destructive';
+        "size": 'small' | 'medium' | 'large';
+        "disabled": boolean;
+        "loading": boolean;
+        "type": 'button' | 'submit' | 'reset';
+        "label": string;
+        "disableTooltip": boolean;
+    }
+    interface IpTooltipAttributes {
+        "position": 'top' | 'right' | 'bottom' | 'left';
+        "size": 'small' | 'medium' | 'large';
+        "delay": number;
+        "visible": boolean;
+        "disabled": boolean;
+        "arrow": boolean;
+        "maxWidth": string;
+    }
     interface IntrinsicElements {
         "ip-button": Omit<IpButton, keyof IpButtonAttributes> & { [K in keyof IpButton & keyof IpButtonAttributes]?: IpButton[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `attr:${K}`]?: IpButtonAttributes[K] } & { [K in keyof IpButton & keyof IpButtonAttributes as `prop:${K}`]?: IpButton[K] };
+        "ip-icon-button": Omit<IpIconButton, keyof IpIconButtonAttributes> & { [K in keyof IpIconButton & keyof IpIconButtonAttributes]?: IpIconButton[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `attr:${K}`]?: IpIconButtonAttributes[K] } & { [K in keyof IpIconButton & keyof IpIconButtonAttributes as `prop:${K}`]?: IpIconButton[K] };
+        "ip-tooltip": Omit<IpTooltip, keyof IpTooltipAttributes> & { [K in keyof IpTooltip & keyof IpTooltipAttributes]?: IpTooltip[K] } & { [K in keyof IpTooltip & keyof IpTooltipAttributes as `attr:${K}`]?: IpTooltipAttributes[K] } & { [K in keyof IpTooltip & keyof IpTooltipAttributes as `prop:${K}`]?: IpTooltip[K] };
     }
 }
 export { LocalJSX as JSX };
@@ -110,6 +344,11 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ip-button": LocalJSX.IntrinsicElements["ip-button"] & JSXBase.HTMLAttributes<HTMLIpButtonElement>;
+            /**
+             * Circular icon-only button with tooltip, five variants, three sizes, and form participation.
+             */
+            "ip-icon-button": LocalJSX.IntrinsicElements["ip-icon-button"] & JSXBase.HTMLAttributes<HTMLIpIconButtonElement>;
+            "ip-tooltip": LocalJSX.IntrinsicElements["ip-tooltip"] & JSXBase.HTMLAttributes<HTMLIpTooltipElement>;
         }
     }
 }

package/dist/types/index.d.ts CHANGED Viewed

@@ -1 +1,3 @@
 export { IpButton } from './components/ip-button/ip-button';
+export { IpIconButton } from './components/ip-icon-button/ip-icon-button';
+export { IpTooltip } from './components/ip-tooltip/ip-tooltip';

package/dist/web-components/components/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- function t(t,o,e){const n="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;t&&t!==n;){const n=Object.getOwnPropertyDescriptor(t,o);if(n&&(!e\|\|n.get))return n;t=Object.getPrototypeOf(t)}}var o,e=(o,e)=>{var n;Object.entries(null!=(n=e.o.t)?n:{}).map((([n,[i]])=>{if(31&i\|\|32&i){const i=o[n],r=t(Object.getPrototypeOf(o),n,!0)\|\|Object.getOwnPropertyDescriptor(o,n);r&&Object.defineProperty(o,n,{get(){return r.get.call(this)},set(t){r.set.call(this,t)},configurable:!0,enumerable:!0}),e.i.has(n)?o[n]=e.i.get(n):void 0!==i&&(o[n]=i)}}))},n=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},i=(t,o)=>o in t,r=(t,o)=>(0,console.error)(t,o),l=new Map,a=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],s="undefined"!=typeof window?window:{},c=s.HTMLElement\|\|class{},u={l:0,u:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,o,e,n)=>t.addEventListener(o,e,n),rel:(t,o,e,n)=>t.removeEventListener(o,e,n),ce:(t,o)=>new CustomEvent(t,o)},d=(()=>{try{return!!s.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(t){}return!1})(),p=!!d&&(()=>!!s.document&&Object.getOwnPropertyDescriptor(s.document.adoptedStyleSheets,"length").writable)(),_=!1,b=[],f=[],h=(t,o)=>e=>{t.push(e),_\|\|(_=!0,o&&4&u.l?g(m):u.raf(m))},v=t=>{for(let o=0;o<t.length;o++)try{t[o](performance.now())}catch(t){r(t)}t.length=0},m=()=>{v(b),v(f),(_=b.length>0)&&u.raf(m)},g=t=>Promise.resolve(void 0).then(t),y=h(f,!0),k=t=>{const o=new URL(t,u.u);return o.origin!==s.location.origin?o.href:o.pathname},$=t=>u.u=t;function w(){const t=this.attachShadow({mode:"open"});void 0===o&&(o=null),o&&(p?t.adoptedStyleSheets.push(o):t.adoptedStyleSheets=[...t.adoptedStyleSheets,o])}var x,j=new WeakMap,O=t=>"sc-"+t.p,S=t=>"object"==(t=typeof t)\|\|"function"===t,z=(t,o,...e)=>{let n=null,i=null,r=!1,l=!1;const a=[],s=o=>{for(let e=0;e<o.length;e++)n=o[e],Array.isArray(n)?s(n):null!=n&&"boolean"!=typeof n&&((r="function"!=typeof t&&!S(n))&&(n+=""),r&&l?a[a.length-1]._+=n:a.push(r?E(null,n):n),l=r)};if(s(e),o){o.key&&(i=o.key);{const t=o.className\|\|o.class;t&&(o.class="object"!=typeof t?t:Object.keys(t).filter((o=>t[o])).join(" "))}}if("function"==typeof t)return t(null===o?{}:o,a,M);const c=E(t,null);return c.h=o,a.length>0&&(c.v=a),c.m=i,c},E=(t,o)=>({l:0,k:t,_:null!=o?o:null,$:null,v:null,h:null,m:null}),C={},M={forEach:(t,o)=>t.map(A).forEach(o),map:(t,o)=>t.map(A).map(o).map(L)},A=t=>({vattrs:t.h,vchildren:t.v,vkey:t.m,vname:t.j,vtag:t.k,vtext:t._}),L=t=>{if("function"==typeof t.vtag){const o={...t.vattrs};return t.vkey&&(o.key=t.vkey),t.vname&&(o.name=t.vname),z(t.vtag,o,...t.vchildren\|\|[])}const o=E(t.vtag,t.vtext);return o.h=t.vattrs,o.v=t.vchildren,o.m=t.vkey,o.j=t.vname,o},R=(t,o,e)=>null==t\|\|S(t)?t:4&o?(e&&"string"==typeof t\|\|"false"!==t)&&(""===t\|\|!!t):1&o?t+"":t,D=(t,o,e,r,l,a)=>{if(e===r)return;let c=i(t,o),d=o.toLowerCase();if("class"===o){const o=t.classList,n=P(e);let i=P(r);o.remove(...n.filter((t=>t&&!i.includes(t)))),o.add(...i.filter((t=>t&&!n.includes(t))))}else if("key"===o);else if(t.__lookupSetter__(o)\|\|"o"!==o[0]\|\|"n"!==o[1]){if("a"===o[0]&&o.startsWith("attr:")){const e=o.slice(5);let i;{const o=n(t);if(o&&o.o&&o.o.t){const t=o.o.t[e];t&&t[1]&&(i=t[1])}}return i\|\|(i=e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==r\|\|!1===r?!1===r&&""!==t.getAttribute(i)\|\|t.removeAttribute(i):t.setAttribute(i,!0===r?"":r))}if("p"===o[0]&&o.startsWith("prop:")){const e=o.slice(5);try{t[e]=r}catch(t){}return}{const n=S(r);if((c\|\|n&&null!==r)&&!l)try{if(t.tagName.includes("-"))t[o]!==r&&(t[o]=r);else{const n=null==r?"":r;"list"===o?c=!1:null!=e&&t[o]===n\|\|("function"==typeof t.__lookupSetter__(o)?t[o]=n:t.setAttribute(o,n))}}catch(t){}null==r\|\|!1===r?!1===r&&""!==t.getAttribute(o)\|\|t.removeAttribute(o):(!c\|\|4&a\|\|l)&&!n&&1===t.nodeType&&t.setAttribute(o,r=!0===r?"":r)}}else if(o="-"===o[2]?o.slice(3):i(s,d)?d.slice(2):d[2]+o.slice(3),e\|\|r){const n=o.endsWith(U);o=o.replace(N,""),e&&u.rel(t,o,e,n),r&&u.ael(t,o,r,n)}},H=/\s/,P=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(H):[]),U="Capture",N=RegExp(U+"$"),W=(t,o,e)=>{const n=11===o.$.nodeType&&o.$.host?o.$.host:o.$,i=t&&t.h\|\|{},r=o.h\|\|{};for(const t of V(Object.keys(i)))t in r\|\|D(n,t,i[t],void 0,e,o.l);for(const t of V(Object.keys(r)))D(n,t,i[t],r[t],e,o.l)};function V(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var q=!1,F=!1,T=(t,o,e)=>{const n=o.v[e];let i,r,l=0;if(null!=n._)i=n.$=s.document.createTextNode(n._);else{if(!s.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(i=n.$=s.document.createElement(n.k),W(null,n,F),n.v){const o="template"===n.k?i.content:i;for(l=0;l<n.v.length;++l)r=T(t,n,l),r&&o.appendChild(r)}}return i["s-hn"]=x,i},I=(t,o,e,n,i,r)=>{let l,a=t;for(a.shadowRoot&&a.tagName===x&&(a=a.shadowRoot),"template"===e.k&&(a=a.content);i<=r;++i)n[i]&&(l=T(null,e,i),l&&(n[i].$=l,G(a,l,o)))},Y=(t,o,e)=>{for(let n=o;n<=e;++n){const o=t[n];if(o){const t=o.$;t&&t.remove()}}},Z=(t,o,e=!1)=>t.k===o.k&&(e?(e&&!t.m&&o.m&&(t.m=o.m),!0):t.m===o.m),B=(t,o,e=!1)=>{const n=o.$=t.$,i=t.v,r=o.v,l=o._;null==l?("slot"!==o.k\|\|q\|\|t.j!==o.j&&(o.$["s-sn"]=o.j\|\|"",(t=>{u.l\|=1;const o=t.closest(x.toLowerCase());if(null!=o){const e=Array.from(o.__childNodes\|\|o.childNodes).find((t=>t["s-cr"])),n=Array.from(t.__childNodes\|\|t.childNodes);for(const t of e?n.reverse():n)null!=t["s-sh"]&&(G(o,t,null!=e?e:null),t["s-sh"]=void 0)}u.l&=-2})(o.$.parentElement)),W(t,o,F),null!==i&&null!==r?((t,o,e,n,i=!1)=>{let r,l,a=0,s=0,c=0,u=0,d=o.length-1,p=o[0],_=o[d],b=n.length-1,f=n[0],h=n[b];const v="template"===e.k?t.content:t;for(;a<=d&&s<=b;)if(null==p)p=o[++a];else if(null==_)_=o[--d];else if(null==f)f=n[++s];else if(null==h)h=n[--b];else if(Z(p,f,i))B(p,f,i),p=o[++a],f=n[++s];else if(Z(_,h,i))B(_,h,i),_=o[--d],h=n[--b];else if(Z(p,h,i))B(p,h,i),G(v,p.$,_.$.nextSibling),p=o[++a],h=n[--b];else if(Z(_,f,i))B(_,f,i),G(v,_.$,p.$),_=o[--d],f=n[++s];else{for(c=-1,u=a;u<=d;++u)if(o[u]&&null!==o[u].m&&o[u].m===f.m){c=u;break}c>=0?(l=o[c],l.k!==f.k?r=T(o&&o[s],e,c):(B(l,f,i),o[c]=void 0,r=l.$),f=n[++s]):(r=T(o&&o[s],e,s),f=n[++s]),r&&G(p.$.parentNode,r,p.$)}a>d?I(t,null==n[b+1]?null:n[b+1].$,e,n,s,b):s>b&&Y(o,a,d)})(n,i,o,r,e):null!==r?(null!==t._&&(n.textContent=""),I(n,null,o,r,0,r.length-1)):!e&&null!==i&&Y(i,0,i.length-1)):t._!==l&&(n.data=l)},G=(t,o,e)=>t.__insertBefore?t.__insertBefore(o,e):null==t?void 0:t.insertBefore(o,e),J=(t,o,e=!1)=>{const n=t.$hostElement$,i=t.o,r=t.O\|\|E(null,null),l=(t=>t&&t.k===C)(o)?o:z(null,null,o);if(x=n.tagName,i.S&&(l.h=l.h\|\|{},i.S.forEach((([t,o])=>{l.h[o]=n[t]}))),e&&l.h)for(const t of Object.keys(l.h))n.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(l.h[t]=n[t]);l.k=null,l.l\|=4,t.O=l,l.$=r.$=n.shadowRoot\|\|n,q=!(!(1&i.l)\|\|128&i.l),B(r,l,e)},K=(t,o)=>{if(o&&!t.C&&o["s-p"]){const e=o["s-p"].push(new Promise((n=>t.C=()=>{o["s-p"].splice(e-1,1),n()})))}},Q=(t,o)=>{if(t.l\|=16,4&t.l)return void(t.l\|=512);K(t,t.M);const e=()=>X(t,o);if(!o)return y(e);queueMicrotask((()=>{e()}))},X=(t,o)=>{const e=t.$hostElement$,n=e;if(!n)throw Error(`Can't render component <${e.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let i;return i=lt(n,o?"componentWillLoad":"componentWillUpdate",void 0,e),i=tt(i,(()=>lt(n,"componentWillRender",void 0,e))),tt(i,(()=>et(t,n,o)))},tt=(t,o)=>ot(t)?t.then(o).catch((t=>{console.error(t),o()})):o(),ot=t=>t instanceof Promise\|\|t&&t.then&&"function"==typeof t.then,et=async(t,o,e)=>{var n;const i=t.$hostElement$,r=i["s-rc"];e&&(t=>{const o=t.o,e=t.$hostElement$,n=o.l,i=((t,o)=>{var e,n,i;const r=O(o),a=l.get(r);if(!s.document)return r;if(t=11===t.nodeType?t:s.document,a)if("string"==typeof a){let i,l=j.get(t=t.head\|\|t);if(l\|\|j.set(t,l=new Set),!l.has(r)){i=s.document.createElement("style"),i.textContent=a;const c=null!=(e=u.A)?e:function(){var t,o,e;return null!=(e=null==(o=null==(t=s.document.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:o.getAttribute("content"))?e:void 0}();if(null!=c&&i.setAttribute("nonce",c),!(1&o.l))if("HEAD"===t.nodeName){const o=t.querySelectorAll("link[rel=preconnect]"),e=o.length>0?o[o.length-1].nextSibling:t.querySelector("style");t.insertBefore(i,(null==e?void 0:e.parentNode)===t?e:null)}else if("host"in t)if(d){const o=new(null!=(n=t.defaultView)?n:t.ownerDocument.defaultView).CSSStyleSheet;o.replaceSync(a),p?t.adoptedStyleSheets.unshift(o):t.adoptedStyleSheets=[o,...t.adoptedStyleSheets]}else{const o=t.querySelector("style");o?o.textContent=a+o.textContent:t.prepend(i)}else t.append(i);1&o.l&&t.insertBefore(i,null),4&o.l&&(i.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),l&&l.add(r)}}else{let o=j.get(t);if(o\|\|j.set(t,o=new Set),!o.has(r)){const e=null!=(i=t.defaultView)?i:t.ownerDocument.defaultView;let n;if(a.constructor===e.CSSStyleSheet)n=a;else{n=new e.CSSStyleSheet;for(let t=0;t<a.cssRules.length;t++)n.insertRule(a.cssRules[t].cssText,t)}p?t.adoptedStyleSheets.push(n):t.adoptedStyleSheets=[...t.adoptedStyleSheets,n],o.add(r)}}return r})(e.shadowRoot?e.shadowRoot:e.getRootNode(),o);10&n&&(e["s-sc"]=i,e.classList.add(i+"-h"))})(t);nt(t,o,i,e),r&&(r.map((t=>t())),i["s-rc"]=void 0);{const o=null!=(n=i["s-p"])?n:[],e=()=>it(t);0===o.length?e():(Promise.all(o).then(e).catch(e),t.l\|=4,o.length=0)}},nt=(t,o,e,n)=>{try{o=o.render(),t.l&=-17,t.l\|=2,J(t,o,n)}catch(o){r(o,t.$hostElement$)}return null},it=t=>{const o=t.$hostElement$,e=o,n=t.M;lt(e,"componentDidRender",void 0,o),64&t.l?lt(e,"componentDidUpdate",void 0,o):(t.l\|=64,at(o),lt(e,"componentDidLoad",void 0,o),t.L(o),n\|\|rt()),t.C&&(t.C(),t.C=void 0),512&t.l&&g((()=>Q(t,!1))),t.l&=-517},rt=()=>{g((()=>(t=>{const o=u.ce("appload",{detail:{namespace:"pixel"}});return t.dispatchEvent(o),o})(s)))},lt=(t,o,e,n)=>{if(t&&t[o])try{return t[o](e)}catch(t){r(t,n)}},at=t=>t.classList.add("hydrated"),st=(t,o,e,i)=>{const r=n(t);if(!r)return;const l=t,a=r.i.get(o),s=r.l,c=l;if((e=R(e,i.t[o][0],!!(64&i.l)))!==a&&(!Number.isNaN(a)\|\|!Number.isNaN(e))&&(r.i.set(o,e),2&s)){if(c.componentShouldUpdate&&!1===c.componentShouldUpdate(e,a,o)&&!(16&s))return;16&s\|\|Q(r,!1)}},ct=(o,e,i)=>{var r,l;const s=o.prototype;if(64&e.l&&1&i&&a.forEach((t=>{const o=s[t];Object.defineProperty(s,t,{value(...e){var i;const r=n(this),l=this;l?"function"==typeof o&&o.call(l,...e):null==(i=null==r?void 0:r.R)\|\|i.then((o=>{const n=o[t];"function"==typeof n&&n.call(o,...e)}))}})})),e.t){const i=Object.entries(null!=(r=e.t)?r:{});i.map((([o,[i]])=>{if(31&i\|\|32&i){const{get:r,set:l}=t(s,o)\|\|{};r&&(e.t[o][0]\|=2048),l&&(e.t[o][0]\|=4096),Object.defineProperty(s,o,{get(){return r?r.apply(this):((t,o)=>n(this).i.get(o))(0,o)},configurable:!0,enumerable:!0}),Object.defineProperty(s,o,{set(t){const r=n(this);if(r){if(l)return void 0===(32&i?this[o]:r.$hostElement$[o])&&r.i.get(o)&&(t=r.i.get(o)),l.call(this,R(t,i,!!(64&e.l))),void st(this,o,t=32&i?this[o]:r.$hostElement$[o],e);st(this,o,t,e)}}})}}));{const t=new Map;s.attributeChangedCallback=function(o,r,l){u.jmp((()=>{var a;const c=t.get(o),u=n(this);if(this.hasOwnProperty(c),s.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==l)return;if(null==c){const t=null==u?void 0:u.l;if(u&&t&&!(8&t)&&l!==r){const n=this,i=null==(a=e.D)?void 0:a[o];null==i\|\|i.forEach((e=>{const[[i,a]]=Object.entries(e);null!=n[i]&&(128&t\|\|1&a)&&n[i].call(n,l,r,o)}))}return}const d=i.find((([t])=>t===c));d&&4&d[1][0]&&(l=null!==l&&"false"!==l);const p=Object.getOwnPropertyDescriptor(s,c);l==this[c]\|\|p.get&&!p.set\|\|(this[c]=l)}))},o.observedAttributes=Array.from(new Set([...Object.keys(null!=(l=e.D)?l:{}),...i.filter((([t,o])=>31&o[0])).map((([o,n])=>{var i;const r=n[1]\|\|o;return t.set(r,o),512&n[0]&&(null==(i=e.S)\|\|i.push([o,r])),r}))]))}}return o},ut=(t,o)=>o,dt=t=>u.A=t,pt=t=>Object.assign(u,t);function _t(t,o){J({o:{l:0,p:o.tagName},$hostElement$:o},t)}const bt=((t,o)=>{const i={l:321,p:o[1]};try{i.t=o[2],i.S=[];const a=t.prototype.connectedCallback,s=t.prototype.disconnectedCallback;return Object.assign(t.prototype,{__hasHostListenerAttached:!1,__registerHost(){((t,o)=>{const n={l:0,$hostElement$:t,o,i:new Map,H:new Map};n.R=new Promise((t=>n.L=t)),t["s-p"]=[],t["s-rc"]=[];const i=n;t.__stencil__getHostRef=()=>i,512&o.l&&e(t,n)})(this,i)},connectedCallback(){if(!this.__hasHostListenerAttached){if(!n(this))return;this.__hasHostListenerAttached=!0}(t=>{if(!(1&u.l)){const o=n(t);if(!o)return;const e=o.o,i=()=>{};if(1&o.l)(null==o?void 0:o.P)\|\|(null==o?void 0:o.R)&&o.R.then((()=>{}));else{o.l\|=1;{let e=t;for(;e=e.parentNode\|\|e.host;)if(e["s-p"]){K(o,o.M=e);break}}e.t&&Object.entries(e.t).map((([o,[e]])=>{if(31&e&&Object.prototype.hasOwnProperty.call(t,o)){const e=t[o];delete t[o],t[o]=e}})),(async(t,o,e)=>{let n;try{if(!(32&o.l)&&(o.l\|=32,n=t.constructor,customElements.whenDefined(t.localName).then((()=>o.l\|=128)),n&&n.style)){let t;"string"==typeof n.style&&(t=n.style);const o=O(e);if(!l.has(o)){const n=()=>{};((t,o,e)=>{let n=l.get(t);d&&e?(n=n\|\|new CSSStyleSheet,"string"==typeof n?n=o:n.replaceSync(o)):n=o,l.set(t,n)})(o,t,!!(1&e.l)),n()}}const i=o.M,r=()=>Q(o,!0);i&&i["s-rc"]?i["s-rc"].push(r):r()}catch(e){r(e,t),o.C&&(o.C(),o.C=void 0),o.L&&o.L(t)}})(t,o,e)}i()}})(this),a&&a.call(this)},disconnectedCallback(){(async t=>{j.has(t)&&j.delete(t),t.shadowRoot&&j.has(t.shadowRoot)&&j.delete(t.shadowRoot)})(this),s&&s.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${i.p}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else w.call(this,i)}}),Object.defineProperty(t,"is",{value:i.p,configurable:!0}),ct(t,i,3)}catch(o){return r(o),t}})(class extends c{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.internals=this.attachInternals(),this.hasLabel=!1,this.variant="primary",this.loading=!1,this.disabled=!1,this.type="submit",this.size="medium",this.alignIcon="start",this.onLabelSlotChange=t=>{this.hasLabel=t.target.assignedNodes({flatten:!0}).length>0},this.handleClick=()=>"submit"===this.type?this.internals.form?.requestSubmit():"reset"===this.type?this.internals.form?.reset():void 0}render(){const t=this.disabled\|\|this.loading;return z("button",{key:"189a34d11d0eaf9f38b4ad67f03b667a1f99dc98",class:`ip-button ip-button--${this.variant} ip-button--${this.size}`,type:"button",disabled:t,"aria-disabled":t?"true":"false","aria-busy":this.loading?"true":"false",onClick:this.handleClick},"start"===this.alignIcon&&z("slot",{key:"icon-start",name:"icon"}),this.hasLabel?z("span",{class:"ip-button__label ip-button__label--"+this.size},z("slot",{onSlotchange:this.onLabelSlotChange})):z("slot",{onSlotchange:this.onLabelSlotChange}),"end"===this.alignIcon&&z("slot",{key:"icon-end",name:"icon"}),this.loading&&z(ut,{key:"7d5a974c032312542c8da5fa86e59a25e8767927"},z("span",{key:"0820cc198b8ff5e7972fc8896e51d9d6e089ebd2",class:"ip-button__spinner","aria-hidden":"true"}),z("span",{key:"b3de2202841f2c169e09ee28413d6c60109ebe93",class:"ip-button__sr-only"},"Loading...")))}static get formAssociated(){return!0}static get style(){return".ip-button{border:none;border-radius:var(--ip_radius_size_medium);margin:0;cursor:pointer;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ip_typography_font_family_primary);transition:background-color 150ms ease-in-out, color 150ms ease-in-out}.ip-button:disabled{cursor:not-allowed}.ip-button:focus-visible{outline:2px solid var(--ip_color_button_focus_default);outline-offset:2px}.ip-button--small{padding:var(--ip_spacing_space_100) var(--ip_spacing_space_150);gap:var(--ip_spacing_space_125);font-size:var(--ip_typography_body_font_size_small)}.ip-button--medium{padding:var(--ip_spacing_space_125) var(--ip_spacing_space_200);gap:var(--ip_spacing_space_150);font-size:var(--ip_typography_body_font_size_medium)}.ip-button--large{padding:var(--ip_spacing_space_150) var(--ip_spacing_space_250);gap:var(--ip_spacing_space_200);font-size:var(--ip_typography_body_font_size_large)}.ip-button--primary{background-color:var(--ip_color_button_background_primary_default);color:var(--ip_color_button_text_primary_default)}.ip-button--primary:hover:not(:disabled){background-color:var(--ip_color_button_background_primary_hover)}.ip-button--primary:active:not(:disabled){background-color:var(--ip_color_button_background_primary_active)}.ip-button--primary:disabled{background-color:var(--ip_color_button_background_primary_disabled);color:var(--ip_color_button_text_primary_disabled)}.ip-button--secondary{background-color:var(--ip_color_button_background_secondary_default);color:var(--ip_color_button_text_secondary_default)}.ip-button--secondary:hover:not(:disabled){background-color:var(--ip_color_button_background_secondary_hover)}.ip-button--secondary:active:not(:disabled){background-color:var(--ip_color_button_background_secondary_active)}.ip-button--secondary:disabled{background-color:var(--ip_color_button_background_secondary_disabled);color:var(--ip_color_button_text_secondary_disabled)}.ip-button--tertiary{background-color:var(--ip_color_button_background_tertiary_default);color:var(--ip_color_button_text_tertiary_default)}.ip-button--tertiary:hover:not(:disabled){background-color:var(--ip_color_button_background_tertiary_hover)}.ip-button--tertiary:active:not(:disabled){background-color:var(--ip_color_button_background_tertiary_active)}.ip-button--tertiary:disabled{background-color:var(--ip_color_button_background_tertiary_disabled);color:var(--ip_color_button_text_tertiary_disabled)}.ip-button--brand{background-color:var(--ip_color_button_background_brand_default);color:var(--ip_color_button_text_brand_default)}.ip-button--brand:hover:not(:disabled){background-color:var(--ip_color_button_background_brand_hover)}.ip-button--brand:active:not(:disabled){background-color:var(--ip_color_button_background_brand_active)}.ip-button--brand:disabled{background-color:var(--ip_color_button_background_brand_disabled);color:var(--ip_color_button_text_brand_disabled)}.ip-button--destructive{background-color:var(--ip_color_button_background_destructive_default);color:var(--ip_color_button_text_destructive_default)}.ip-button--destructive:hover:not(:disabled){background-color:var(--ip_color_button_background_destructive_hover)}.ip-button--destructive:active:not(:disabled){background-color:var(--ip_color_button_background_destructive_active)}.ip-button--destructive:disabled{background-color:var(--ip_color_button_background_destructive_disabled);color:var(--ip_color_button_text_destructive_disabled)}.ip-button__label{display:inline-flex;align-items:center}.ip-button__label--small{height:18px}.ip-button__label--medium{height:20px}.ip-button__label--large{height:22px}.ip-button__spinner{width:0.75em;height:0.75em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ip-button-spin 900ms linear infinite;flex-shrink:0}.ip-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes ip-button-spin{to{transform:rotate(360deg)}}::slotted([slot=icon]){display:inline-flex !important;align-items:center;justify-content:center}:host([size=small]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_small);width:18px !important;height:18px !important}:host([size=medium]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_medium);width:20px !important;height:20px !important}:host([size=large]) ::slotted([slot=icon]){font-size:var(--ip_iconography_size_large);width:22px !important;height:22px !important}"}},[321,"ip-button",{variant:[513],loading:[516],disabled:[516],type:[513],size:[513],alignIcon:[513,"align-icon"],hasLabel:[32]}]);function ft(){"undefined"!=typeof customElements&&["ip-button"].forEach((t=>{"ip-button"===t&&(customElements.get(t)\|\|customElements.define(t,bt))}))}ft();export{bt as IpButton,ft as d,k as getAssetPath,_t as render,$ as setAssetPath,dt as setNonce,pt as setPlatformOptions}
1	+ export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BWyvzXuA.js";export{I as IpButton}from"./p-Ci0xGmLx.js";export{I as IpIconButton}from"./p-COraaQeZ.js";export{I as IpTooltip}from"./p-D9Ju9vYr.js";

package/dist/web-components/components/ip-button/llm.md CHANGED Viewed

@@ -8,14 +8,15 @@ Clickable button component with support for visual variants, loading state, and
 ## Attributes
-| Attribute   | Type    | Default     | Values                                                               |
-| ----------- | ------- | ----------- | -------------------------------------------------------------------- |
-| `variant`   | string  | `"primary"` | `"primary"`, `"secondary"`, `"tertiary"`, `"brand"`, `"destructive"` |
-| `size`      | string  | `"medium"`  | `"small"`, `"medium"`, `"large"`                                     |
-| `loading`   | boolean | `false`     | `true`, `false`                                                      |
-| `disabled`  | boolean | `false`     | `true`, `false`                                                      |
-| `type`      | string  | `"submit"`  | `"submit"`, `"reset"`, `"button"`                                    |
-| `alignIcon` | string  | `"start"`   | `"start"`, `"end"`                                                   |
+| Attribute    | Type    | Default     | Values                                                               |
+| ------------ | ------- | ----------- | -------------------------------------------------------------------- |
+| `variant`    | string  | `"primary"` | `"primary"`, `"secondary"`, `"tertiary"`, `"brand"`, `"destructive"` |
+| `size`       | string  | `"medium"`  | `"small"`, `"medium"`, `"large"`                                     |
+| `loading`    | boolean | `false`     | `true`, `false`                                                      |
+| `disabled`   | boolean | `false`     | `true`, `false`                                                      |
+| `type`       | string  | `"submit"`  | `"submit"`, `"reset"`, `"button"`                                    |
+| `alignIcon`  | string  | `"start"`   | `"start"`, `"end"`                                                   |
+| `aria-label` | string  | —           | Any string                                                           |
 **size** — Controls the size of the button. Defaults to `"medium"`. Affects padding, gap, and font size.
@@ -57,6 +58,8 @@ Clickable button component with support for visual variants, loading state, and
 | _(default)_ | Button label text                                                                    |
 | `icon`      | Optional icon. Position is controlled by the `alignIcon` prop (`"start"` or `"end"`) |
+> **Icon-only buttons:** When no label text is slotted, the button has no visible accessible name. In this case, set `aria-label` on the `<ip-button>` host element — it is automatically forwarded to the inner `<button>`. Example: `<ip-button aria-label="Delete item"><i slot="icon">…</i></ip-button>`.
 ## Other Tokens
 | SCSS variable                        | CSS variable                          | Description                   |
@@ -151,10 +154,14 @@ import { IpButton } from '@norconsult-digital-public/isypixel/web-components/rea
 ### Vue
-```tsx
+```vue
+<script setup lang="ts">
 import { IpButton } from '@norconsult-digital-public/isypixel/web-components/vue';
+</script>
-<IpButton variant='primary'>Click me</IpButton>;
+<template>
+  <IpButton variant="primary">Click me</IpButton>
+</template>
 ```
 ### Angular

package/dist/web-components/components/ip-button.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{~~IpButton~~ as o,d as t}from"./~~index~~.js";const s=o,n=t;export{s as IpButton,n as defineCustomElement}
1	+ import{I as o,d as s}from"./p-Ci0xGmLx.js";const m=o,p=s;export{m as IpButton,p as defineCustomElement}

package/dist/web-components/components/ip-icon-button/llm.md ADDED Viewed

@@ -0,0 +1,108 @@
+# ip-icon-button
+A circular icon-only button with a CSS ripple on click and a built-in tooltip on hover. Available in the same five visual variants as `ip-button`. Requires a `label` attribute for screen reader accessibility — `label` is also used as the tooltip text by default.
+## Attributes
+| Attribute        | Type    | Default     | Allowed values                                                               | Description                                                                                                                                                                   |
+| ---------------- | ------- | ----------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`        | string  | `"primary"` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"brand"` \| `"destructive"` | Visual variant of the button.                                                                                                                                                 |
+| `size`           | string  | `"medium"`  | `"small"` \| `"medium"` \| `"large"`                                         | Controls the size of the button. Affects padding and icon size.                                                                                                               |
+| `disabled`       | boolean | `false`     | —                                                                            | Disables the button. Also set implicitly when `loading` is `true`.                                                                                                            |
+| `loading`        | boolean | `false`     | —                                                                            | Replaces the icon with a spinner and disables interaction. Renders a screen-reader-only "Loading..." text.                                                                    |
+| `type`           | string  | `"button"`  | `"button"` \| `"submit"` \| `"reset"`                                        | Controls form behaviour. Defaults to `"button"` to prevent accidental form submission.                                                                                        |
+| `label`          | string  | `""`        | —                                                                            | **Required.** Sets `aria-label` for screen readers and is used as the default tooltip text. When empty, the tooltip is implicitly hidden and a development warning is logged. |
+| `disableTooltip` | boolean | `false`     | —                                                                            | Hides the built-in tooltip. Useful when the button is already described by surrounding context.                                                                               |
+## Slots
+| Slot      | Description                                                                                  |
+| --------- | -------------------------------------------------------------------------------------------- |
+| `icon`    | The icon element to display. Hidden when `loading` is `true`. Typically an `<i>` or `<svg>`. |
+| `tooltip` | Optional HTML override for the tooltip content. When omitted, the `label` value is used.     |
+## Size tokens
+| Size     | Padding (all sides)     | Icon size                            |
+| -------- | ----------------------- | ------------------------------------ |
+| `small`  | `$ip_spacing_space_100` | `$ip_iconography_size_small` (18px)  |
+| `medium` | `$ip_spacing_space_125` | `$ip_iconography_size_medium` (20px) |
+| `large`  | `$ip_spacing_space_150` | `$ip_iconography_size_large` (22px)  |
+## Color tokens
+| Token                                                                 | Description                                            |
+| --------------------------------------------------------------------- | ------------------------------------------------------ |
+| `$ip_color_icon_button_background_primary_default`                    | Primary background, default state                      |
+| `$ip_color_icon_button_background_primary_hover`                      | Primary background, hover state                        |
+| `$ip_color_icon_button_background_primary_active`                     | Primary background, active state                       |
+| `$ip_color_button_background_[variant]_default/hover/active/disabled` | Background for secondary, tertiary, brand, destructive |
+| `$ip_color_button_icon_[variant]_default`                             | Icon color, default state                              |
+| `$ip_color_button_icon_[variant]_disabled`                            | Icon color, disabled state                             |
+| `$ip_color_button_focus_default`                                      | Focus outline color                                    |
+## Usage examples
+### HTML
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+<!-- With HTML tooltip override -->
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+  <span slot="tooltip">Save <strong>document</strong></span>
+</ip-icon-button>
+```
+### React
+```tsx
+import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/react';
+<IpIconButton label='Save' variant='primary'>
+  <i slot='icon' className='fas fa-floppy-disk' />
+</IpIconButton>;
+```
+### Vue
+```html
+<IpIconButton label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk" />
+</IpIconButton>
+```
+### Angular
+```ts
+import { IpIconButton } from '@norconsult-digital-public/isypixel/web-components/angular';
+```
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```
+### Svelte
+```html
+<script>
+  import '@norconsult-digital-public/isypixel/web-components/ip-icon-button.js';
+</script>
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```
+### Blazor
+```html
+<ip-icon-button label="Save" variant="primary">
+  <i slot="icon" class="fas fa-floppy-disk"></i>
+</ip-icon-button>
+```

package/dist/web-components/components/ip-icon-button.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+interface IpIconButton extends Components.IpIconButton, HTMLElement {}
+export const IpIconButton: {
+    prototype: IpIconButton;
+    new (): IpIconButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/web-components/components/ip-icon-button.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import{I as a,d as o}from"./p-COraaQeZ.js";const r=a,s=o;export{r as IpIconButton,s as defineCustomElement}