@ivds/core 0.1.1

package/src/components/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,483 @@
+// Breadcrumb component stories for Storybook
+// Showcases breadcrumb navigation patterns and accessibility features following Helsinki Design System patterns
+
+import './breadcrumb.scss';
+
+export default {
+  title: 'Core/Breadcrumb',
+  decorators: [(storyFn) => `<div style="padding: 1rem;">${storyFn()}</div>`],
+  parameters: {
+    docs: {
+      description: {
+        component: 'CSS-only breadcrumb navigation component using IVDS design tokens. Provides accessible navigation hierarchy with proper ARIA attributes, following Helsinki Design System patterns with CSS custom properties for theming.'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'color-contrast',
+            enabled: true
+          },
+          {
+            id: 'focus-order-semantics',
+            enabled: true
+          },
+          {
+            id: 'aria-allowed-attr',
+            enabled: true
+          }
+        ]
+      }
+    }
+  }
+};
+
+// Basic breadcrumb
+export const Primary = () => `
+  <nav class="ivds-breadcrumb" aria-label="Breadcrumb">
+    <ol class="ivds-breadcrumb__list">
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Home</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Products</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+      </li>
+    </ol>
+  </nav>
+`;
+
+// Size variants
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Small</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--small" aria-label="Small breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Default</h4>
+      <nav class="ivds-breadcrumb" aria-label="Default breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Large</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--large" aria-label="Large breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+`;
+
+// Separator variants
+export const Separators = () => `
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Default (Slash)</h4>
+      <nav class="ivds-breadcrumb" aria-label="Default separator breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Arrow</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--separator-arrow" aria-label="Arrow separator breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Chevron</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--separator-chevron" aria-label="Chevron separator breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Bullet</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--separator-bullet" aria-label="Bullet separator breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+`;
+
+// Theme variants
+export const Themes = () => `
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Default Theme</h4>
+      <nav class="ivds-breadcrumb" aria-label="Default theme breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div style="background-color: #1e293b; padding: 1rem; border-radius: 0.5rem;">
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #e2e8f0;">Dark Theme</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--theme-dark" aria-label="Dark theme breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 0.5rem; font-size: 0.875rem; color: #6b7280;">Muted Theme</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--theme-muted" aria-label="Muted theme breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+`;
+
+// Long breadcrumb path
+export const LongPath = () => `
+  <nav class="ivds-breadcrumb" aria-label="Long path breadcrumb">
+    <ol class="ivds-breadcrumb__list">
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Home</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Electronics</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Computers</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Laptops</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Gaming Laptops</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <span class="ivds-breadcrumb__current" aria-current="page">High Performance Gaming Laptop</span>
+      </li>
+    </ol>
+  </nav>
+`;
+
+// Single level breadcrumb
+export const SingleLevel = () => `
+  <nav class="ivds-breadcrumb" aria-label="Breadcrumb">
+    <ol class="ivds-breadcrumb__list">
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">Home</a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <span class="ivds-breadcrumb__current" aria-current="page">About</span>
+      </li>
+    </ol>
+  </nav>
+`;
+
+// Breadcrumb with icons
+export const WithIcons = () => `
+  <nav class="ivds-breadcrumb ivds-breadcrumb--with-icons" aria-label="Breadcrumb with icons">
+    <ol class="ivds-breadcrumb__list">
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">
+          <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 9L12 2L21 9V20A2 2 0 0 1 19 22H5A2 2 0 0 1 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <polyline points="9,22 9,12 15,12 15,22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          Home
+        </a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <a href="#" class="ivds-breadcrumb__link">
+          <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
+            <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2"/>
+            <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          Products
+        </a>
+      </li>
+      <li class="ivds-breadcrumb__item">
+        <span class="ivds-breadcrumb__current" aria-current="page">
+          <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
+            <line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2"/>
+            <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          Laptops
+        </span>
+      </li>
+    </ol>
+  </nav>
+`;
+
+// All variants showcase
+export const AllVariants = () => `
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    <div>
+      <h4 style="margin-bottom: 1rem; font-size: 1rem; font-weight: 600;">Small with Arrow Separator</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--small ivds-breadcrumb--separator-arrow" aria-label="Small arrow breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Products</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Laptops</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 1rem; font-size: 1rem; font-weight: 600;">Large with Icons and Chevron</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--large ivds-breadcrumb--with-icons ivds-breadcrumb--separator-chevron" aria-label="Large icon chevron breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">
+              <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 9L12 2L21 9V20A2 2 0 0 1 19 22H5A2 2 0 0 1 3 20V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Home
+            </a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">
+              <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
+              </svg>
+              Products
+            </a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">
+              <svg class="ivds-breadcrumb__icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
+              </svg>
+              Laptops
+            </span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    
+    <div style="background-color: #1e293b; padding: 1.5rem; border-radius: 0.5rem;">
+      <h4 style="margin-bottom: 1rem; font-size: 1rem; font-weight: 600; color: #e2e8f0;">Dark Theme with Bullet Separator</h4>
+      <nav class="ivds-breadcrumb ivds-breadcrumb--theme-dark ivds-breadcrumb--separator-bullet" aria-label="Dark theme bullet breadcrumb">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Dashboard</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Analytics</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Reports</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Monthly Summary</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+`;
+
+// Accessibility example
+export const AccessibilityFeatures = () => `
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    <div>
+      <h4 style="margin-bottom: 1rem;">Standard Breadcrumb with ARIA</h4>
+      <nav class="ivds-breadcrumb" aria-label="Breadcrumb navigation">
+        <ol class="ivds-breadcrumb__list">
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link" aria-describedby="breadcrumb-help">Home</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Documentation</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <a href="#" class="ivds-breadcrumb__link">Components</a>
+          </li>
+          <li class="ivds-breadcrumb__item">
+            <span class="ivds-breadcrumb__current" aria-current="page">Breadcrumb</span>
+          </li>
+        </ol>
+      </nav>
+      <p id="breadcrumb-help" style="font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem;">
+        Use breadcrumb navigation to understand your current location within the site hierarchy.
+      </p>
+    </div>
+    
+    <div>
+      <h4 style="margin-bottom: 1rem;">Breadcrumb in Container</h4>
+      <div style="background-color: #f8fafc; padding: 1rem; border-radius: 0.5rem;">
+        <nav class="ivds-breadcrumb" aria-label="Page location">
+          <ol class="ivds-breadcrumb__list">
+            <li class="ivds-breadcrumb__item">
+              <a href="#" class="ivds-breadcrumb__link">Dashboard</a>
+            </li>
+            <li class="ivds-breadcrumb__item">
+              <a href="#" class="ivds-breadcrumb__link">Settings</a>
+            </li>
+            <li class="ivds-breadcrumb__item">
+              <span class="ivds-breadcrumb__current" aria-current="page">Profile</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+  </div>
+`;
+
+// Responsive behavior
+export const ResponsiveBehavior = () => `
+  <div style="max-width: 300px; border: 1px solid #e2e8f0; padding: 1rem; border-radius: 0.5rem;">
+    <h4 style="margin-bottom: 1rem; font-size: 0.875rem;">Responsive (resize to see effect)</h4>
+    <nav class="ivds-breadcrumb ivds-breadcrumb--responsive" aria-label="Responsive breadcrumb">
+      <ol class="ivds-breadcrumb__list">
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Home</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Very Long Category Name</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Subcategory</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Products</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <span class="ivds-breadcrumb__current" aria-current="page">Current Page with Long Title</span>
+        </li>
+      </ol>
+    </nav>
+  </div>
+`;
+
+// Truncation behavior
+export const Truncation = () => `
+  <div style="max-width: 400px; border: 1px solid #e2e8f0; padding: 1rem; border-radius: 0.5rem;">
+    <h4 style="margin-bottom: 1rem; font-size: 0.875rem;">Truncated Long Text</h4>
+    <nav class="ivds-breadcrumb ivds-breadcrumb--truncate" aria-label="Truncated breadcrumb">
+      <ol class="ivds-breadcrumb__list">
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Home</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">This is a very long category name that will be truncated</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <a href="#" class="ivds-breadcrumb__link">Another long subcategory name</a>
+        </li>
+        <li class="ivds-breadcrumb__item">
+          <span class="ivds-breadcrumb__current" aria-current="page">Current page with an extremely long title that exceeds normal length</span>
+        </li>
+      </ol>
+    </nav>
+  </div>
+`;

package/src/components/button/__tests__/button-mixins.test.scss

@@ -0,0 +1,35 @@
+// SCSS compilation test for button mixins
+
+// Base button mixin with common styles
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--borderWidth-1, 1px) solid transparent;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+
+// Test compilation by using the mixins
+.test-button-base {
+  @include button-base;
+}
+
+.test-button-variant {
+  background-color: #0ea5e9;
+  color: #ffffff;
+  border-color: transparent;
+}
+
+.test-button-size {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  min-height: 44px;
+}

package/src/components/button/_button-mixin.scss

@@ -0,0 +1,120 @@
+// Button component mixins and private styles
+// This file contains mixins for button variants, sizes, and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base button mixin with common styles
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--borderWidth-1, 1px) solid transparent;
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #f97316);
+    outline-offset: 2px;
+  }
+  
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// Button variant mixin
+@mixin button-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null, $hover-border: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $border-color;
+  
+  @if $hover-bg {
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: $hover-bg;
+      
+      @if $hover-border {
+        border-color: $hover-border;
+      }
+    }
+  }
+  
+  &:active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px);
+  }
+}
+
+// Button size mixin
+@mixin button-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+// Icon spacing
+@mixin button-icon-spacing($gap: var(--spacing-2, 0.5rem)) {
+  gap: $gap;
+  
+  .ivds-button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+}
+
+// Loading state
+@mixin button-loading {
+  position: relative;
+  color: transparent !important;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentcolor;
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: ivds-button-spin 0.8s linear infinite;
+  }
+}
+
+// Keyframes for loading animation
+@keyframes ivds-button-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+// Full width button mixin
+@mixin button-full-width {
+  width: 100%;
+  justify-content: center;
+}
+
+// Icon-only button mixin
+@mixin button-icon-only($size: 44px) {
+  width: $size;
+  height: $size;
+  padding: 0;
+  
+  .ivds-button__icon {
+    margin: 0;
+  }
+}