Components

<sds-logo label="Sandvik"></sds-logo>
<sds-logo variant="symbol" label="Sandvik symbol"></sds-logo>
<sds-logo variant="wordmark" label="Sandvik"></sds-logo>

<!-- size by height; color follows the theme or --sds-logo-color -->
<sds-logo style="--sds-logo-size: 3rem"></sds-logo>

<sds-button>Primary</sds-button>
<sds-button size="s">Small</sds-button>
<sds-button size="l">Large</sds-button>
<sds-button variant="secondary">Secondary</sds-button>
<sds-button variant="link">Link</sds-button>
<sds-button disabled>Disabled</sds-button>

<sds-tag>Structural products</sds-tag>
<sds-tag color="blue" selected>Telecom</sds-tag>
<sds-tag color="orange" selected>Land-based radar</sds-tag>
<sds-tag color="green" selected>Laser comms</sds-tag>
<sds-tag color="black" selected>Archived</sds-tag>

<sds-toggle>Label left (default)</sds-toggle>
<sds-toggle checked>On</sds-toggle>
<sds-toggle label-position="right">Label right</sds-toggle>
<sds-toggle disabled>Disabled</sds-toggle>

<!-- helper = hint text beneath the field -->
<sds-input label="First name" value="Johansson"
  helper="As it appears on your ID"></sds-input>

<!-- error-message replaces the hint in the same position -->
<sds-input label="Email" type="email" error
  error-message="Please fill in this field"></sds-input>

<sds-input label="Disabled" value="Read only" disabled></sds-input>

<div style="display:flex; align-items:end; gap:12px">
  <sds-input placeholder="Contract code"></sds-input>
  <sds-button size="l" variant="secondary">Apply</sds-button>
</div>

<sds-checkbox>Unchecked</sds-checkbox>
<sds-checkbox checked>Checked</sds-checkbox>
<sds-checkbox indeterminate>Mixed</sds-checkbox>
<sds-checkbox error>Error</sds-checkbox>
<sds-checkbox disabled>Disabled</sds-checkbox>

<sds-radio-group label="Service category" value="b">
  <sds-radio value="a">Maintenance</sds-radio>
  <sds-radio value="b">Repair</sds-radio>
  <sds-radio value="c">Inspection</sds-radio>
  <sds-radio value="d" disabled>Unavailable</sds-radio>
</sds-radio-group>

<sds-select label="Country">
  <sds-option value="se">Sweden</sds-option>
  <sds-option value="de">Germany</sds-option>
  <sds-option value="us">United States</sds-option>
  <sds-option value="jp" disabled>Japan</sds-option>
</sds-select>

<sds-search placeholder="Search…"></sds-search>
<sds-search value="Performance"></sds-search>

<sds-tabs selected="overview">
  <sds-tab value="overview">Overview</sds-tab>
  <sds-tab value="specs">Specifications</sds-tab>
  <sds-tab-panel slot="panel" value="overview">…</sds-tab-panel>
  <sds-tab-panel slot="panel" value="specs">…</sds-tab-panel>
</sds-tabs>

<sds-breadcrumbs>
  <sds-breadcrumb-item href="/">Home</sds-breadcrumb-item>
  <sds-breadcrumb-item href="/products">Products</sds-breadcrumb-item>
  <sds-breadcrumb-item current>DNMG inserts</sds-breadcrumb-item>
</sds-breadcrumbs>

<sds-sidenav value="tools" context="group" label="Main navigation">
  <sds-sidenav-item value="tools">Tools &amp; inserts</sds-sidenav-item>
  <sds-sidenav-item value="support">Support</sds-sidenav-item>
  <sds-sidenav-item value="about">About</sds-sidenav-item>
</sds-sidenav>

<sds-top-nav value="offering" context="group" label="Main navigation">
  <sds-logo slot="brand" variant="logotype" label="Sandvik"></sds-logo>
  <sds-top-nav-item value="about">About us</sds-top-nav-item>
  <sds-top-nav-item value="offering">Offering</sds-top-nav-item>
  <sds-top-nav-item value="investors">Investors</sds-top-nav-item>
  <sds-button slot="actions" variant="secondary" size="s">Account</sds-button>
</sds-top-nav>

<sds-pagination type="stepped" total="15" current="3"></sds-pagination>
<sds-pagination type="indicators" total="8" current="4"></sds-pagination>
<sds-pagination type="stepless" total="20" current="7" show-numbers></sds-pagination>

<sds-stepper orientation="horizontal" current="1">
  <sds-step>Project briefing</sds-step>
  <sds-step progress="45">Tool selection</sds-step>
  <sds-step>Production run</sds-step>
  <sds-step>Quality inspection</sds-step>
</sds-stepper>

<sds-table selects="multiple" density="regular">
  <sds-table-head>
    <sds-table-head-cell sortable sort-key="product">Product</sds-table-head-cell>
    <sds-table-head-cell align="right">Unit price</sds-table-head-cell>
  </sds-table-head>
  <sds-table-body>
    <sds-table-row value="r1">
      <sds-table-cell>DNMG insert</sds-table-cell>
      <sds-table-cell align="right">$24.50</sds-table-cell>
    </sds-table-row>
  </sds-table-body>
</sds-table>

<sds-card accent="gold">
  <span slot="eyebrow">Coromant</span>
  <h3>Precision solutions</h3>
  <p>Cutting tools for high-volume machining.</p>
  <div slot="actions"><sds-button>Learn more</sds-button></div>
</sds-card>

<sds-badge color="blue">3</sds-badge>
<sds-badge color="orange">12</sds-badge>
<sds-badge color="gold">5</sds-badge>

<sds-accordion single-open>
  <sds-accordion-item heading="What is carbide?" open>…</sds-accordion-item>
  <sds-accordion-item heading="How do I select an insert?">…</sds-accordion-item>
</sds-accordion>

<sds-divider size="s"></sds-divider>
<sds-divider></sds-divider>
<sds-divider size="l"></sds-divider>

<sds-profile-image size="small" alt="Maria Rodriguez"></sds-profile-image>
<sds-profile-image size="medium" alt="John Smith"></sds-profile-image>
<sds-profile-image size="large" initials="SD" alt="Sandvik Design"></sds-profile-image>

<sds-button onclick="modal.open = true">Open</sds-button>

<sds-modal id="modal" position="center" closable heading="Confirm order">
  <h2 slot="title">Confirm your order</h2>
  <p>You are about to order 150 inserts.</p>
  <div slot="actions">
    <sds-button variant="secondary">Cancel</sds-button>
    <sds-button>Confirm</sds-button>
  </div>
</sds-modal>

<sds-tooltip placement="top" text="Browse the catalog">
  <sds-button>Hover me</sds-button>
</sds-tooltip>

<sds-toast open dismissable headline="Order shipped">
  Order #12345 has been dispatched.
  <sds-button slot="action" variant="secondary">Track now</sds-button>
</sds-toast>

<sds-toast open urgent dismissable headline="Inventory alert">
  Stock is running low.
</sds-toast>

<sds-loader label="Processing"></sds-loader>
<sds-loader value="65" label="Download progress"></sds-loader>

<sds-progress-bar value="45" label="Video playback"></sds-progress-bar>
<sds-progress-bar value="30" handle variant="ba" label="Timeline"></sds-progress-bar>