@redvars/peacock 3.5.0 → 3.6.0

package/dist/html-editor.js

@@ -0,0 +1,358 @@
+import { a as i, _ as __decorate, I as IndividualComponent, b, A } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './query-QBcUV-L_.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
+import { B as BaseInput } from './BaseInput-14YmcfK7.js';
+import { r as redispatchEvent } from './dispatch-event-utils-CuEqjlPT.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.html-editor-field {
+  --field-height: auto;
+  --field-padding-block: 0;
+  width: 100%;
+}
+
+.html-editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-025, 0.125rem);
+  padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
+  background: var(--html-editor-toolbar-background, var(--color-surface-container, #f3edf7));
+  border-block-end: 1px solid var(--html-editor-toolbar-border-color, var(--color-outline-variant, #cac4d0));
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+
+.toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--shape-corner-extra-small, 0.25rem);
+  background: transparent;
+  color: var(--color-on-surface-variant, #49454f);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.toolbar-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-on-surface-variant, #49454f) 8%, transparent);
+}
+.toolbar-btn:active:not(:disabled) {
+  background: color-mix(in srgb, var(--color-primary, #6750a4) 12%, transparent);
+  color: var(--color-primary, #6750a4);
+}
+.toolbar-btn:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.toolbar-btn wc-icon {
+  pointer-events: none;
+}
+
+.toolbar-divider {
+  display: inline-block;
+  width: 1px;
+  height: 1.5rem;
+  background: var(--color-outline-variant, #cac4d0);
+  margin-inline: var(--spacing-025, 0.125rem);
+  flex-shrink: 0;
+}
+
+.html-editor-content {
+  min-height: var(--html-editor-min-height, 8rem);
+  padding: var(--spacing-200, 1rem) var(--spacing-150, 0.75rem);
+  outline: none;
+  color: var(--color-on-surface, #1c1b1f);
+  font-family: var(--typography-body-medium-font-family, inherit);
+  font-size: var(--typography-body-medium-font-size, 0.875rem);
+  line-height: var(--typography-body-medium-line-height, 1.5);
+  cursor: text;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.html-editor-content.is-empty::before {
+  content: attr(data-placeholder);
+  color: var(--color-on-surface-variant, #49454f);
+  opacity: 0.6;
+  pointer-events: none;
+  position: absolute;
+}
+.html-editor-content ul,
+.html-editor-content ol {
+  padding-inline-start: 1.5rem;
+  margin-block: 0.25rem;
+}
+.html-editor-content a {
+  color: var(--color-primary, #6750a4);
+  text-decoration: underline;
+}
+.html-editor-content strong,
+.html-editor-content b {
+  font-weight: 600;
+}
+
+.read-only-tag {
+  margin: var(--spacing-050, 0.25rem);
+}
+
+:host([disabled]) .html-editor-content,
+:host([readonly]) .html-editor-content {
+  cursor: not-allowed;
+  opacity: 0.6;
+}`;
+
+/**
+ * @label HTML Editor
+ * @tag wc-html-editor
+ * @rawTag html-editor
+ *
+ * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.
+ * @overview
+ * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in
+ * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled
+ * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>
+ *
+ * <p>Get and set the HTML content via the <code>value</code> property. The component
+ * dispatches a <code>change</code> event whenever the content is modified.</p>
+ *
+ * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.
+ * @cssprop --html-editor-toolbar-background - Background color of the toolbar.
+ * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.
+ *
+ * @fires {Event} change - Fired whenever the editable content changes.
+ *
+ * @example
+ * ```html
+ * <wc-html-editor label="Description" value="<p>Hello <strong>world</strong></p>"></wc-html-editor>
+ * ```
+ * @tags input editor
+ */
+let HtmlEditor = class HtmlEditor extends BaseInput {
+    constructor() {
+        super(...arguments);
+        /** Current HTML value of the editor. */
+        this.value = '';
+        /** Label displayed above the editor. */
+        this.label = '';
+        /** Placeholder text shown when the editor is empty. */
+        this.placeholder = 'Enter text\u2026';
+        /** Visual style of the wrapping field. */
+        this.variant = 'default';
+        /** Helper text displayed below the editor. */
+        this.helperText = '';
+        /** Whether to show an error state. */
+        this.error = false;
+        /** Error message text. */
+        this.errorText = '';
+        this._focused = false;
+    }
+    // ─── Lifecycle ─────────────────────────────────────────────────────────────
+    firstUpdated() {
+        if (this.value && this._editorEl) {
+            this._editorEl.innerHTML = this.value;
+        }
+    }
+    updated(changed) {
+        if (changed.has('value') && this._editorEl) {
+            if (this._editorEl.innerHTML !== this.value) {
+                this._editorEl.innerHTML = this.value ?? '';
+            }
+        }
+        if (changed.has('disabled') || changed.has('readonly')) {
+            if (this._editorEl) {
+                this._editorEl.contentEditable =
+                    this.disabled || this.readonly ? 'false' : 'true';
+            }
+        }
+    }
+    // ─── Private helpers ───────────────────────────────────────────────────────
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _execCmd(command, value) {
+        if (this.disabled || this.readonly)
+            return;
+        this._editorEl.focus();
+        // execCommand is deprecated but remains broadly supported for rich-text editing
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        document.execCommand(command, false, value ?? null);
+    }
+    _handleInput() {
+        this.value = this._editorEl.innerHTML;
+        redispatchEvent(this, new Event('change', { bubbles: true, composed: true }));
+    }
+    _handleFocus() {
+        this._focused = true;
+    }
+    _handleBlur() {
+        this._focused = false;
+    }
+    _insertLink() {
+        // eslint-disable-next-line no-alert
+        const url = window.prompt('Enter URL:', 'https://');
+        if (url)
+            this._execCmd('createLink', url);
+    }
+    // ─── Toolbar button ────────────────────────────────────────────────────────
+    _toolbarButton(icon, title, command, value) {
+        return b `
+      <button
+        class="toolbar-btn"
+        title=${title}
+        aria-label=${title}
+        ?disabled=${this.disabled || this.readonly}
+        @mousedown=${(e) => e.preventDefault()}
+        @click=${(e) => {
+            e.preventDefault();
+            this._execCmd(command, value);
+        }}
+      >
+        <wc-icon name=${icon} size="sm"></wc-icon>
+      </button>
+    `;
+    }
+    // ─── Toolbar ───────────────────────────────────────────────────────────────
+    _renderToolbar() {
+        return b `
+      <div
+        class="html-editor-toolbar"
+        role="toolbar"
+        aria-label="Formatting toolbar"
+      >
+        ${this._toolbarButton('format_bold', 'Bold', 'bold')}
+        ${this._toolbarButton('format_italic', 'Italic', 'italic')}
+        ${this._toolbarButton('format_underlined', 'Underline', 'underline')}
+        ${this._toolbarButton('format_strikethrough', 'Strikethrough', 'strikeThrough')}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('format_align_left', 'Align left', 'justifyLeft')}
+        ${this._toolbarButton('format_align_center', 'Align center', 'justifyCenter')}
+        ${this._toolbarButton('format_align_right', 'Align right', 'justifyRight')}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('format_list_bulleted', 'Unordered list', 'insertUnorderedList')}
+        ${this._toolbarButton('format_list_numbered', 'Ordered list', 'insertOrderedList')}
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('format_indent_increase', 'Indent', 'indent')}
+        ${this._toolbarButton('format_indent_decrease', 'Outdent', 'outdent')}
+
+        <span class="toolbar-divider"></span>
+
+        <button
+          class="toolbar-btn"
+          title="Insert link"
+          aria-label="Insert link"
+          ?disabled=${this.disabled || this.readonly}
+          @mousedown=${(e) => e.preventDefault()}
+          @click=${() => this._insertLink()}
+        >
+          <wc-icon name="link" size="sm"></wc-icon>
+        </button>
+
+        <span class="toolbar-divider"></span>
+
+        ${this._toolbarButton('undo', 'Undo', 'undo')}
+        ${this._toolbarButton('redo', 'Redo', 'redo')}
+      </div>
+    `;
+    }
+    // ─── Render ────────────────────────────────────────────────────────────────
+    render() {
+        const isEmpty = !this.value || this.value === '<br>';
+        return b `
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        ?focused=${this._focused}
+        ?error=${this.error}
+        error-text=${this.errorText}
+        helper-text=${this.helperText}
+        variant=${this.variant}
+        ?populated=${!isEmpty}
+        .host=${this}
+        class=${e$1({
+            'html-editor-field': true,
+            disabled: this.disabled,
+            readonly: this.readonly,
+        })}
+      >
+        ${this._renderToolbar()}
+
+        <div
+          class=${e$1({
+            'html-editor-content': true,
+            'is-empty': isEmpty,
+        })}
+          contenteditable=${this.disabled || this.readonly ? 'false' : 'true'}
+          data-placeholder=${this.placeholder}
+          @input=${this._handleInput}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        ></div>
+
+        ${this.disabled
+            ? b `<wc-tag class="read-only-tag" color="red">Disabled</wc-tag>`
+            : this.readonly
+                ? b `<wc-tag class="read-only-tag" color="red">Read Only</wc-tag>`
+                : A}
+      </wc-field>
+    `;
+    }
+};
+HtmlEditor.styles = [css_248z];
+__decorate([
+    n({ type: String })
+], HtmlEditor.prototype, "value", void 0);
+__decorate([
+    n({ type: String })
+], HtmlEditor.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], HtmlEditor.prototype, "placeholder", void 0);
+__decorate([
+    n({ type: String })
+], HtmlEditor.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, attribute: 'helper-text' })
+], HtmlEditor.prototype, "helperText", void 0);
+__decorate([
+    n({ type: Boolean })
+], HtmlEditor.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-text' })
+], HtmlEditor.prototype, "errorText", void 0);
+__decorate([
+    r()
+], HtmlEditor.prototype, "_focused", void 0);
+__decorate([
+    e('.html-editor-content')
+], HtmlEditor.prototype, "_editorEl", void 0);
+HtmlEditor = __decorate([
+    IndividualComponent
+], HtmlEditor);
+
+export { HtmlEditor };
+//# sourceMappingURL=html-editor.js.map

package/dist/html-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-editor.js","sources":["../../src/html-editor/html-editor.ts"],"sourcesContent":["import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport BaseInput from '../input/BaseInput.js';\nimport { redispatchEvent } from '../__utils/dispatch-event-utils.js';\n\nimport styles from './html-editor.scss';\n\n/**\n * @label HTML Editor\n * @tag wc-html-editor\n * @rawTag html-editor\n *\n * @summary A WYSIWYG HTML editor component with a Material 3 styled toolbar.\n * @overview\n * <p>The HTML Editor provides a rich-text editing experience using the browser's built-in\n * <code>contenteditable</code> API. It wraps the editable area in a Material 3 styled\n * <code>wc-field</code> and exposes a toolbar with common formatting actions.</p>\n *\n * <p>Get and set the HTML content via the <code>value</code> property. The component\n * dispatches a <code>change</code> event whenever the content is modified.</p>\n *\n * @cssprop --html-editor-min-height - Minimum height of the editable area. Defaults to 8rem.\n * @cssprop --html-editor-toolbar-background - Background color of the toolbar.\n * @cssprop --html-editor-toolbar-border-color - Border color between toolbar and editing area.\n *\n * @fires {Event} change - Fired whenever the editable content changes.\n *\n * @example\n * ```html\n * <wc-html-editor label=\"Description\" value=\"<p>Hello <strong>world</strong></p>\"></wc-html-editor>\n * ```\n * @tags input editor\n */\n@IndividualComponent\nexport class HtmlEditor extends BaseInput {\n  static styles = [styles];\n\n  /** Current HTML value of the editor. */\n  @property({ type: String })\n  value = '';\n\n  /** Label displayed above the editor. */\n  @property({ type: String })\n  label = '';\n\n  /** Placeholder text shown when the editor is empty. */\n  @property({ type: String })\n  placeholder = 'Enter text\\u2026';\n\n  /** Visual style of the wrapping field. */\n  @property({ type: String })\n  variant: 'filled' | 'outlined' | 'default' = 'default';\n\n  /** Helper text displayed below the editor. */\n  @property({ type: String, attribute: 'helper-text' })\n  helperText = '';\n\n  /** Whether to show an error state. */\n  @property({ type: Boolean })\n  error = false;\n\n  /** Error message text. */\n  @property({ type: String, attribute: 'error-text' })\n  errorText = '';\n\n  @state() private _focused = false;\n\n  @query('.html-editor-content')\n  private _editorEl!: HTMLDivElement;\n\n  // ─── Lifecycle ─────────────────────────────────────────────────────────────\n\n  protected firstUpdated() {\n    if (this.value && this._editorEl) {\n      this._editorEl.innerHTML = this.value;\n    }\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('value') && this._editorEl) {\n      if (this._editorEl.innerHTML !== this.value) {\n        this._editorEl.innerHTML = this.value ?? '';\n      }\n    }\n    if (changed.has('disabled') || changed.has('readonly')) {\n      if (this._editorEl) {\n        this._editorEl.contentEditable =\n          this.disabled || this.readonly ? 'false' : 'true';\n      }\n    }\n  }\n\n  // ─── Private helpers ───────────────────────────────────────────────────────\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _execCmd(command: string, value?: string) {\n    if (this.disabled || this.readonly) return;\n    this._editorEl.focus();\n    // execCommand is deprecated but remains broadly supported for rich-text editing\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (document as any).execCommand(command, false, value ?? null);\n  }\n\n  private _handleInput() {\n    this.value = this._editorEl.innerHTML;\n    redispatchEvent(\n      this,\n      new Event('change', { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleFocus() {\n    this._focused = true;\n  }\n\n  private _handleBlur() {\n    this._focused = false;\n  }\n\n  private _insertLink() {\n    // eslint-disable-next-line no-alert\n    const url = window.prompt('Enter URL:', 'https://');\n    if (url) this._execCmd('createLink', url);\n  }\n\n  // ─── Toolbar button ────────────────────────────────────────────────────────\n\n  private _toolbarButton(\n    icon: string,\n    title: string,\n    command: string,\n    value?: string,\n  ) {\n    return html`\n      <button\n        class=\"toolbar-btn\"\n        title=${title}\n        aria-label=${title}\n        ?disabled=${this.disabled || this.readonly}\n        @mousedown=${(e: Event) => e.preventDefault()}\n        @click=${(e: Event) => {\n          e.preventDefault();\n          this._execCmd(command, value);\n        }}\n      >\n        <wc-icon name=${icon} size=\"sm\"></wc-icon>\n      </button>\n    `;\n  }\n\n  // ─── Toolbar ───────────────────────────────────────────────────────────────\n\n  private _renderToolbar() {\n    return html`\n      <div\n        class=\"html-editor-toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Formatting toolbar\"\n      >\n        ${this._toolbarButton('format_bold', 'Bold', 'bold')}\n        ${this._toolbarButton('format_italic', 'Italic', 'italic')}\n        ${this._toolbarButton('format_underlined', 'Underline', 'underline')}\n        ${this._toolbarButton(\n          'format_strikethrough',\n          'Strikethrough',\n          'strikeThrough',\n        )}\n\n        <span class=\"toolbar-divider\"></span>\n\n        ${this._toolbarButton('format_align_left', 'Align left', 'justifyLeft')}\n        ${this._toolbarButton(\n          'format_align_center',\n          'Align center',\n          'justifyCenter',\n        )}\n        ${this._toolbarButton(\n          'format_align_right',\n          'Align right',\n          'justifyRight',\n        )}\n\n        <span class=\"toolbar-divider\"></span>\n\n        ${this._toolbarButton(\n          'format_list_bulleted',\n          'Unordered list',\n          'insertUnorderedList',\n        )}\n        ${this._toolbarButton(\n          'format_list_numbered',\n          'Ordered list',\n          'insertOrderedList',\n        )}\n\n        <span class=\"toolbar-divider\"></span>\n\n        ${this._toolbarButton(\n          'format_indent_increase',\n          'Indent',\n          'indent',\n        )}\n        ${this._toolbarButton('format_indent_decrease', 'Outdent', 'outdent')}\n\n        <span class=\"toolbar-divider\"></span>\n\n        <button\n          class=\"toolbar-btn\"\n          title=\"Insert link\"\n          aria-label=\"Insert link\"\n          ?disabled=${this.disabled || this.readonly}\n          @mousedown=${(e: Event) => e.preventDefault()}\n          @click=${() => this._insertLink()}\n        >\n          <wc-icon name=\"link\" size=\"sm\"></wc-icon>\n        </button>\n\n        <span class=\"toolbar-divider\"></span>\n\n        ${this._toolbarButton('undo', 'Undo', 'undo')}\n        ${this._toolbarButton('redo', 'Redo', 'redo')}\n      </div>\n    `;\n  }\n\n  // ─── Render ────────────────────────────────────────────────────────────────\n\n  render() {\n    const isEmpty = !this.value || this.value === '<br>';\n\n    return html`\n      <wc-field\n        label=${this.label}\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?skeleton=${this.skeleton}\n        ?focused=${this._focused}\n        ?error=${this.error}\n        error-text=${this.errorText}\n        helper-text=${this.helperText}\n        variant=${this.variant}\n        ?populated=${!isEmpty}\n        .host=${this}\n        class=${classMap({\n          'html-editor-field': true,\n          disabled: this.disabled,\n          readonly: this.readonly,\n        })}\n      >\n        ${this._renderToolbar()}\n\n        <div\n          class=${classMap({\n            'html-editor-content': true,\n            'is-empty': isEmpty,\n          })}\n          contenteditable=${this.disabled || this.readonly ? 'false' : 'true'}\n          data-placeholder=${this.placeholder}\n          @input=${this._handleInput}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></div>\n\n        ${this.disabled\n          ? html`<wc-tag class=\"read-only-tag\" color=\"red\">Disabled</wc-tag>`\n          : this.readonly\n          ? html`<wc-tag class=\"read-only-tag\" color=\"red\">Read Only</wc-tag>`\n          : nothing}\n      </wc-field>\n    `;\n  }\n}\n"],"names":["html","classMap","nothing","styles","property","state","query"],"mappings":"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"}

package/dist/icon-button-CK1ZuE-2.js

@@ -0,0 +1,247 @@
+import { a as i, _ as __decorate, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { e } from './class-map-YU7g0o3B.js';
+import { B as BaseButton, o, s as spread } from './BaseButton-BNFAYn-S.js';
+import { c as css_248z$1, a as css_248z$2 } from './button-colors-Ccys3hvS.js';
+import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
+
+var css_248z = i`.button {
+  --_container-padding: 0.75rem;
+  width: var(--button-height);
+  --_container-padding: 0;
+}
+
+:host([size=xs]),
+:host([size=extra-small]) {
+  --button-height: 2rem;
+}
+
+:host([size=xs]) .button,
+:host([size=extra-small]) .button {
+  --_button-icon-size: 1rem;
+}
+
+:host([size=sm]),
+:host([size=small]) {
+  --button-height: 2.5rem;
+}
+
+:host([size=sm]) .button,
+:host([size=small]) .button {
+  --_button-icon-size: 1.25rem;
+  --_button-icon-label-spacing: 0.5rem;
+}
+
+:host([size=md]),
+:host([size=medium]) {
+  --button-height: 3.5rem;
+}
+
+:host([size=md]) .button,
+:host([size=medium]) .button {
+  --_button-icon-size: 1.5rem;
+}
+
+:host([size=lg]),
+:host([size=large]) {
+  --button-height: 6rem;
+}
+
+:host([size=lg]) .button,
+:host([size=large]) .button {
+  --_button-icon-size: 2rem;
+}
+
+:host([size=xl]) {
+  --button-height: 8.5rem;
+}
+
+:host([size=xl]) .button {
+  --_button-icon-size: 2.5rem;
+}`;
+
+/**
+ * @label Icon Button
+ * @tag wc-icon-button
+ * @rawTag icon-button
+ *
+ * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
+ *
+ * @overview
+ * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>
+ *
+ * @cssprop --button-container-shape: Defines the border radius of the button container shape.
+ *
+ * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
+ *
+ *
+ * @cssprop --filled-button-container-color: Color of the filled button container.
+ * @cssprop --filled-button-label-text-color: Text color of the filled button label.
+ *
+ * @cssprop --outlined-button-container-color: Color of the outlined button container.
+ * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
+ *
+ * @cssprop --text-button-label-text-color: Text color of the text button label.
+ *
+ * @cssprop --tonal-button-container-color: Color of the tonal button container.
+ * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
+ *
+ * @cssprop --elevated-button-container-color: Color of the elevated button container.
+ * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
+ *
+ * @cssprop --neo-button-container-color: Color of the neo button container.
+ * @cssprop --neo-button-label-text-color: Text color of the neo button label.
+ *
+ * @fires {CustomEvent} button:click - Dispatched when the button is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
+ * ```
+ * @tags display
+ */
+class IconButton extends BaseButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the button.
+         *
+         *  Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"text"` is a transparent button.
+         * `"tonal"` is a light color button.
+         * `"elevated"` is elevated button
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        this.__convertTypeToVariantAndColor();
+    }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'surface';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            button: true,
+            'button-element': true,
+            [`size-${this.size}`]: true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+            skeleton: this.skeleton,
+        };
+        if (!isLink) {
+            return b `<button
+          class=${e(cssClasses)}
+          id="button"
+          type=${this.htmlType}
+          @click=${this.__dispatchClickWithThrottle}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          
+          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
+          ?disabled=${this.disabled}
+          ${spread(this.configAria)}
+        >
+          ${this.renderButtonContent()}
+        </button>
+        ${this.__renderTooltip()}`;
+        }
+        return b `<a
+        class=${e(cssClasses)}
+        id="button"
+        href=${this.href}
+        target=${this.target}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        
+        aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
+        ${spread(this.configAria)}
+      >
+        ${this.renderButtonContent()}
+      </a>
+      ${this.__renderTooltip()}`;
+    }
+    renderButtonContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="neo-background"></div>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      <div class="button-content">
+        <slot></slot>
+      </div>
+
+      ${this.__renderDisabledReason(this.softDisabled)}
+    `;
+    }
+}
+IconButton.styles = [css_248z$1, css_248z$2, css_248z];
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], IconButton.prototype, "type", void 0);
+__decorate([
+    n()
+], IconButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "color", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "configAria", void 0);
+
+export { IconButton as I };
+//# sourceMappingURL=icon-button-CK1ZuE-2.js.map

package/dist/icon-button-CK1ZuE-2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-CK1ZuE-2.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n     * Type is preset of color and variant. Type will be only applied.\n     *\n     */\n    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n  \n    /**\n     * The visual style of the button.\n     *\n     *  Possible variant values:\n     * `\"filled\"` is a filled button.\n     * `\"outlined\"` is an outlined button.\n     * `\"text\"` is a transparent button.\n     * `\"tonal\"` is a light color button.\n     * `\"elevated\"` is elevated button\n     */\n    @property() variant:\n      | 'elevated'\n      | 'filled'\n      | 'tonal'\n      | 'outlined'\n      | 'text'\n      | 'neo' = 'filled';\n  \n    /**\n     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n     */\n    @property({ reflect: true }) color:\n      | 'primary'\n      | 'success'\n      | 'danger'\n      | 'warning'\n      | 'surface'\n      | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n  \n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    this.__convertTypeToVariantAndColor();\n  }\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'filled';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  override render() {\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      skeleton: this.skeleton,\n    };\n\n    if (!isLink) {\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          \n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    }\n    return html`<a\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @click=${this.__dispatchClick}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n        \n        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n        ?aria-disabled=${this.softDisabled}\n\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <slot></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property"],"mappings":"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"}