tyrell-components 1.0.0-TC57 → 1.0.0-TC59

package/lib/components/calendar.d.ts

@@ -50,6 +50,8 @@ export declare class TyCalendar extends HTMLElement {
     private _internals?;
     private _validity?;
     private _initialValue;
+    private _valueSets;
+    private _pressing;
     private _localeObserver?;
     static formAssociated: boolean;
     static get observedAttributes(): string[];
@@ -63,6 +65,8 @@ export declare class TyCalendar extends HTMLElement {
     set max(value: string | undefined);
     get flavor(): string;
     set flavor(value: string);
+    get required(): boolean;
+    set required(value: boolean);
     get year(): number | undefined;
     set year(value: number | undefined);
     get month(): number | undefined;
@@ -84,7 +88,12 @@ export declare class TyCalendar extends HTMLElement {
     get customCSS(): CSSStyleSheet | undefined;
     set customCSS(sheet: CSSStyleSheet | undefined);
     get value(): string;
-    set value(isoDate: string);
+    /**
+     * Reads what ty-date-picker reads: 'YYYY-MM-DD', 'YYYY-MM-DDTHH:mm[:ss]'
+     * (that day), an ISO instant with Z/offset or epoch ms / a Date (its local
+     * day). The value stays 'YYYY-MM-DD'; anything else is no value.
+     */
+    set value(isoDate: string | number | Date | null | undefined);
     /**
      * Initialize state from HTML attributes on first load
      */
@@ -94,8 +103,12 @@ export declare class TyCalendar extends HTMLElement {
     private syncChildComponents;
     private updateFormValue;
     /**
-     * Selection outside [min, max] => rangeUnderflow/rangeOverflow.
-     * UI can't produce this (days are disabled), but programmatic values can.
+     * required with no selection => valueMissing; a selection outside
+     * [min, max] => rangeUnderflow/rangeOverflow (UI can't pick one, days are
+     * disabled, but programmatic values can). With a native date input's
+     * message. The grid's tab stop is the anchor, so a submit focuses it and
+     * the browser shows its bubble there; the cells are rebuilt on every grid
+     * render, so each one runs this again.
      */
     private updateValidity;
     get form(): HTMLFormElement | null;
@@ -128,7 +141,15 @@ export declare class TyCalendar extends HTMLElement {
     private pickMonth;
     private handleKeydown;
     private focusNavTitle;
-    /** Focus the grid's tab stop (the focused day, or month in the month view). */
+    /**
+     * The grid's tab stop: the focused day, or month in the month view. When
+     * every day shown is disabled (a value outside min/max) there is none: then
+     * the selected day, or the first one; disabled cells still take focus.
+     * Disabled month cells don't (buttons): with every month of the year
+     * disabled, the navigation title (back to the days) stands in.
+     */
+    private gridCell;
+    /** Focus the grid's tab stop (see gridCell). */
     focus(options?: FocusOptions): void;
     private focusDayGrid;
 }

package/lib/components/calendar.js

@@ -1,10 +1,11 @@
 import { ensureStyles } from '../utils/styles.js';
+import { liftProperties, upgradeProperties } from '../utils/upgrade-properties.js';
 import { calendarStyles } from '../styles/calendar.js';
 import './calendar-month.js';
 import './calendar-navigation.js';
-import { parseISODate, getMonthName } from '../utils/calendar-utils.js';
+import { parseDateDay, formatISODay, toISODay, getMonthName, localMidnight, utcMidnight } from '../utils/calendar-utils.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
-import { ValidityController } from '../utils/validity.js';
+import { ValidityController, nativeMessage } from '../utils/validity.js';
 function getCurrentDate() {
 const now = new Date();
 return {
@@ -31,14 +32,12 @@ const day = parseInt(dayStr, 10);
 const daysInMonth = new Date(year, month, 0).getDate();
 return day >= 1 && day <= daysInMonth ? day : null;
 }
-function formatDateISO(year, month, day) {
-const monthStr = month.toString().padStart(2, '0');
-const dayStr = day.toString().padStart(2, '0');
-return `${year}-${monthStr}-${dayStr}`;
+function formatYear(year) {
+return year.toString().padStart(4, '0');
 }
 export class TyCalendar extends HTMLElement {
 static get observedAttributes() {
-return ['value', 'year', 'month', 'day', 'hide-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor'];
+return ['value', 'year', 'month', 'day', 'hide-navigation', 'stateless', 'locale', 'name', 'size', 'width', 'min', 'max', 'flavor', 'required'];
 }
 constructor() {
 super();
@@ -49,12 +48,15 @@ this._flavor = 'primary';
 this._view = 'days';
 this._dayGridHeight = 0;
 this._initialValue = '';
+this._valueSets = 0;
+this._pressing = false;
 const current = getCurrentDate();
 this._state = {
 displayYear: current.year,
 displayMonth: current.month,
 };
-this.attachShadow({ mode: 'open' });
+this.attachShadow({ mode: 'open', delegatesFocus: true });
+liftProperties(this);
 if ('attachInternals' in this) {
 this._internals = this.attachInternals();
 this._validity = new ValidityController(this, this._internals);
@@ -62,36 +64,7 @@ this._validity = new ValidityController(this, this._internals);
 }
 connectedCallback() {
 this.initializeFromAttributes();
-const plainDayContentFn = this.dayContentFn;
-if (plainDayContentFn && !this._dayContentFn) {
-this._dayContentFn = plainDayContentFn;
-delete this.dayContentFn;
-}
-const plainCustomCSS = this.customCSS;
-if (plainCustomCSS && !this._customCSS) {
-this._customCSS = plainCustomCSS;
-delete this.customCSS;
-}
-const plainValue = this.value;
-if (plainValue && typeof plainValue === 'string' && plainValue !== this.value) {
-const match = plainValue.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-if (match) {
-const year = parseInt(match[1], 10);
-const month = parseInt(match[2], 10);
-const day = parseInt(match[3], 10);
-this._state.selectedYear = year;
-this._state.selectedMonth = month;
-this._state.selectedDay = day;
-this._state.displayYear = year;
-this._state.displayMonth = month;
-if (!this._stateless) {
-this.setAttribute('year', year.toString());
-this.setAttribute('month', month.toString());
-this.setAttribute('day', day.toString());
-}
-}
-delete this.value;
-}
+upgradeProperties(this);
 this.render();
 this.updateFormValue();
 this._localeObserver = observeLocaleChanges(this, () => {
@@ -158,6 +131,9 @@ this[name === 'min' ? '_min' : '_max'] = newValue || undefined;
 this.syncChildComponents();
 this.updateValidity();
 break;
+case 'required':
+this.updateValidity();
+break;
 case 'flavor':
 this._flavor = newValue || 'primary';
 this.syncChildComponents();
@@ -191,6 +167,12 @@ this.setAttribute('flavor', value);
 else
 this.removeAttribute('flavor');
 }
+get required() {
+return this.hasAttribute('required');
+}
+set required(value) {
+this.toggleAttribute('required', !!value);
+}
 get year() {
 return this._state.selectedYear;
 }
@@ -198,12 +180,12 @@ set year(value) {
 if (value !== undefined) {
 if (this._stateless) {
 this._state.displayYear = value;
-this.setAttribute('year', value.toString());
+this.setAttribute('year', formatYear(value));
 }
 else {
 this._state.selectedYear = value;
 this._state.displayYear = value;
-this.setAttribute('year', value.toString());
+this.setAttribute('year', formatYear(value));
 }
 }
 else {
@@ -332,35 +314,43 @@ this.syncChildComponents();
 get value() {
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-return formatDateISO(selectedYear, selectedMonth, selectedDay);
+return formatISODay(selectedYear, selectedMonth, selectedDay);
 }
 return '';
 }
 set value(isoDate) {
-if (!isoDate) {
+const set = ++this._valueSets;
+const superseded = () => set !== this._valueSets;
+if (isoDate === null || isoDate === undefined || isoDate === '') {
 delete this._state.selectedYear;
 delete this._state.selectedMonth;
 delete this._state.selectedDay;
 if (!this._stateless) {
 this.removeAttribute('year');
+if (superseded())
+return;
 this.removeAttribute('month');
+if (superseded())
+return;
 this.removeAttribute('day');
 }
 }
 else {
-const match = isoDate.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-if (match) {
-const year = parseInt(match[1], 10);
-const month = parseInt(match[2], 10);
-const day = parseInt(match[3], 10);
+const parsed = parseDateDay(isoDate);
+if (parsed) {
+const { year, month, day } = parsed;
 this._state.selectedYear = year;
 this._state.selectedMonth = month;
 this._state.selectedDay = day;
 this._state.displayYear = year;
 this._state.displayMonth = month;
 if (!this._stateless) {
-this.setAttribute('year', year.toString());
+this.setAttribute('year', formatYear(year));
+if (superseded())
+return;
 this.setAttribute('month', month.toString());
+if (superseded())
+return;
 this.setAttribute('day', day.toString());
 }
 }
@@ -471,13 +461,13 @@ this._monthDisplay.customCSS = this._customCSS;
 }
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-this._monthDisplay.value = date.getTime();
+this._monthDisplay.value = localMidnight(selectedYear, selectedMonth, selectedDay).getTime();
 }
 else {
 this._monthDisplay.value = null;
 }
 }
+this.updateValidity();
 }
 updateFormValue() {
 if (this._stateless)
@@ -487,7 +477,7 @@ return;
 const elementName = this.getAttribute('name');
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (elementName && selectedYear && selectedMonth && selectedDay) {
-const isoDate = formatDateISO(selectedYear, selectedMonth, selectedDay);
+const isoDate = formatISODay(selectedYear, selectedMonth, selectedDay);
 this._internals.setFormValue(isoDate);
 }
 else {
@@ -498,21 +488,27 @@ this.updateValidity();
 updateValidity() {
 if (!this._internals)
 return;
+const anchor = this.gridCell() ?? undefined;
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-const sel = Date.UTC(selectedYear, selectedMonth - 1, selectedDay);
-const min = this._min ? parseISODate(this._min) : null;
-const max = this._max ? parseISODate(this._max) : null;
-if (min && sel < Date.UTC(min.year, min.month - 1, min.day)) {
-this._validity.set({ rangeUnderflow: true }, `Date must be ${this._min} or later`);
+const sel = utcMidnight(selectedYear, selectedMonth, selectedDay);
+const min = this._min ? parseDateDay(this._min) : null;
+const max = this._max ? parseDateDay(this._max) : null;
+const message = () => nativeMessage('input', { type: 'date', min: toISODay(this._min) ?? undefined, max: toISODay(this._max) ?? undefined }, formatISODay(selectedYear, selectedMonth, selectedDay));
+if (min && sel < utcMidnight(min.year, min.month, min.day)) {
+this._validity.set({ rangeUnderflow: true }, message(), anchor);
 return;
 }
-if (max && sel > Date.UTC(max.year, max.month - 1, max.day)) {
-this._validity.set({ rangeOverflow: true }, `Date must be ${this._max} or earlier`);
+if (max && sel > utcMidnight(max.year, max.month, max.day)) {
+this._validity.set({ rangeOverflow: true }, message(), anchor);
 return;
 }
 }
-this._validity.set({});
+else if (this.required) {
+this._validity.set({ valueMissing: true }, nativeMessage('input', { type: 'date', required: true }), anchor);
+return;
+}
+this._validity.set({}, undefined, anchor);
 }
 get form() { return this._internals?.form ?? null; }
 get validity() { return this._internals?.validity; }
@@ -562,7 +558,7 @@ this._state.selectedMonth = month;
 this._state.selectedDay = day;
 this._state.displayYear = year;
 this._state.displayMonth = month;
-this.setAttribute('year', year.toString());
+this.setAttribute('year', formatYear(year));
 this.setAttribute('month', month.toString());
 this.setAttribute('day', day.toString());
 this.updateFormValue();
@@ -587,6 +583,7 @@ this.syncChildComponents();
 if (this._monthDisplay && typeof this._monthDisplay.refresh === 'function') {
 this._monthDisplay.refresh();
 }
+this.updateValidity();
 }
 createNavigation() {
 const nav = document.createElement('ty-calendar-navigation');
@@ -622,8 +619,7 @@ month.width = this._width;
 }
 const { selectedYear, selectedMonth, selectedDay } = this._state;
 if (selectedYear && selectedMonth && selectedDay) {
-const date = new Date(selectedYear, selectedMonth - 1, selectedDay);
-month.value = date.getTime();
+month.value = localMidnight(selectedYear, selectedMonth, selectedDay).getTime();
 }
 if (this._dayContentFn) {
 month.dayContentFn = this._dayContentFn;
@@ -632,6 +628,7 @@ if (this._customCSS) {
 month.customCSS = this._customCSS;
 }
 month.addEventListener('day-click', (e) => this.handleDayClick(e));
+month.shadowRoot?.addEventListener('focusin', () => this.updateValidity());
 this._monthDisplay = month;
 return month;
 }
@@ -644,7 +641,23 @@ root.innerHTML = '';
 this._monthGrid = undefined;
 const container = document.createElement('div');
 container.className = 'calendar-container';
+container.tabIndex = -1;
+const press = () => {
+this._pressing = true;
+setTimeout(() => { this._pressing = false; });
+};
+container.addEventListener('pointerdown', press);
+container.addEventListener('mousedown', press);
+container.addEventListener('focus', () => {
+if (this._pressing)
+return;
+queueMicrotask(() => {
+if (this.shadowRoot?.activeElement === container)
+this.gridCell()?.focus();
+});
+});
 container.addEventListener('keydown', (e) => this.handleKeydown(e));
+container.addEventListener('focusin', () => this.updateValidity());
 this._container = container;
 if (!this._hideNavigation) {
 const nav = this.createNavigation();
@@ -655,6 +668,7 @@ container.appendChild(month);
 root.appendChild(container);
 if (this._view === 'months')
 this.showBody();
+this.updateValidity();
 }
 setView(view) {
 if (view === this._view)
@@ -666,6 +680,7 @@ this._view = view;
 if (this._navigation)
 this._navigation.view = view;
 this.showBody();
+this.updateValidity();
 }
 showBody() {
 const container = this._container;
@@ -691,8 +706,8 @@ static monthIndex(year, month) {
 return year * 12 + (month - 1);
 }
 boundIndices() {
-const min = this._min ? parseISODate(this._min) : null;
-const max = this._max ? parseISODate(this._max) : null;
+const min = this._min ? parseDateDay(this._min) : null;
+const max = this._max ? parseDateDay(this._max) : null;
 return {
 minIdx: min ? TyCalendar.monthIndex(min.year, min.month) : null,
 maxIdx: max ? TyCalendar.monthIndex(max.year, max.month) : null,
@@ -757,6 +772,11 @@ this.goTo(month, this._state.displayYear);
 this.focusDayGrid();
 }
 handleKeydown(e) {
+if (e.target === this._container && e.key.startsWith('Arrow')) {
+e.preventDefault();
+this.gridCell()?.focus();
+return;
+}
 if (e.key === 'Escape' && this._view === 'months') {
 e.preventDefault();
 e.stopPropagation();
@@ -792,10 +812,21 @@ requestAnimationFrame(() => {
 this._navigation?.shadowRoot?.querySelector('.nav-title')?.focus();
 });
 }
+gridCell() {
+if (this._view === 'months') {
+return this._monthGrid?.querySelector('.month-cell[tabindex="0"]:not(:disabled)')
+?? this._monthGrid?.querySelector('.month-cell:not(:disabled)')
+?? this._navigation?.shadowRoot?.querySelector('.nav-title')
+?? null;
+}
+const root = this._monthDisplay?.shadowRoot;
+return root?.querySelector('.calendar-day-cell[tabindex="0"]')
+?? root?.querySelector('.calendar-day-cell.selected')
+?? root?.querySelector('.calendar-day-cell')
+?? null;
+}
 focus(options) {
-const cell = this._view === 'months'
-? this._monthGrid?.querySelector('.month-cell[tabindex="0"]')
-: this._monthDisplay?.shadowRoot?.querySelector('.calendar-day-cell[tabindex="0"]');
+const cell = this.gridCell();
 if (cell)
 cell.focus(options);
 else

package/lib/components/checkbox.d.ts

@@ -32,6 +32,8 @@ export interface TyCheckboxElement extends HTMLElement {
  */
 export declare class TyCheckbox extends TyComponent<CheckboxState> implements TyCheckboxElement {
     static formAssociated: boolean;
+    protected static delegatesFocus: boolean;
+    protected static labelClicks: boolean;
     protected static properties: {
         checked: {
             type: "boolean";
@@ -98,6 +100,9 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     protected getFormValue(): FormDataEntryValue | null;
     private buildClassList;
     private handleCheckboxClick;
+    /** The ring is for keyboard use: keys show it, a click hides it — also a
+     *  <label>'s, which in Chromium focuses the box as :focus-visible. */
+    private showFocusRing;
     private handleCheckboxKeydown;
     private removeEventListeners;
     /**
@@ -112,7 +117,7 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     protected render(): void;
     /** Focus the checkbox itself (the host is not focusable; its role element is). */
     focus(options?: FocusOptions): void;
-    /** required + unchecked => valueMissing; otherwise valid. */
+    /** required + unchecked => valueMissing (the browser's own message); otherwise valid. */
     private updateValidity;
     get checked(): boolean;
     set checked(value: boolean);

package/lib/components/checkbox.js

@@ -3,6 +3,7 @@ import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { checkboxStyles, checkboxCustomFlavorCss } from "../styles/checkbox.js";
+import { nativeMessage } from "../utils/validity.js";
 const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 const DASH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>`;
 export class TyCheckbox extends TyComponent {
@@ -20,6 +21,9 @@ ensureStyles(shadow, { css: checkboxStyles, id: "ty-checkbox" });
 onConnect() {
 this.setupEventListeners();
 this._syncCustomFlavor();
+const el = this.shadowRoot.querySelector(".checkbox-container");
+if (el && this.shadowRoot.activeElement !== el)
+el.classList.remove("focused");
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => checkboxCustomFlavorCss(base));
@@ -46,8 +50,7 @@ return classes.join(" ");
 handleCheckboxClick(e) {
 if (this.disabled)
 return;
-if (this.isDuplicateActivationClick())
-return;
+this.showFocusRing(e instanceof KeyboardEvent);
 const newValue = this.indeterminate ? true : !this.checked;
 if (this.indeterminate)
 this.indeterminate = false;
@@ -71,6 +74,9 @@ composed: true,
 }));
 }, 0);
 }
+showFocusRing(on) {
+this.shadowRoot?.querySelector(".checkbox-container")?.classList.toggle("focused", on);
+}
 handleCheckboxKeydown(e) {
 if (this.disabled)
 return;
@@ -123,7 +129,7 @@ this._keydownHandler = (e) => {
 this.handleCheckboxKeydown(e);
 };
 this._focusHandler = () => {
-checkboxEl.classList.add("focused");
+checkboxEl.classList.toggle("focused", checkboxEl.matches(":focus-visible"));
 };
 this._blurHandler = () => {
 checkboxEl.classList.remove("focused");
@@ -142,7 +148,8 @@ const ariaChecked = this.indeterminate ? "mixed" : String(this.checked);
 if (!checkboxEl) {
 checkboxEl = document.createElement("div");
 checkboxEl.className = "checkbox-container " + classes;
-checkboxEl.tabIndex = this.disabled ? -1 : 0;
+if (!this.disabled)
+checkboxEl.tabIndex = 0;
 checkboxEl.setAttribute("role", "checkbox");
 checkboxEl.setAttribute("aria-checked", ariaChecked);
 checkboxEl.setAttribute("aria-disabled", String(this.disabled));
@@ -153,8 +160,13 @@ checkboxEl.appendChild(checkboxIcon);
 shadow.appendChild(checkboxEl);
 }
 else {
+const focused = checkboxEl.classList.contains("focused") && shadow.activeElement === checkboxEl;
 checkboxEl.className = "checkbox-container " + classes;
-checkboxEl.tabIndex = this.disabled ? -1 : 0;
+checkboxEl.classList.toggle("focused", focused && !this.disabled);
+if (this.disabled)
+checkboxEl.removeAttribute("tabindex");
+else
+checkboxEl.tabIndex = 0;
 checkboxEl.setAttribute("aria-checked", ariaChecked);
 checkboxEl.setAttribute("aria-disabled", String(this.disabled));
 checkboxEl.setAttribute("aria-required", String(this.required));
@@ -179,7 +191,7 @@ this.applyValidity({});
 return;
 }
 if (this.required && !this.checked) {
-this.applyValidity({ valueMissing: true }, "Please check this box", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "checkbox", required: true }), anchor ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -238,6 +250,8 @@ return this._internals.form;
 }
 }
 TyCheckbox.formAssociated = true;
+TyCheckbox.delegatesFocus = true;
+TyCheckbox.labelClicks = true;
 TyCheckbox.properties = {
 checked: {
 type: "boolean",

package/lib/components/copy.d.ts

@@ -109,6 +109,8 @@ export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElem
      * Uses state flag so render() can show the correct icon
      */
     private showCopySuccess;
+    /** Feedback over: the copy icon again. */
+    private resetCopyButton;
     /**
      * Show copy error animation
      * Swaps copy icon → red X icon → copy icon

package/lib/components/copy.js

@@ -32,7 +32,7 @@ this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFla
 onDisconnect() {
 if (this._copyTimeout !== null) {
 clearTimeout(this._copyTimeout);
-this._copyTimeout = null;
+this.resetCopyButton();
 }
 }
 onPropertiesChanged(changes) {
@@ -61,15 +61,15 @@ composed: true
 }));
 }
 catch (err) {
-try {
+const focused = this.shadowRoot.activeElement;
 const textarea = document.createElement('textarea');
+try {
 textarea.value = value;
 textarea.style.position = 'fixed';
 textarea.style.opacity = '0';
 document.body.appendChild(textarea);
 textarea.select();
 document.execCommand('copy');
-document.body.removeChild(textarea);
 this.dispatchEvent(new CustomEvent('copy-success', {
 detail: { value },
 bubbles: true,
@@ -86,6 +86,10 @@ composed: true
 this.showCopyError();
 return;
 }
+finally {
+textarea.remove();
+focused?.focus();
+}
 }
 this.showCopySuccess();
 }
@@ -100,16 +104,17 @@ copyButton.classList.add('success');
 copyButton.innerHTML = CHECK_ICON_SVG;
 copyButton.setAttribute('aria-label', 'Copied!');
 }
-this._copyTimeout = window.setTimeout(() => {
+this._copyTimeout = window.setTimeout(() => this.resetCopyButton(), 2000);
+}
+resetCopyButton() {
 this._showingSuccess = false;
 const btn = this.shadowRoot.querySelector('.copy-button');
 if (btn) {
-btn.classList.remove('success');
+btn.classList.remove('success', 'error');
 btn.innerHTML = COPY_ICON_SVG;
 btn.setAttribute('aria-label', 'Copy to clipboard');
 }
 this._copyTimeout = null;
-}, 2000);
 }
 showCopyError() {
 if (this._copyTimeout !== null) {
@@ -122,34 +127,13 @@ copyButton.classList.add('error');
 copyButton.innerHTML = ERROR_ICON_SVG;
 copyButton.setAttribute('aria-label', 'Copy failed');
 }
-this._copyTimeout = window.setTimeout(() => {
-const btn = this.shadowRoot.querySelector('.copy-button');
-if (btn) {
-btn.classList.remove('error');
-btn.innerHTML = COPY_ICON_SVG;
-btn.setAttribute('aria-label', 'Copy to clipboard');
-}
-this._copyTimeout = null;
-}, 2000);
+this._copyTimeout = window.setTimeout(() => this.resetCopyButton(), 2000);
 }
 setupEventListeners() {
-const shadow = this.shadowRoot;
-const inputWrapper = shadow.querySelector('.input-wrapper');
-const copyButton = shadow.querySelector('.copy-button');
+const inputWrapper = this.shadowRoot.querySelector('.input-wrapper');
 if (inputWrapper && !this.disabled) {
-const wrapperEl = inputWrapper;
-wrapperEl.addEventListener('click', (e) => {
-if (e.target === copyButton || e.target.closest('.copy-button')) {
-return;
-}
-this.copyToClipboard();
-});
-wrapperEl.style.cursor = 'pointer';
-}
-if (copyButton) {
-copyButton.addEventListener('click', () => {
-this.copyToClipboard();
-});
+inputWrapper.addEventListener('click', () => this.copyToClipboard());
+inputWrapper.style.cursor = 'pointer';
 }
 }
 render() {