@portfoliablejs/valence 0.1.0

package/src/stories/atoms/Button/Button.Architecture.mdx

@@ -0,0 +1,384 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta title="Atoms/Button [v1.0.1]/Architecture" />
+
+# `ds-button`
+
+The `ds-button` component is an **atomic, multi-use action primitive** in the Valence Design System. Within the `portfoliable` web application shell, it serves as a core action target across multiple views and composite molecules, such as primary call-to-actions in the Case Reader, external repository links, media controls in `ds-video-player`, and social share triggers.
+<br />
+
+## Principles
+<br />
+### Unidirectional Data Flow & State Synchronization
+The component follows a strict **State In / Events Out** lifecycle model:
+* **State In (Observed Attributes):** The component observes core state attributes (`variant`, `aria-label`, `disabled`) and composition attributes (`has-text`, `has-icon`, `icon`, `icon-variant`, `icon-position`, `has-image`, `image-src`, `image-alt`, `image-position`). When attributes mutate, `updateAttributes()` synchronizes internal shadow elements for icon, image, and label visibility.
+* **Events Out (Native Interaction):** User interaction triggers standard `click` events emitted from the host.
+* **Encapsulation:** The component handles internal focus styling and ARIA delegation without exposing its inner Shadow DOM subtree.
+
+<mermaid-diagram chart={`
+  flowchart LR
+      subgraph Host["Host Application / Composite Container"]
+          direction TB
+          App["App Shell / Molecule"]
+      end
+
+      subgraph WebComp["ds-button (Shadow DOM)"]
+          HostTag["&lt;ds-button&gt;"]
+          ButtonEl["&lt;button&gt;"]
+          IconEl["&lt;ds-icon&gt;"]
+          SlotEl["&lt;slot&gt;"]
+      end
+
+      subgraph Composite["ds-tooltip (Optional)"]
+          Tooltip["&lt;ds-tooltip&gt;"]
+      end
+
+      App -->|"1. State Attributes<br/><code>variant, has-text, has-icon, has-image</code>"| HostTag
+      HostTag -->|"2. Updates Attributes"| ButtonEl
+      HostTag -->|"3. Configures Size & Variant"| IconEl
+      HostTag -->|"4. Directs Label Content"| SlotEl
+      ButtonEl -->|"5. Emits Interaction Events"| App
+      HostTag -.->|"Hover / Focus Sync"| Tooltip
+
+      %% Styling
+      style Host fill:#f8fafc,stroke:#94a3b8,stroke-width:2px,color:#0f172a
+      style WebComp fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e3a8a
+      style Composite fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#14532d
+      style HostTag fill:#ffffff,stroke:#cbd5e1,color:#0f172a
+      style ButtonEl fill:#ffffff,stroke:#93c5fd,color:#1e3a8a
+      style IconEl fill:#ffffff,stroke:#93c5fd,color:#1e3a8a
+      style SlotEl fill:#ffffff,stroke:#93c5fd,color:#1e3a8a
+      style Tooltip fill:#ffffff,stroke:#86efac,color:#14532d
+`} />
+
+<br />
+## Slot Architecture
+
+### Internal Shadow DOM Structure
+The Shadow DOM template is intentionally compressed on a single line to prevent unwanted whitespace text nodes around slot projections:
+
+```html
+<style>${css}</style>
+<button type="button">
+  <img class="btn-image" alt="" loading="lazy" referrerpolicy="no-referrer" style="display: none;">
+  <ds-icon class="btn-icon" style="display: none;"></ds-icon>
+  <span class="btn-label"><slot></slot></span>
+</button>
+```
+
+### Slot Hierarchy Table
+
+<table>
+  <thead>
+    <tr>
+      <th>Slot Name</th>
+      <th>Allowed Children</th>
+      <th>Description</th>
+      <th>Fallback / Variant Behavior</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`default`</td>
+      <td>Text node, `<span>`</td>
+      <td>Primary textual button label injected by the host application.</td>
+      <td>Rendered when `has-text` is enabled (default) across all variants. Hidden when `has-text="false"`.</td>
+    </tr>
+  </tbody>
+</table>
+<br />
+### Iconography & Tooltip Synergy
+1. **Child `<ds-icon>` Mechanics:** When `has-icon` is enabled and `icon` is provided, `ds-button` renders the internal `<ds-icon>` and applies dynamic sizing (`20` in floating, `14` otherwise).
+2. **Child Image Mechanics:** When `has-image` is enabled, `ds-button` renders the internal image using `image-src` and `image-alt`. Image sizing follows icon sizing logic with a slightly larger visual footprint.
+3. **Content Position Reversal:** Setting `icon-position="right"` or `image-position="right"` reflects to `content-position="right"`, which sets `row-reverse` on the internal button container.
+4. **Precedence Rule:** If both `has-image` and `has-icon` are enabled, image content takes precedence and icon content is suppressed.
+5. **Tooltip Composite Pattern:** When paired with `<ds-tooltip>`, hovering or focusing the button activates the tooltip's `visible` attribute to display helper text and keyboard shortcuts.
+<br />
+
+## API Contract
+
+### Observed Attributes & Properties
+<table>
+  <thead>
+    <tr>
+      <th>Property / Attribute</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`variant`</td>
+      <td>`'primary' | 'secondary' | 'tertiary' | 'floating'`</td>
+      <td>`'primary'`</td>
+      <td>Determines visual presentation, geometry, and hover scaling behaviors.</td>
+    </tr>
+    <tr>
+      <td>`has-text`</td>
+      <td>`boolean`</td>
+      <td>`true`</td>
+      <td>Toggles rendering of slotted text label content inside the button.</td>
+    </tr>
+    <tr>
+      <td>`has-icon`</td>
+      <td>`boolean`</td>
+      <td>`false`</td>
+      <td>Enables icon rendering (requires `icon`).</td>
+    </tr>
+    <tr>
+      <td>`has-image`</td>
+      <td>`boolean`</td>
+      <td>`false`</td>
+      <td>Enables image rendering (requires `image-src`), and takes precedence over icon.</td>
+    </tr>
+    <tr>
+      <td>`aria-label`</td>
+      <td>`string`</td>
+      <td>`null`</td>
+      <td>Accessibility label delegated to internal `<button>` and scrubbed from host tag.</td>
+    </tr>
+    <tr>
+      <td>`disabled`</td>
+      <td>`boolean`</td>
+      <td>`false`</td>
+      <td>Disables interactivity, updates cursor to `not-allowed`, and lowers opacity.</td>
+    </tr>
+    <tr>
+      <td>`icon`</td>
+      <td>`string`</td>
+      <td>`null`</td>
+      <td>Name of the icon to render inside internal `<ds-icon>`.</td>
+    </tr>
+    <tr>
+      <td>`icon-variant`</td>
+      <td>`'outline' | 'fill'`</td>
+      <td>`'outline'`</td>
+      <td>Sets the icon rendering style (`fill` vs default outline).</td>
+    </tr>
+    <tr>
+      <td>`icon-position`</td>
+      <td>`'left' | 'right'`</td>
+      <td>`'left'`</td>
+      <td>Determines icon placement relative to slotted label text.</td>
+    </tr>
+    <tr>
+      <td>`image-src`</td>
+      <td>`string`</td>
+      <td>`https://thispersondoesnotexist.com/random-person.jpeg`</td>
+      <td>Source URL used when image content is enabled.</td>
+    </tr>
+    <tr>
+      <td>`image-alt`</td>
+      <td>`string`</td>
+      <td>`Profile image`</td>
+      <td>Alt text used by the internal image.</td>
+    </tr>
+    <tr>
+      <td>`image-position`</td>
+      <td>`'left' | 'right'`</td>
+      <td>`'left'`</td>
+      <td>Determines image placement relative to slotted label text.</td>
+    </tr>
+  </tbody>
+</table>
+<br />
+### Emitted Events
+
+<table>
+  <thead>
+    <tr>
+      <th>Event Name</th>
+      <th>Type</th>
+      <th>Bubbles / Composed</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`click`</td>
+      <td>`MouseEvent`</td>
+      <td>`true` / `true`</td>
+      <td>Native DOM click event dispatched when the user activates an enabled button.</td>
+    </tr>
+  </tbody>
+</table>
+<br />
+  ### Sub-Atomic CSS Custom Property Hooks
+  
+  <table>
+    <thead>
+      <tr>
+        <th>CSS Variable</th>
+        <th>Fallback Token Default</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>`--ds-button-radius`</td>
+        <td>`var(--radius-pill)` or `var(--radius-circle)`</td>
+        <td>Overrides default button corner rounding.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-bg`</td>
+        <td>`var(--color-black)` or `transparent`</td>
+        <td>Overrides background surface fill color.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-hover-bg`</td>
+        <td>`var(--color-gray-dark)` or `rgba(0,0,0,0.12)`</td>
+        <td>Overrides hover state background fill.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-active-bg`</td>
+        <td>`var(--color-black)` or `rgba(0,0,0,0.18)`</td>
+        <td>Overrides active state background fill.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-border-width`</td>
+        <td>`var(--border-width-thin)` or `var(--border-width-medium)`</td>
+        <td>Overrides button border stroke width.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-border-color`</td>
+        <td>`var(--color-black)` or `var(--color-gray-light)`</td>
+        <td>Overrides button border color.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-hover-scale`</td>
+        <td>`1.02`</td>
+        <td>Hover state scale transform multiplier.</td>
+      </tr>
+      <tr>
+        <td>`--ds-button-active-scale`</td>
+        <td>`0.95`</td>
+        <td>Active click state scale transform multiplier.</td>
+      </tr>
+    </tbody>
+  </table>
+
+<br />
+
+## `a11y` Engine
+
+### 1. ARIA Delegation & Host Scrubbing
+When `aria-label` is applied to `<ds-button>` in HTML, `updateAttributes()` delegates the attribute down to the internal shadow `<button>` element and scrubs `aria-label` from the host tag. This prevents browser screen readers and automated accessibility checkers from reporting `aria-prohibited-attr` on non-interactive custom element wrappers.
+
+### 2. Root Mutation Observer (`_observeRootAccessibility`)
+During `connectedCallback()`, `ds-button` instantiates a `MutationObserver` on `document.documentElement`. It reflects root accessibility classes as host boolean attributes:
+
+<table>
+  <thead>
+    <tr>
+      <th>Root Class (`<html>`)</th>
+      <th>Reflected Host Attribute</th>
+      <th>CSS Styling Reaction</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`.a11y-dark-mode`</td>
+      <td>`a11y-dark-mode`</td>
+      <td>Inverts surface tokens, using high-luminosity borders and dark player backgrounds.</td>
+    </tr>
+    <tr>
+      <td>`.a11y-high-contrast`</td>
+      <td>`a11y-high-contrast`</td>
+      <td>Forces binary 21:1 contrast ratios (`#000000` / `#FFFFFF`), bold weight (`700`), and outline rings.</td>
+    </tr>
+    <tr>
+      <td>`.a11y-forced-colors`</td>
+      <td>`a11y-forced-colors`</td>
+      <td>Applies system active theme variables (`Canvas`, `CanvasText`, `Highlight`, `HighlightText`) under `forced-color-adjust: none`.</td>
+    </tr>
+    <tr>
+      <td>`.a11y-dyslexia`</td>
+      <td>`a11y-dyslexia`</td>
+      <td>Replaces font family with Comic Sans and increases letter and word spacing.</td>
+    </tr>
+    <tr>
+      <td>`.a11y-reduce-motion`</td>
+      <td>`a11y-reduce-motion`</td>
+      <td>Forces transition and animation durations to `0s`.</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## Examples
+
+### Example A: Primary CTA Button (Case Reader View)
+Used inside the Case Reader to launch the primary video presentation:
+
+```javascript
+import 'valence/ds-button';
+
+const container = document.createElement('div');
+container.innerHTML = `
+  <ds-button 
+    variant="primary" 
+    has-icon
+    icon="play" 
+    icon-position="left">
+    Play Video
+  </ds-button>
+`;
+
+const button = container.querySelector('ds-button');
+button.addEventListener('click', () => {
+  appShell.openVideoPlayer();
+});
+```
+
+### Example B: Floating Control Button with Keyboard Shortcut (Video Player)
+Used inside `ds-video-player` controls as an elevated overlay action:
+
+```javascript
+import 'valence/ds-button';
+import 'valence/ds-tooltip';
+
+const wrapper = document.createElement('div');
+wrapper.style.position = 'relative';
+
+wrapper.innerHTML = `
+  <ds-button 
+    variant="floating" 
+    icon="play" 
+    aria-label="Play Video">
+  </ds-button>
+
+  <ds-tooltip 
+    text="Play Video" 
+    position="top" 
+    show-kbd 
+    kbd-label="Esc">
+  </ds-tooltip>
+`;
+
+const btn = wrapper.querySelector('ds-button');
+const tooltip = wrapper.querySelector('ds-tooltip');
+
+btn.addEventListener('mouseenter', () => tooltip.setAttribute('visible', 'true'));
+btn.addEventListener('mouseleave', () => tooltip.removeAttribute('visible'));
+```
+
+### Example C: Icon-Only Action (Social Sharing)
+Used inside header toolbars and case cards to trigger share links:
+
+```javascript
+const shareBtn = document.createElement('ds-button');
+shareBtn.setAttribute('variant', 'tertiary');
+shareBtn.setAttribute('has-icon', 'true');
+shareBtn.setAttribute('has-text', 'false');
+shareBtn.setAttribute('icon', 'share');
+shareBtn.setAttribute('aria-label', 'Share case study');
+
+shareBtn.addEventListener('click', async () => {
+  if (navigator.share) {
+    await navigator.share({ title: document.title, url: window.location.href });
+  }
+});
+```

package/src/stories/atoms/Button/Button.Changelog.mdx

@@ -0,0 +1,124 @@
+import { Meta, Subtitle, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Atoms/Button [v1.0.1]/Changelog" />
+
+# Changelog
+
+<br />
+
+## [1.0.1] - 2026-07-24
+
+<br />
+
+### Props Simplification Update
+
+The button API has been simplified so visual styling is driven by four variants (`primary`, `secondary`, `tertiary`, `floating`) while iconography and imagery are now orthogonal content props that can be configured on any variant.
+
+<br />
+
+### Summary of Changes
+
+<table>
+  <thead>
+    <tr>
+      <th>Classification</th>
+      <th>Scope / Context</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`Changed`</td>
+      <td>`ds-button`</td>
+      <td>Renamed the `text` variant to `tertiary` and removed `icon`/`image` as standalone variants.</td>
+    </tr>
+    <tr>
+      <td>`Added`</td>
+      <td>`ds-button`</td>
+      <td>Introduced `has-icon`, `has-image`, and `has-text` props so text, icon, and image content can be composed across all variants.</td>
+    </tr>
+    <tr>
+      <td>`Added`</td>
+      <td>`ds-button`</td>
+      <td>Added `image-position` support and unified directional layout under reflected `content-position` for right-aligned content.</td>
+    </tr>
+    <tr>
+      <td>`Fixed`</td>
+      <td>`button.css`</td>
+      <td>Adjusted no-text spacing so horizontal padding is symmetric, enlarged image content size, and corrected floating hug behavior for text-present vs text-hidden states.</td>
+    </tr>
+    <tr>
+      <td>`Changed`</td>
+      <td>`Button.stories.js`</td>
+      <td>Updated controls and stories to the simplified props model and new variant names.</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+## [1.0.0] - 2026-07-16
+
+<br />
+
+### Initial Release
+
+The stable debut of the presentational button component (`ds-button`) featuring support for nesting icons, custom tooltips, multiple stylistic form factor variants, and active root accessibility syncs.
+
+<br />
+
+### Summary of Changes
+
+<table>
+  <thead>
+    <tr>
+      <th>Classification</th>
+      <th>Scope / Context</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>`Added`</td>
+      <td>`ds-button`</td>
+      <td>Initial release of five baseline styling variants (`primary`, `secondary`, `text`, `icon`, `floating`) with custom viewport transforms.</td>
+    </tr>
+    <tr>
+      <td>`Added`</td>
+      <td>`ds-button`</td>
+      <td>Integrated support for nesting `<ds-icon>` structures with dynamic size mappings based on active variants.</td>
+    </tr>
+    <tr>
+      <td>`Added`</td>
+      <td>`_observeRootAccessibility`</td>
+      <td>Configured passive root observer reflecting visual preferences downstream onto host attributes.</td>
+    </tr>
+    <tr>
+      <td>`Fixed`</td>
+      <td>`ds-button`</td>
+      <td>Scrubbed the Light DOM host attribute `aria-label` after delegating it down into internal button primitives to prevent prohibit validations.</td>
+    </tr>
+    <tr>
+      <td>`Fixed`</td>
+      <td>`Button.stories.js`</td>
+      <td>Standardized sub-atomic style overrides to bind to `--ds-button-*` CSS token hooks rather than `--btn-*` variables.</td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+### Added
+- **Core Variants:** Introduced `<ds-button>` built specifically with five functional variant structures (`primary`, `secondary`, `text`, `icon`, `floating`).
+- **Iconography Synergy:** Auto-calculates icon dimensions based on active variant templates and reverses directions when `icon-position="right"` is active.
+- **Root Class Syncing:** Built-in `MutationObserver` on the HTML root reflects global settings onto host element attributes.
+- **Thematic Overrides:** Bound border-radius, background, hover backdrop, active backdrop, borders, and viewport scales to standard `--ds-button-*` properties.
+- **Storybook Workspace:** Authored interactive Controls and automated CSF3 story play-tests inside `Button.stories.js`.
+
+### Fixed
+- **Host ARIA Delegation:** Clears light DOM `aria-label` custom attributes on host custom elements after delegating them to focusable internal buttons.
+- **Disabled Host Cursor:** Enforces `cursor: not-allowed` on the host wrapper element when disabled is mapped.
+
+---
+
+*This changelog is specific to the `<ds-button>` component. For design system global releases, refer to the main [Getting Started/Changelog](?path=/docs/getting-started-changelog--docs).*

package/src/stories/atoms/Button/Button.js

@@ -0,0 +1,131 @@
+import css from './button.css?inline';
+import '../../sub-atomic/Iconography/Iconography'; 
+
+const DEFAULT_IMAGE_SRC = 'https://thispersondoesnotexist.com/random-person.jpeg';
+const DEFAULT_IMAGE_ALT = 'Profile image';
+const CONTENT_SIZE_PX = '22';
+
+export class Button extends HTMLElement {
+  static get observedAttributes() {
+    return ['variant', 'aria-label', 'disabled', 'has-text', 'has-icon', 'icon', 'icon-variant', 'icon-position', 'has-image', 'image-src', 'image-alt', 'image-position'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `<style>${css}</style><button type="button"><img class="btn-image" alt="" loading="lazy" referrerpolicy="no-referrer" style="display: none;"><ds-icon class="btn-icon" style="display: none;"></ds-icon><span class="btn-label"><slot></slot></span></button>`;
+  }
+
+  connectedCallback() {
+    this.buttonEl = this.shadowRoot.querySelector('button');
+    this.imageEl = this.shadowRoot.querySelector('.btn-image');
+    this.iconEl = this.shadowRoot.querySelector('.btn-icon');
+    this.updateAttributes();
+    this._observeRootAccessibility();
+  }
+
+  disconnectedCallback() {
+    if (this._themeObserver) {
+      this._themeObserver.disconnect();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'aria-label' && newValue === null) return;
+
+    if (this.buttonEl && oldValue !== newValue) {
+      this.updateAttributes();
+    }
+  }
+
+  _observeRootAccessibility() {
+    const root = this.ownerDocument.documentElement;
+    const sync = () => {
+      this.toggleAttribute('a11y-dark-mode', root.classList.contains('a11y-dark-mode'));
+      this.toggleAttribute('a11y-high-contrast', root.classList.contains('a11y-high-contrast'));
+      this.toggleAttribute('a11y-large-text', root.classList.contains('a11y-large-text'));
+      this.toggleAttribute('a11y-dyslexia', root.classList.contains('a11y-dyslexia'));
+      this.toggleAttribute('a11y-reduce-motion', root.classList.contains('a11y-reduce-motion'));
+      this.toggleAttribute('a11y-focus-mode', root.classList.contains('a11y-focus-mode'));
+      this.toggleAttribute('a11y-forced-colors', root.classList.contains('a11y-forced-colors'));
+    };
+
+    sync();
+    this._themeObserver = new MutationObserver(sync);
+    this._themeObserver.observe(root, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  }
+
+  updateAttributes() {
+    const requestedVariant = this.getAttribute('variant') || 'primary';
+    const normalizedVariant = requestedVariant === 'text' ? 'tertiary' : requestedVariant;
+    const variant = ['primary', 'secondary', 'tertiary', 'floating'].includes(normalizedVariant)
+      ? normalizedVariant
+      : 'primary';
+    const ariaLabel = this.getAttribute('aria-label');
+    const disabled = this.hasAttribute('disabled');
+    const hasTextAttr = this.getAttribute('has-text');
+    const hasText = hasTextAttr === null ? true : hasTextAttr !== 'false';
+    const hasIcon = this.hasAttribute('has-icon');
+    const hasImage = this.hasAttribute('has-image');
+    const iconName = this.getAttribute('icon');
+    const iconPosition = this.getAttribute('icon-position') || 'left';
+    const imagePosition = this.getAttribute('image-position') || 'left';
+    const activePosition = hasImage ? imagePosition : iconPosition;
+
+    this.buttonEl.className = `variant-${variant}`;
+    this.buttonEl.disabled = disabled;
+
+    if (ariaLabel) {
+      this.buttonEl.setAttribute('aria-label', ariaLabel);
+      this.removeAttribute('aria-label');
+    }
+
+    if (hasImage) {
+      this.imageEl.setAttribute('src', this.getAttribute('image-src') || DEFAULT_IMAGE_SRC);
+      this.imageEl.setAttribute('alt', this.getAttribute('image-alt') || DEFAULT_IMAGE_ALT);
+      this.imageEl.style.setProperty('--ds-button-image-content-size', `${CONTENT_SIZE_PX}px`);
+      this.imageEl.style.display = 'block';
+      this.buttonEl.classList.add('has-image');
+    } else {
+      this.imageEl.style.display = 'none';
+      this.buttonEl.classList.remove('has-image');
+      this.imageEl.style.removeProperty('--ds-button-image-content-size');
+      this.imageEl.removeAttribute('src');
+      this.imageEl.setAttribute('alt', '');
+    }
+
+    if (hasIcon && iconName && !hasImage) {
+      this.iconEl.setAttribute('name', iconName);
+      
+      // Strict mapping
+      const iconVariant = this.getAttribute('icon-variant');
+      if (iconVariant === 'fill') {
+        this.iconEl.setAttribute('variant', 'fill');
+      } else {
+        this.iconEl.removeAttribute('variant');
+      }
+
+      this.iconEl.setAttribute('size', CONTENT_SIZE_PX);
+      this.iconEl.style.display = 'inline-flex';
+      this.buttonEl.classList.add('has-icon');
+    } else {
+      this.iconEl.style.display = 'none';
+      this.buttonEl.classList.remove('has-icon');
+    }
+
+    this.buttonEl.classList.toggle('no-text', !hasText);
+
+    if (activePosition === 'right') {
+      this.setAttribute('content-position', 'right');
+    } else {
+      this.removeAttribute('content-position');
+    }
+  }
+}
+
+if (!customElements.get('ds-button')) {
+  customElements.define('ds-button', Button);
+}