import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as e,o as i}from"./app-h9l50wZ_.js";const l={};function p(t,s){return i(),a("div",null,s[0]||(s[0]=[e(`<h2 id="chip-colors" tabindex="-1"><a class="header-anchor" href="#chip-colors"><span>Chip colors</span></a></h2><p>Use different colors to emphasize or provide meaning.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-chip&gt;Medium&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip color=&quot;inverse&quot;&gt;Inverse&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip color=&quot;primary&quot;&gt;Primary&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip color=&quot;success&quot;&gt;Success&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip color=&quot;warning&quot;&gt;Warning&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip color=&quot;danger&quot;&gt;Danger&lt;/ds-chip&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="chip-sizes" tabindex="-1"><a class="header-anchor" href="#chip-sizes"><span>Chip sizes</span></a></h2><p>Use different sizes to create hierarchy (defaults to <code>base</code>).</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-chip size=&quot;small&quot;&gt;Small&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip size=&quot;base&quot;&gt;Base&lt;/ds-chip&gt;</span></span>
<span class="line"><span>&lt;ds-chip size=&quot;large&quot;&gt;Large&lt;/ds-chip&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="deletable" tabindex="-1"><a class="header-anchor" href="#deletable"><span>Deletable</span></a></h2><p>A chip can be deletable.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;template&gt;</span></span>
<span class="line"><span>  &lt;div&gt;</span></span>
<span class="line"><span>    &lt;ds-chip</span></span>
<span class="line"><span>      v-for=&quot;(tag, index) in tags&quot;</span></span>
<span class="line"><span>      @remove=&quot;removeTag(index)&quot;</span></span>
<span class="line"><span>      removable</span></span>
<span class="line"><span>      :key=&quot;index&quot;</span></span>
<span class="line"><span>      :color=&quot;tag.color&quot;&gt;</span></span>
<span class="line"><span>      {{ tag.label }}</span></span>
<span class="line"><span>    &lt;/ds-chip&gt;</span></span>
<span class="line"><span>  &lt;/div&gt;</span></span>
<span class="line"><span>&lt;/template&gt;</span></span>
<span class="line"><span>&lt;script&gt;</span></span>
<span class="line"><span>  export default {</span></span>
<span class="line"><span>    data() {</span></span>
<span class="line"><span>      return {</span></span>
<span class="line"><span>        tags: [</span></span>
<span class="line"><span>        {label: &#39;Dog&#39;},</span></span>
<span class="line"><span>        {label: &#39;Cat&#39;},</span></span>
<span class="line"><span>        {label: &#39;Duck&#39;},</span></span>
<span class="line"><span>        {label: &#39;Mouse&#39;, color: &quot;primary&quot;},</span></span>
<span class="line"><span>        {label: &#39;Bird&#39;, color: &quot;primary&quot;},</span></span>
<span class="line"><span>        {label: &#39;Elephant&#39;, color: &quot;primary&quot;},</span></span>
<span class="line"><span>        ],</span></span>
<span class="line"><span>      }</span></span>
<span class="line"><span>    },</span></span>
<span class="line"><span>    methods: {</span></span>
<span class="line"><span>      removeTag (index) {</span></span>
<span class="line"><span>        this.tags.splice(index, 1)</span></span>
<span class="line"><span>      }</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>  }</span></span>
<span class="line"><span>&lt;/script&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9)]))}const r=n(l,[["render",p],["__file","demo.html.vue"]]),o=JSON.parse('{"path":"/styleguide/src/system/components/typography/Chip/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Chip colors","slug":"chip-colors","link":"#chip-colors","children":[]},{"level":2,"title":"Chip sizes","slug":"chip-sizes","link":"#chip-sizes","children":[]},{"level":2,"title":"Deletable","slug":"deletable","link":"#deletable","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.48,"words":143},"filePathRelative":"styleguide/src/system/components/typography/Chip/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Chip colors</h2>\\n<p>Use different colors to emphasize or provide meaning.</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;ds-chip&gt;Medium&lt;/ds-chip&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-chip color=\\"inverse\\"&gt;Inverse&lt;/ds-chip&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-chip color=\\"primary\\"&gt;Primary&lt;/ds-chip&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-chip color=\\"success\\"&gt;Success&lt;/ds-chip&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-chip color=\\"warning\\"&gt;Warning&lt;/ds-chip&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;ds-chip color=\\"danger\\"&gt;Danger&lt;/ds-chip&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{r as comp,o as data};
