@api-client/ui 0.5.47 → 0.5.49

package/build/src/md/collapse/internals/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { UiElement } from '../../UiElement.js'\nimport { setDisabled } from '../../../lib/disabled.js'\n\n/**\n * @fires transitioning - When the element is transitioning.\n * @slot - Main slot for the content\n */\nexport default class UiCollapse extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Set noAnimation to true to disable animations.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true }) accessor noAnimation: boolean | undefined\n\n  /**\n   * Renders the collapse horizontally when true and vertically otherwise\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor horizontal = false\n\n  /**\n   * Set opened to true to show the collapse element and to false to hide it.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  get dimension(): 'width' | 'height' {\n    return this.horizontal ? 'width' : 'height'\n  }\n\n  /**\n   * `maxWidth` or `maxHeight`.\n   * @private\n   */\n  get dimensionMax(): 'maxWidth' | 'maxHeight' {\n    return this.horizontal ? 'maxWidth' : 'maxHeight'\n  }\n\n  /**\n   * `max-width` or `max-height`.\n   * @private\n   */\n  get dimensionMaxCss(): 'max-width' | 'max-height' {\n    return this.horizontal ? 'max-width' : 'max-height'\n  }\n\n  get isAttached(): boolean {\n    return !!this.parentNode\n  }\n\n  protected transitioningInternal = false\n\n  /**\n   * @return When true, the element is transitioning its open state. When false,\n   * the element has finished opening/closing.\n   */\n  get transitioning(): boolean {\n    return this.transitioningInternal\n  }\n\n  /**\n   * Stores the desired size of the collapse body.\n   */\n  protected desiredSize = ''\n\n  constructor() {\n    super()\n    this.addEventListener('transitionend', this.handleTransitionEnd.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group')\n    }\n    if (!this.hasAttribute('aria-hidden')) {\n      this.setAttribute('aria-hidden', 'true')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      this.handleOpenChange()\n    }\n    if (cp.has('horizontal')) {\n      this.handleHorizontalChange()\n    }\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n    super.willUpdate(cp)\n  }\n\n  /**\n   * Toggle the opened state.\n   */\n  toggle(): void {\n    this.open = !this.open\n    this.dispatchEvent(new Event('open'))\n  }\n\n  /**\n   * Updates the size of the element.\n   * @param size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.\n   * @param animated if `true` updates the size with an animation, otherwise without.\n   */\n  protected updateSize(size: string, animated?: boolean): void {\n    // Consider 'auto' as '', to take full size.\n    let sizeValue = size === 'auto' ? '' : size\n\n    let willAnimate = animated && !this.noAnimation && this.isAttached\n    this.desiredSize = sizeValue\n\n    this.updateTransition(false)\n    // If we can animate, must do some prep work.\n    if (willAnimate) {\n      // Animation will start at the current size.\n      const startSize = this.calcSize()\n      // For `auto` we must calculate what is the final size for the animation.\n      // After the transition is done, _transitionEnd will set the size back to\n      // `auto`.\n      if (sizeValue === '') {\n        this.style[this.dimensionMax] = ''\n        sizeValue = this.calcSize()\n      }\n      // Go to startSize without animation.\n\n      this.style[this.dimensionMax] = startSize\n      // Force layout to ensure transition will go. Set scrollTop to itself\n      // so that compilers won't remove it.\n      // eslint-disable-next-line no-self-assign\n      this.scrollTop = this.scrollTop\n      // Enable animation.\n      this.updateTransition(true)\n      // If final size is the same as startSize it will not animate.\n      willAnimate = sizeValue !== startSize\n    }\n    // Set the final size.\n\n    this.style[this.dimensionMax] = sizeValue\n    // If it won't animate, call transitionEnd to set correct styles.\n    if (!willAnimate) {\n      this.transitionEnd()\n    }\n  }\n\n  protected updateTransition(enabled?: boolean): void {\n    this.style.transitionDuration = enabled && !this.noAnimation ? '' : '0s'\n  }\n\n  /**\n   * Calculates the size of the element when opened.\n   */\n  protected calcSize(): string {\n    const value = this.getBoundingClientRect()[this.dimension]\n    return `${value}px`\n  }\n\n  protected transitionEnd(): void {\n    this.style[this.dimensionMax] = this.desiredSize\n    this.toggleAttribute('collapse-closed', !this.open)\n    this.toggleAttribute('collapse-opened', this.open)\n    this.updateTransition(false)\n    this.notifyResize()\n    this.transitioningInternal = false\n    this.notifyTransitioning()\n  }\n\n  protected notifyResize(): void {\n    this.dispatchEvent(new Event('resize', { bubbles: true, composed: true, cancelable: true }))\n  }\n\n  protected notifyTransitioning(): void {\n    this.dispatchEvent(new Event('transitioning', { bubbles: true, composed: true, cancelable: true }))\n  }\n\n  protected handleTransitionEnd(e: Event): void {\n    const target = e.composedPath().find((node) => node === this)\n    if (target) {\n      this.transitionEnd()\n    }\n  }\n\n  protected handleOpenChange(): void {\n    const { open } = this\n    this.setAttribute('aria-hidden', String(!open))\n    this.transitioningInternal = true\n    this.notifyTransitioning()\n    this.toggleAttribute('collapse-closed', false)\n    this.toggleAttribute('collapse-opened', false)\n    this.updateSize(open ? 'auto' : '0px', true)\n\n    // Focus the current collapse.\n    if (open) {\n      this.focus()\n    }\n  }\n\n  protected handleHorizontalChange(): void {\n    this.style.transitionProperty = this.dimensionMaxCss\n    const otherDimension = this.dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth'\n    this.style[otherDimension] = ''\n    this.updateSize(this.open ? 'auto' : '0px', false)\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`\n  }\n}\n"]}
+{"version":3,"file":"Collapse.js","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { UiElement } from '../../UiElement.js'\nimport { setDisabled } from '../../../lib/disabled.js'\n\n/**\n * @fires transitioning - When the element is transitioning.\n * @slot - Main slot for the content\n */\nexport default class UiCollapse extends UiElement {\n  /**\n   * Whether the chip is disabled. The user can't interact with the chip when `true`.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Set noAnimation to true to disable animations.\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true }) accessor noAnimation: boolean | undefined\n\n  /**\n   * Renders the collapse horizontally when true and vertically otherwise\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor horizontal = false\n\n  /**\n   * Set opened to true to show the collapse element and to false to hide it.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  get dimension(): 'width' | 'height' {\n    return this.horizontal ? 'width' : 'height'\n  }\n\n  /**\n   * `maxWidth` or `maxHeight`.\n   * @private\n   */\n  get dimensionMax(): 'maxWidth' | 'maxHeight' {\n    return this.horizontal ? 'maxWidth' : 'maxHeight'\n  }\n\n  /**\n   * `max-width` or `max-height`.\n   * @private\n   */\n  get dimensionMaxCss(): 'max-width' | 'max-height' {\n    return this.horizontal ? 'max-width' : 'max-height'\n  }\n\n  get isAttached(): boolean {\n    return !!this.parentNode\n  }\n\n  protected transitioningInternal = false\n\n  /**\n   * @return When true, the element is transitioning its open state. When false,\n   * the element has finished opening/closing.\n   */\n  get transitioning(): boolean {\n    return this.transitioningInternal\n  }\n\n  /**\n   * Stores the desired size of the collapse body.\n   */\n  protected desiredSize = ''\n\n  constructor() {\n    super()\n    this.addEventListener('transitionend', this.handleTransitionEnd.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group')\n    }\n    if (!this.hasAttribute('aria-hidden')) {\n      this.setAttribute('aria-hidden', 'true')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('open')) {\n      this.handleOpenChange()\n    }\n    if (cp.has('horizontal')) {\n      this.handleHorizontalChange()\n    }\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n    super.willUpdate(cp)\n  }\n\n  /**\n   * Toggle the opened state.\n   */\n  toggle(): void {\n    this.open = !this.open\n    this.dispatchEvent(new Event('toggle'))\n  }\n\n  /**\n   * Updates the size of the element.\n   * @param size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.\n   * @param animated if `true` updates the size with an animation, otherwise without.\n   */\n  protected updateSize(size: string, animated?: boolean): void {\n    // Consider 'auto' as '', to take full size.\n    let sizeValue = size === 'auto' ? '' : size\n\n    let willAnimate = animated && !this.noAnimation && this.isAttached\n    this.desiredSize = sizeValue\n\n    this.updateTransition(false)\n    // If we can animate, must do some prep work.\n    if (willAnimate) {\n      // Animation will start at the current size.\n      const startSize = this.calcSize()\n      // For `auto` we must calculate what is the final size for the animation.\n      // After the transition is done, _transitionEnd will set the size back to\n      // `auto`.\n      if (sizeValue === '') {\n        // Temporarily remove constraint to measure natural size\n        const currentMaxDimension = this.style[this.dimensionMax]\n        this.style[this.dimensionMax] = ''\n        sizeValue = this.calcSize()\n        this.style[this.dimensionMax] = currentMaxDimension\n      }\n      // Go to startSize without animation.\n\n      this.style[this.dimensionMax] = startSize\n      // Force layout to ensure transition will go. Set scrollTop to itself\n      // so that compilers won't remove it.\n      // eslint-disable-next-line no-self-assign\n      this.scrollTop = this.scrollTop\n      // Enable animation.\n      this.updateTransition(true)\n      // If final size is the same as startSize it will not animate.\n      willAnimate = sizeValue !== startSize\n    }\n    // Set the final size.\n\n    this.style[this.dimensionMax] = sizeValue\n    // If it won't animate, call transitionEnd to set correct styles.\n    if (!willAnimate) {\n      this.transitionEnd()\n    }\n  }\n\n  protected updateTransition(enabled?: boolean): void {\n    this.style.transitionDuration = enabled && !this.noAnimation ? '' : '0s'\n  }\n\n  /**\n   * Calculates the size of the element when opened.\n   */\n  protected calcSize(): string {\n    const value = this.getBoundingClientRect()[this.dimension]\n    return `${value}px`\n  }\n\n  protected transitionEnd(): void {\n    this.style[this.dimensionMax] = this.desiredSize\n    this.toggleAttribute('collapse-closed', !this.open)\n    this.toggleAttribute('collapse-opened', this.open)\n    this.updateTransition(false)\n    this.notifyResize()\n    this.transitioningInternal = false\n    this.notifyTransitioning()\n  }\n\n  protected notifyResize(): void {\n    this.dispatchEvent(new Event('resize', { bubbles: true, composed: true, cancelable: true }))\n  }\n\n  protected notifyTransitioning(): void {\n    this.dispatchEvent(new Event('transitioning', { bubbles: true, composed: true, cancelable: true }))\n  }\n\n  protected handleTransitionEnd(e: Event): void {\n    const target = e.composedPath().find((node) => node === this)\n    if (target) {\n      this.transitionEnd()\n    }\n  }\n\n  protected handleOpenChange(): void {\n    const { open } = this\n    this.setAttribute('aria-hidden', String(!open))\n    this.transitioningInternal = true\n    this.notifyTransitioning()\n    this.toggleAttribute('collapse-closed', false)\n    this.toggleAttribute('collapse-opened', false)\n    this.updateSize(open ? 'auto' : '0px', true)\n\n    // Focus the current collapse.\n    if (open) {\n      this.focus()\n    }\n  }\n\n  protected handleHorizontalChange(): void {\n    this.style.transitionProperty = this.dimensionMaxCss\n    const otherDimension = this.dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth'\n    this.style[otherDimension] = ''\n    this.updateSize(this.open ? 'auto' : '0px', false)\n  }\n\n  override render(): TemplateResult {\n    return html`<slot></slot>`\n  }\n}\n"]}

package/build/src/md/collapse/internals/Collapse.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.styles.ts"],"names":[],"mappings":";AAEA,wBAeC"}
+{"version":3,"file":"Collapse.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.styles.ts"],"names":[],"mappings":";AAEA,wBAgBC"}

package/build/src/md/collapse/internals/Collapse.styles.js

@@ -4,6 +4,7 @@ export default css `
     display: block;
     transition-duration: var(--ui-collapse-transition-duration, 300ms);
     transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    transition-property: max-height, max-width;
     overflow: visible;
   }
 

package/build/src/md/collapse/internals/Collapse.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.styles.js","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;CAejB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    transition-duration: var(--ui-collapse-transition-duration, 300ms);\n    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);\n    overflow: visible;\n  }\n\n  :host([collapse-closed]) {\n    display: none;\n  }\n\n  :host(:not([collapse-opened])) {\n    overflow: hidden;\n  }\n`\n"]}
+{"version":3,"file":"Collapse.styles.js","sourceRoot":"","sources":["../../../../../src/md/collapse/internals/Collapse.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    transition-duration: var(--ui-collapse-transition-duration, 300ms);\n    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);\n    transition-property: max-height, max-width;\n    overflow: visible;\n  }\n\n  :host([collapse-closed]) {\n    display: none;\n  }\n\n  :host(:not([collapse-opened])) {\n    overflow: hidden;\n  }\n`\n"]}

package/build/src/md/focus-ring/internals/focus-ring.d.ts

@@ -0,0 +1,87 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * A focus ring component that provides a visible focus indicator.
+ * This component automatically manages the visibility of the focus ring
+ * based on the focus state of its control element.
+ *
+ * @fires visibility-changed - Dispatched when the focus ring visibility changes.
+ *                           - `detail`: An object with a `visible` property (boolean).
+ */
+export default class UiFocusRing extends LitElement {
+    /**
+     * The control element that this focus ring is associated with.
+     * When the control gains or loses focus, the focus ring will show or hide.
+     */
+    accessor control: HTMLElement | undefined;
+    /**
+     * An element to attach the focus ring to. Defaults to the parent element.
+     * This is typically used when the focus ring should be positioned relative
+     * to a different element than the control.
+     */
+    accessor attach: HTMLElement | undefined;
+    /**
+     * An ID of an element that this focus ring is for.
+     * Alternative to setting the `control` property directly.
+     * @attribute
+     */
+    accessor for: string | undefined;
+    /**
+     * Whether the focus ring should render inward instead of outward.
+     * When true, the focus ring will be positioned inside the control bounds.
+     * @attribute
+     */
+    accessor inward: boolean;
+    /**
+     * The internal visibility state of the focus ring.
+     */
+    accessor visible: boolean;
+    private abortController?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Sets up the control element and event listeners.
+     */
+    private setupControl;
+    /**
+     * Cleans up event listeners.
+     */
+    private cleanupListeners;
+    /**
+     * Gets the control element from either the `control` property,
+     * the `for` attribute, or defaults to the parent element.
+     */
+    private getControl;
+    /**
+     * Handles focus events from the control element.
+     */
+    private handleFocus;
+    /**
+     * Handles blur events from the control element.
+     */
+    private handleBlur;
+    /**
+     * Handles pointer down events to hide focus ring during mouse interaction.
+     */
+    private handlePointerDown;
+    /**
+     * Determines if the focus ring should be shown based on the focus event.
+     * The focus ring should only show for keyboard navigation, not mouse clicks.
+     */
+    private shouldShowFocusRing;
+    /**
+     * Shows the focus ring.
+     */
+    show(): void;
+    /**
+     * Hides the focus ring.
+     */
+    hide(): void;
+    /**
+     * Handles the visibility changed event.
+     */
+    private onVisibilityChanged;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+//# sourceMappingURL=focus-ring.d.ts.map

package/build/src/md/focus-ring/internals/focus-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.d.ts","sourceRoot":"","sources":["../../../../../src/md/focus-ring/internals/focus-ring.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGrD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD;;;OAGG;IACyB,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,CAAA;IAErE;;;;OAIG;IACyB,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,SAAS,CAAA;IAEpE;;;;OAIG;IACyB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAA;IAE5D;;;;OAIG;IACyC,QAAQ,CAAC,MAAM,UAAQ;IAEnE;;OAEG;IACyC,QAAQ,CAAC,OAAO,UAAQ;IAEpE,OAAO,CAAC,eAAe,CAAC,CAAiB;;IAOhC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKlB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM5E;;OAEG;IACH,OAAO,CAAC,YAAY;IAkBpB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAalB;;OAEG;IACH,OAAO,CAAC,WAAW,CAKlB;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAEjB;IAED;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAExB;IAED;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAK3B;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAG1B;cAEkB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAa1E"}

package/build/src/md/focus-ring/internals/focus-ring.js

@@ -0,0 +1,206 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+let UiFocusRing = (() => {
+    let _classSuper = LitElement;
+    let _control_decorators;
+    let _control_initializers = [];
+    let _control_extraInitializers = [];
+    let _attach_decorators;
+    let _attach_initializers = [];
+    let _attach_extraInitializers = [];
+    let _for_decorators;
+    let _for_initializers = [];
+    let _for_extraInitializers = [];
+    let _inward_decorators;
+    let _inward_initializers = [];
+    let _inward_extraInitializers = [];
+    let _visible_decorators;
+    let _visible_initializers = [];
+    let _visible_extraInitializers = [];
+    return class UiFocusRing extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _control_decorators = [property({ type: Object })];
+            _attach_decorators = [property({ type: Object })];
+            _for_decorators = [property({ type: String })];
+            _inward_decorators = [property({ type: Boolean, reflect: true })];
+            _visible_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _control_decorators, { kind: "accessor", name: "control", static: false, private: false, access: { has: obj => "control" in obj, get: obj => obj.control, set: (obj, value) => { obj.control = value; } }, metadata: _metadata }, _control_initializers, _control_extraInitializers);
+            __esDecorate(this, null, _attach_decorators, { kind: "accessor", name: "attach", static: false, private: false, access: { has: obj => "attach" in obj, get: obj => obj.attach, set: (obj, value) => { obj.attach = value; } }, metadata: _metadata }, _attach_initializers, _attach_extraInitializers);
+            __esDecorate(this, null, _for_decorators, { kind: "accessor", name: "for", static: false, private: false, access: { has: obj => "for" in obj, get: obj => obj.for, set: (obj, value) => { obj.for = value; } }, metadata: _metadata }, _for_initializers, _for_extraInitializers);
+            __esDecorate(this, null, _inward_decorators, { kind: "accessor", name: "inward", static: false, private: false, access: { has: obj => "inward" in obj, get: obj => obj.inward, set: (obj, value) => { obj.inward = value; } }, metadata: _metadata }, _inward_initializers, _inward_extraInitializers);
+            __esDecorate(this, null, _visible_decorators, { kind: "accessor", name: "visible", static: false, private: false, access: { has: obj => "visible" in obj, get: obj => obj.visible, set: (obj, value) => { obj.visible = value; } }, metadata: _metadata }, _visible_initializers, _visible_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #control_accessor_storage = __runInitializers(this, _control_initializers, void 0);
+        /**
+         * The control element that this focus ring is associated with.
+         * When the control gains or loses focus, the focus ring will show or hide.
+         */
+        get control() { return this.#control_accessor_storage; }
+        set control(value) { this.#control_accessor_storage = value; }
+        #attach_accessor_storage = (__runInitializers(this, _control_extraInitializers), __runInitializers(this, _attach_initializers, void 0));
+        /**
+         * An element to attach the focus ring to. Defaults to the parent element.
+         * This is typically used when the focus ring should be positioned relative
+         * to a different element than the control.
+         */
+        get attach() { return this.#attach_accessor_storage; }
+        set attach(value) { this.#attach_accessor_storage = value; }
+        #for_accessor_storage = (__runInitializers(this, _attach_extraInitializers), __runInitializers(this, _for_initializers, void 0));
+        /**
+         * An ID of an element that this focus ring is for.
+         * Alternative to setting the `control` property directly.
+         * @attribute
+         */
+        get for() { return this.#for_accessor_storage; }
+        set for(value) { this.#for_accessor_storage = value; }
+        #inward_accessor_storage = (__runInitializers(this, _for_extraInitializers), __runInitializers(this, _inward_initializers, false
+        /**
+         * The internal visibility state of the focus ring.
+         */
+        ));
+        /**
+         * Whether the focus ring should render inward instead of outward.
+         * When true, the focus ring will be positioned inside the control bounds.
+         * @attribute
+         */
+        get inward() { return this.#inward_accessor_storage; }
+        set inward(value) { this.#inward_accessor_storage = value; }
+        #visible_accessor_storage = (__runInitializers(this, _inward_extraInitializers), __runInitializers(this, _visible_initializers, false));
+        /**
+         * The internal visibility state of the focus ring.
+         */
+        get visible() { return this.#visible_accessor_storage; }
+        set visible(value) { this.#visible_accessor_storage = value; }
+        abortController = __runInitializers(this, _visible_extraInitializers);
+        constructor() {
+            super();
+            this.addEventListener('visibility-changed', this.onVisibilityChanged);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setupControl();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.cleanupListeners();
+        }
+        willUpdate(changedProperties) {
+            if (changedProperties.has('for') || changedProperties.has('control')) {
+                this.setupControl();
+            }
+        }
+        /**
+         * Sets up the control element and event listeners.
+         */
+        setupControl() {
+            this.cleanupListeners();
+            const control = this.getControl();
+            if (!control)
+                return;
+            this.abortController = new AbortController();
+            const { signal } = this.abortController;
+            // Listen for focus and blur events
+            control.addEventListener('focus', this.handleFocus, { signal });
+            control.addEventListener('blur', this.handleBlur, { signal });
+            control.addEventListener('pointerdown', this.handlePointerDown, { signal });
+            // Set initial state
+            this.visible = control.matches(':focus-visible');
+        }
+        /**
+         * Cleans up event listeners.
+         */
+        cleanupListeners() {
+            this.abortController?.abort();
+            this.abortController = undefined;
+        }
+        /**
+         * Gets the control element from either the `control` property,
+         * the `for` attribute, or defaults to the parent element.
+         */
+        getControl() {
+            if (this.control) {
+                return this.control;
+            }
+            if (this.for) {
+                const root = this.getRootNode();
+                return root.getElementById(this.for);
+            }
+            return this.parentElement;
+        }
+        /**
+         * Handles focus events from the control element.
+         */
+        handleFocus = (event) => {
+            // Only show focus ring for keyboard navigation
+            if (this.shouldShowFocusRing(event)) {
+                this.show();
+            }
+        };
+        /**
+         * Handles blur events from the control element.
+         */
+        handleBlur = () => {
+            this.hide();
+        };
+        /**
+         * Handles pointer down events to hide focus ring during mouse interaction.
+         */
+        handlePointerDown = () => {
+            this.hide();
+        };
+        /**
+         * Determines if the focus ring should be shown based on the focus event.
+         * The focus ring should only show for keyboard navigation, not mouse clicks.
+         */
+        shouldShowFocusRing(event) {
+            const control = event.target;
+            return control?.matches(':focus-visible') ?? false;
+        }
+        /**
+         * Shows the focus ring.
+         */
+        show() {
+            if (this.visible)
+                return;
+            this.visible = true;
+        }
+        /**
+         * Hides the focus ring.
+         */
+        hide() {
+            if (!this.visible)
+                return;
+            this.visible = false;
+        }
+        /**
+         * Handles the visibility changed event.
+         */
+        onVisibilityChanged = (event) => {
+            // Stop propagation to prevent multiple focus rings from interfering
+            event.stopPropagation();
+        };
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('visible')) {
+                this.dispatchEvent(new CustomEvent('visibility-changed', {
+                    detail: { visible: this.visible },
+                    bubbles: false,
+                    composed: true,
+                }));
+            }
+        }
+    };
+})();
+/**
+ * A focus ring component that provides a visible focus indicator.
+ * This component automatically manages the visibility of the focus ring
+ * based on the focus state of its control element.
+ *
+ * @fires visibility-changed - Dispatched when the focus ring visibility changes.
+ *                           - `detail`: An object with a `visible` property (boolean).
+ */
+export default UiFocusRing;
+//# sourceMappingURL=focus-ring.js.map

package/build/src/md/focus-ring/internals/focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["../../../../../src/md/focus-ring/internals/focus-ring.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, type PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\n\n/**\n * A focus ring component that provides a visible focus indicator.\n * This component automatically manages the visibility of the focus ring\n * based on the focus state of its control element.\n *\n * @fires visibility-changed - Dispatched when the focus ring visibility changes.\n *                           - `detail`: An object with a `visible` property (boolean).\n */\nexport default class UiFocusRing extends LitElement {\n  /**\n   * The control element that this focus ring is associated with.\n   * When the control gains or loses focus, the focus ring will show or hide.\n   */\n  @property({ type: Object }) accessor control: HTMLElement | undefined\n\n  /**\n   * An element to attach the focus ring to. Defaults to the parent element.\n   * This is typically used when the focus ring should be positioned relative\n   * to a different element than the control.\n   */\n  @property({ type: Object }) accessor attach: HTMLElement | undefined\n\n  /**\n   * An ID of an element that this focus ring is for.\n   * Alternative to setting the `control` property directly.\n   * @attribute\n   */\n  @property({ type: String }) accessor for: string | undefined\n\n  /**\n   * Whether the focus ring should render inward instead of outward.\n   * When true, the focus ring will be positioned inside the control bounds.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor inward = false\n\n  /**\n   * The internal visibility state of the focus ring.\n   */\n  @property({ type: Boolean, reflect: true }) accessor visible = false\n\n  private abortController?: AbortController\n\n  constructor() {\n    super()\n    this.addEventListener('visibility-changed', this.onVisibilityChanged as EventListener)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setupControl()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.cleanupListeners()\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('for') || changedProperties.has('control')) {\n      this.setupControl()\n    }\n  }\n\n  /**\n   * Sets up the control element and event listeners.\n   */\n  private setupControl(): void {\n    this.cleanupListeners()\n\n    const control = this.getControl()\n    if (!control) return\n\n    this.abortController = new AbortController()\n    const { signal } = this.abortController\n\n    // Listen for focus and blur events\n    control.addEventListener('focus', this.handleFocus, { signal })\n    control.addEventListener('blur', this.handleBlur, { signal })\n    control.addEventListener('pointerdown', this.handlePointerDown, { signal })\n\n    // Set initial state\n    this.visible = control.matches(':focus-visible')\n  }\n\n  /**\n   * Cleans up event listeners.\n   */\n  private cleanupListeners(): void {\n    this.abortController?.abort()\n    this.abortController = undefined\n  }\n\n  /**\n   * Gets the control element from either the `control` property,\n   * the `for` attribute, or defaults to the parent element.\n   */\n  private getControl(): HTMLElement | null {\n    if (this.control) {\n      return this.control\n    }\n\n    if (this.for) {\n      const root = this.getRootNode() as Document | ShadowRoot\n      return root.getElementById(this.for)\n    }\n\n    return this.parentElement\n  }\n\n  /**\n   * Handles focus events from the control element.\n   */\n  private handleFocus = (event: FocusEvent): void => {\n    // Only show focus ring for keyboard navigation\n    if (this.shouldShowFocusRing(event)) {\n      this.show()\n    }\n  }\n\n  /**\n   * Handles blur events from the control element.\n   */\n  private handleBlur = (): void => {\n    this.hide()\n  }\n\n  /**\n   * Handles pointer down events to hide focus ring during mouse interaction.\n   */\n  private handlePointerDown = (): void => {\n    this.hide()\n  }\n\n  /**\n   * Determines if the focus ring should be shown based on the focus event.\n   * The focus ring should only show for keyboard navigation, not mouse clicks.\n   */\n  private shouldShowFocusRing(event: FocusEvent): boolean {\n    const control = event.target as HTMLElement\n    return control?.matches(':focus-visible') ?? false\n  }\n\n  /**\n   * Shows the focus ring.\n   */\n  show(): void {\n    if (this.visible) return\n    this.visible = true\n  }\n\n  /**\n   * Hides the focus ring.\n   */\n  hide(): void {\n    if (!this.visible) return\n    this.visible = false\n  }\n\n  /**\n   * Handles the visibility changed event.\n   */\n  private onVisibilityChanged = (event: Event): void => {\n    // Stop propagation to prevent multiple focus rings from interfering\n    event.stopPropagation()\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('visible')) {\n      this.dispatchEvent(\n        new CustomEvent('visibility-changed', {\n          detail: { visible: this.visible },\n          bubbles: false,\n          composed: true,\n        })\n      )\n    }\n  }\n}\n"]}

package/build/src/md/focus-ring/internals/focus-ring.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=focus-ring.styles.d.ts.map

package/build/src/md/focus-ring/internals/focus-ring.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/focus-ring/internals/focus-ring.styles.ts"],"names":[],"mappings":";AAEA,wBA0GC"}

package/build/src/md/focus-ring/internals/focus-ring.styles.js

@@ -0,0 +1,109 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    animation-delay: 0s, calc(var(--md-focus-ring-duration, 600ms) * 0.25);
+    animation-duration:
+      calc(var(--md-focus-ring-duration, 600ms) * 0.25), calc(var(--md-focus-ring-duration, 600ms) * 0.75);
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    box-sizing: border-box;
+    color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));
+    display: none;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :host([visible]) {
+    display: flex;
+  }
+
+  :host(:not([inward])) {
+    animation-name: outward-grow, outward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    inset: calc(-1 * var(--md-focus-ring-outward-offset, 2px));
+    outline: var(--md-focus-ring-width, 3px) solid currentColor;
+  }
+
+  :host([inward]) {
+    animation-name: inward-grow, inward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border: var(--md-focus-ring-width, 3px) solid currentColor;
+    inset: var(--md-focus-ring-inward-offset, 0px);
+  }
+
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+
+    to {
+      outline-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+
+    to {
+      border-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    :host {
+      animation: none;
+    }
+  }
+`;
+//# sourceMappingURL=focus-ring.styles.js.map

package/build/src/md/focus-ring/internals/focus-ring.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.styles.js","sourceRoot":"","sources":["../../../../../src/md/focus-ring/internals/focus-ring.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    animation-delay: 0s, calc(var(--md-focus-ring-duration, 600ms) * 0.25);\n    animation-duration:\n      calc(var(--md-focus-ring-duration, 600ms) * 0.25), calc(var(--md-focus-ring-duration, 600ms) * 0.75);\n    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);\n    box-sizing: border-box;\n    color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  :host([visible]) {\n    display: flex;\n  }\n\n  :host(:not([inward])) {\n    animation-name: outward-grow, outward-shrink;\n    border-end-end-radius: calc(\n      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +\n        var(--md-focus-ring-outward-offset, 2px)\n    );\n    border-end-start-radius: calc(\n      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +\n        var(--md-focus-ring-outward-offset, 2px)\n    );\n    border-start-end-radius: calc(\n      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +\n        var(--md-focus-ring-outward-offset, 2px)\n    );\n    border-start-start-radius: calc(\n      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +\n        var(--md-focus-ring-outward-offset, 2px)\n    );\n    inset: calc(-1 * var(--md-focus-ring-outward-offset, 2px));\n    outline: var(--md-focus-ring-width, 3px) solid currentColor;\n  }\n\n  :host([inward]) {\n    animation-name: inward-grow, inward-shrink;\n    border-end-end-radius: calc(\n      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(\n          --md-focus-ring-inward-offset,\n          0px\n        )\n    );\n    border-end-start-radius: calc(\n      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(\n          --md-focus-ring-inward-offset,\n          0px\n        )\n    );\n    border-start-end-radius: calc(\n      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(\n          --md-focus-ring-inward-offset,\n          0px\n        )\n    );\n    border-start-start-radius: calc(\n      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(\n          --md-focus-ring-inward-offset,\n          0px\n        )\n    );\n    border: var(--md-focus-ring-width, 3px) solid currentColor;\n    inset: var(--md-focus-ring-inward-offset, 0px);\n  }\n\n  @keyframes outward-grow {\n    from {\n      outline-width: 0;\n    }\n\n    to {\n      outline-width: var(--md-focus-ring-active-width, 8px);\n    }\n  }\n\n  @keyframes outward-shrink {\n    from {\n      outline-width: var(--md-focus-ring-active-width, 8px);\n    }\n  }\n\n  @keyframes inward-grow {\n    from {\n      border-width: 0;\n    }\n\n    to {\n      border-width: var(--md-focus-ring-active-width, 8px);\n    }\n  }\n\n  @keyframes inward-shrink {\n    from {\n      border-width: var(--md-focus-ring-active-width, 8px);\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    :host {\n      animation: none;\n    }\n  }\n`\n"]}

package/build/src/md/focus-ring/ui-focus-ring.d.ts

@@ -0,0 +1,42 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/focus-ring.js';
+/**
+ * A focus ring component that provides a visible focus indicator.
+ *
+ * This component replaces the Material Design `md-focus-ring` component
+ * and provides the same functionality with customizable styling.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ui-focus-ring></ui-focus-ring>
+ *
+ * <!-- With specific control -->
+ * <ui-focus-ring .control="${buttonElement}"></ui-focus-ring>
+ *
+ * <!-- Using for attribute -->
+ * <ui-focus-ring for="my-button"></ui-focus-ring>
+ *
+ * <!-- Inward focus ring -->
+ * <ui-focus-ring inward></ui-focus-ring>
+ * ```
+ *
+ * @cssprop --ui-focus-ring-color - The color of the focus ring border.
+ * @cssprop --ui-focus-ring-width - The width of the focus ring border.
+ * @cssprop --ui-focus-ring-style - The style of the focus ring border (solid, dashed, etc.).
+ * @cssprop --ui-focus-ring-shape-start-start - The start-start corner radius.
+ * @cssprop --ui-focus-ring-shape-start-end - The start-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-end - The end-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-start - The end-start corner radius.
+ *
+ * @csspart focus-ring - The focus ring element.
+ */
+export declare class UiFocusRingElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-focus-ring': Element;
+    }
+}
+//# sourceMappingURL=ui-focus-ring.d.ts.map

package/build/src/md/focus-ring/ui-focus-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-focus-ring.d.ts","sourceRoot":"","sources":["../../../../src/md/focus-ring/ui-focus-ring.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAG/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,kBAAmB,SAAQ,OAAO;IAC7C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,OAAO,CAAA;KACzB;CACF"}

package/build/src/md/focus-ring/ui-focus-ring.js

@@ -0,0 +1,58 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/focus-ring.js';
+import styles from './internals/focus-ring.styles.js';
+/**
+ * A focus ring component that provides a visible focus indicator.
+ *
+ * This component replaces the Material Design `md-focus-ring` component
+ * and provides the same functionality with customizable styling.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ui-focus-ring></ui-focus-ring>
+ *
+ * <!-- With specific control -->
+ * <ui-focus-ring .control="${buttonElement}"></ui-focus-ring>
+ *
+ * <!-- Using for attribute -->
+ * <ui-focus-ring for="my-button"></ui-focus-ring>
+ *
+ * <!-- Inward focus ring -->
+ * <ui-focus-ring inward></ui-focus-ring>
+ * ```
+ *
+ * @cssprop --ui-focus-ring-color - The color of the focus ring border.
+ * @cssprop --ui-focus-ring-width - The width of the focus ring border.
+ * @cssprop --ui-focus-ring-style - The style of the focus ring border (solid, dashed, etc.).
+ * @cssprop --ui-focus-ring-shape-start-start - The start-start corner radius.
+ * @cssprop --ui-focus-ring-shape-start-end - The start-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-end - The end-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-start - The end-start corner radius.
+ *
+ * @csspart focus-ring - The focus ring element.
+ */
+let UiFocusRingElement = (() => {
+    let _classDecorators = [customElement('ui-focus-ring')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiFocusRingElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiFocusRingElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiFocusRingElement = _classThis;
+})();
+export { UiFocusRingElement };
+//# sourceMappingURL=ui-focus-ring.js.map

package/build/src/md/focus-ring/ui-focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-focus-ring.js","sourceRoot":"","sources":["../../../../src/md/focus-ring/ui-focus-ring.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,2BAA2B,CAAA;AAC/C,OAAO,MAAM,MAAM,kCAAkC,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;IAEU,kBAAkB;4BAD9B,aAAa,CAAC,eAAe,CAAC;;;;sBACS,OAAO;kCAAf,SAAQ,WAAO;;;;YAA/C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAkB;;;;;SAAlB,kBAAkB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/focus-ring.js'\nimport styles from './internals/focus-ring.styles.js'\n\n/**\n * A focus ring component that provides a visible focus indicator.\n *\n * This component replaces the Material Design `md-focus-ring` component\n * and provides the same functionality with customizable styling.\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <ui-focus-ring></ui-focus-ring>\n *\n * <!-- With specific control -->\n * <ui-focus-ring .control=\"${buttonElement}\"></ui-focus-ring>\n *\n * <!-- Using for attribute -->\n * <ui-focus-ring for=\"my-button\"></ui-focus-ring>\n *\n * <!-- Inward focus ring -->\n * <ui-focus-ring inward></ui-focus-ring>\n * ```\n *\n * @cssprop --ui-focus-ring-color - The color of the focus ring border.\n * @cssprop --ui-focus-ring-width - The width of the focus ring border.\n * @cssprop --ui-focus-ring-style - The style of the focus ring border (solid, dashed, etc.).\n * @cssprop --ui-focus-ring-shape-start-start - The start-start corner radius.\n * @cssprop --ui-focus-ring-shape-start-end - The start-end corner radius.\n * @cssprop --ui-focus-ring-shape-end-end - The end-end corner radius.\n * @cssprop --ui-focus-ring-shape-end-start - The end-start corner radius.\n *\n * @csspart focus-ring - The focus ring element.\n */\n@customElement('ui-focus-ring')\nexport class UiFocusRingElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-focus-ring': Element\n  }\n}\n"]}