npm - @ippon-ui/styles - Versions diffs - 0.0.2 - Mend

@ippon-ui/styles 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/molecule/import-file/import-file.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <label class="ippon-import-file"><div class="ippon-v-space -gap-8 -center"><div class="ippon-import-file--icon"><span class="ippon-icon -size-24 ippon-ion-cloud-upload" role="presentation"></span></div><div class="ippon-v-space -gap-4 -center"><span class="ippon-text -body -bold">Drag and drop your files here</span><span class="ippon-text -body -small -color-neutral-tertiary-inversed">Or click to browse</span></div></div><input class="ippon-import-file--input" type="file"/></label><label class="ippon-import-file -dragover"><div class="ippon-v-space -gap-8 -center"><div class="ippon-import-file--icon"><span class="ippon-icon -size-24 ippon-ion-cloud-upload" role="presentation"></span></div><div class="ippon-v-space -gap-4 -center"><span class="ippon-text -body -bold">Drag and drop your files here</span><span class="ippon-text -body -small -color-neutral-tertiary-inversed">Or click to browse</span></div></div><input class="ippon-import-file--input" type="file"/></label>

package/dist/molecule/import-file/import-file.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ ## Import File

package/dist/molecule/import-file/import-file.mixin.html ADDED Viewed

File without changes

package/dist/molecule/import-file/import-file.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/molecule/molecule.html ADDED Viewed

@@ -0,0 +1,289 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Tikui - Molecules</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content="Tikui is a Pattern Library generator."><link rel="stylesheet" href="../documentation/style.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/index.css"><link rel="stylesheet" href="../documentation/lib/@fontsource/montserrat/700.css"><link rel="stylesheet" href="../lib/prismjs/prism-okaidia.css"></head><body><div class="tikui-template-page"><div class="tikui-template-page--header"><div class="tikui-template-page--header-container"><header class="tikui-header"><div class="tikui-header--slot"><a class="tikui-title-brand" href="../index.html">Tikui</a></div><div class="tikui-header--slot"><nav><ul class="tikui-header-navigation"><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../token/token.html"><span class="tikui-header-item--text">Tokens</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../atom/atom.html"><span class="tikui-header-item--text">Atoms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item -selected" href="../molecule/molecule.html"><span class="tikui-header-item--text">Molecules</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../organism/organism.html"><span class="tikui-header-item--text">Organisms</span><span class="tikui-header-item--feedback"></span></a></li><li class="tikui-header-navigation--slot"><a class="tikui-header-item" href="../template/template.html"><span class="tikui-header-item--text">Templates</span><span class="tikui-header-item--feedback"></span></a></li></ul></nav></div></header></div></div><div class="tikui-template-page--body" data-navigable><div class="tikui-template-page--container"><div class="tikui-template-page--container-content"><div class="tikui-vertical-spacing -s32"><div class="tikui-vertical-spacing--line"><h1 class="tikui-title-main" id="molecules">Molecules</h1></div><div class="tikui-vertical-spacing--line"><figure class="tikui-quote"><blockquote class="tikui-quote--text" cite="http://bradfrost.com/blog/post/atomic-web-design/#molecules"><p>Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.</p><p>For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.</p></blockquote><figcaption class="tikui-quote--author"><cite>Atomic Design</cite> by Brad Frost</figcaption></figure></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="tabs">Tabs</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../molecule/tabs/tabs.render.html" height="60" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-tabs&quot; id=&quot;panel-id&quot; role=&quot;tablist&quot;&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 1
+  &lt;/button&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+  &lt;/button&gt;
+  &lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;&gt;Tab 3
+  &lt;/a&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-4&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 4
+  &lt;/button&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-5&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 5
+  &lt;/button&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-tabs&quot; id=&quot;panel-id&quot; role=&quot;tablist&quot;&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-1&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 1
+  &lt;/button&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-2&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;&gt;Tab 2
+  &lt;/button&gt;
+  &lt;a class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-3&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;&gt;Tab 3
+  &lt;/a&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-4&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 4
+  &lt;/button&gt;
+  &lt;button class=&quot;ippon-tab&quot; role=&quot;tab&quot; id=&quot;tab-5&quot; aria-controls=&quot;panel-id&quot;&gt;Tab 5
+  &lt;/button&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">#panel-id.ippon-tabs(role=&quot;tablist&quot;)
+  button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 1
+  button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+    | Tab 2
+  a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;)
+    | Tab 3
+  button#tab-4.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 4
+  button#tab-5.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 5</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+#panel-id.ippon-tabs(role=&quot;tablist&quot;)
+  button#tab-1.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 1
+  button#tab-2.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; aria-selected=&quot;true&quot; tabindex=&quot;-1&quot;)
+    | Tab 2
+  a#tab-3.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot; href=&quot;#tab3&quot;)
+    | Tab 3
+  button#tab-4.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 4
+  button#tab-5.ippon-tab(role=&quot;tab&quot; aria-controls=&quot;panel-id&quot;)
+    | Tab 5">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="importfile">Import File</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../molecule/import-file/import-file.render.html" height="370" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;label class=&quot;ippon-import-file&quot;&gt;
+  &lt;div class=&quot;ippon-v-space -gap-8 -center&quot;&gt;
+    &lt;div class=&quot;ippon-import-file--icon&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-24 ippon-ion-cloud-upload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -center&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Drag and drop your files here
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;Or click to browse
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;input class=&quot;ippon-import-file--input&quot; type=&quot;file&quot;/&gt;
+&lt;/label&gt;
+&lt;label class=&quot;ippon-import-file -dragover&quot;&gt;
+  &lt;div class=&quot;ippon-v-space -gap-8 -center&quot;&gt;
+    &lt;div class=&quot;ippon-import-file--icon&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-24 ippon-ion-cloud-upload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -center&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Drag and drop your files here
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;Or click to browse
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;input class=&quot;ippon-import-file--input&quot; type=&quot;file&quot;/&gt;
+&lt;/label&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;label class=&quot;ippon-import-file&quot;&gt;
+  &lt;div class=&quot;ippon-v-space -gap-8 -center&quot;&gt;
+    &lt;div class=&quot;ippon-import-file--icon&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-24 ippon-ion-cloud-upload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -center&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Drag and drop your files here
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;Or click to browse
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;input class=&quot;ippon-import-file--input&quot; type=&quot;file&quot;/&gt;
+&lt;/label&gt;
+&lt;label class=&quot;ippon-import-file -dragover&quot;&gt;
+  &lt;div class=&quot;ippon-v-space -gap-8 -center&quot;&gt;
+    &lt;div class=&quot;ippon-import-file--icon&quot;&gt;
+      &lt;span class=&quot;ippon-icon -size-24 ippon-ion-cloud-upload&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-v-space -gap-4 -center&quot;&gt;
+      &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Drag and drop your files here
+      &lt;/span&gt;
+      &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;Or click to browse
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;input class=&quot;ippon-import-file--input&quot; type=&quot;file&quot;/&gt;
+&lt;/label&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">label.ippon-import-file
+  .ippon-v-space.-gap-8.-center
+    .ippon-import-file--icon
+      span.ippon-icon.-size-24.ippon-ion-cloud-upload(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-center
+      span.ippon-text.-body.-bold Drag and drop your files here
+      span.ippon-text.-body.-small.-color-neutral-tertiary-inversed Or click to browse
+  input.ippon-import-file--input(type=&quot;file&quot;)
+label.ippon-import-file.-dragover
+  .ippon-v-space.-gap-8.-center
+    .ippon-import-file--icon
+      span.ippon-icon.-size-24.ippon-ion-cloud-upload(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-center
+      span.ippon-text.-body.-bold Drag and drop your files here
+      span.ippon-text.-body.-small.-color-neutral-tertiary-inversed Or click to browse
+  input.ippon-import-file--input(type=&quot;file&quot;)</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+label.ippon-import-file
+  .ippon-v-space.-gap-8.-center
+    .ippon-import-file--icon
+      span.ippon-icon.-size-24.ippon-ion-cloud-upload(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-center
+      span.ippon-text.-body.-bold Drag and drop your files here
+      span.ippon-text.-body.-small.-color-neutral-tertiary-inversed Or click to browse
+  input.ippon-import-file--input(type=&quot;file&quot;)
+label.ippon-import-file.-dragover
+  .ippon-v-space.-gap-8.-center
+    .ippon-import-file--icon
+      span.ippon-icon.-size-24.ippon-ion-cloud-upload(role=&quot;presentation&quot;)
+    .ippon-v-space.-gap-4.-center
+      span.ippon-text.-body.-bold Drag and drop your files here
+      span.ippon-text.-body.-small.-color-neutral-tertiary-inversed Or click to browse
+  input.ippon-import-file--input(type=&quot;file&quot;)">Copy</button></div></div></div></div></div><div class="tikui-vertical-spacing--line"><div class="tikui-component"><div class="tikui-component--markdown markdown"><h2 id="toggle">Toggle</h2></div><div class="tikui-component--render render"><iframe class="doc-iframe" src="../molecule/toggle/toggle.render.html" height="280" title="Component rendering"></iframe></div><div class="tikui-component--code code"><div class="tikui-line-section -s24"><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-html">&lt;div class=&quot;ippon-toggle&quot;&gt;
+  &lt;div class=&quot;ippon-toggle--header&quot;&gt;
+    &lt;button class=&quot;ippon-toggle--button&quot; id=&quot;first-toggle&quot; aria-expanded=&quot;false&quot;&gt;
+      &lt;span class=&quot;ippon-toggle--icon ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space -gap-10 -middle&quot;&gt;
+        &lt;span class=&quot;ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Toggle Title
+        &lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;(3 elements)
+        &lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/button&gt;
+    &lt;div class=&quot;ippon-toggle--actions&quot;&gt;
+      &lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Action
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-toggle--body&quot; role=&quot;region&quot; aria-labelledby=&quot;first-toggle&quot;&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;First
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Second
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Third
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-toggle -open&quot;&gt;
+  &lt;div class=&quot;ippon-toggle--header&quot;&gt;
+    &lt;button class=&quot;ippon-toggle--button&quot; id=&quot;second-toggle&quot; aria-expanded=&quot;true&quot;&gt;
+      &lt;span class=&quot;ippon-toggle--icon ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space -gap-10 -middle&quot;&gt;
+        &lt;span class=&quot;ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Toggle Title
+        &lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;(3 elements)
+        &lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/button&gt;
+    &lt;div class=&quot;ippon-toggle--actions&quot;&gt;
+      &lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Action
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-toggle--body&quot; role=&quot;region&quot; aria-labelledby=&quot;second-toggle&quot;&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;First
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Second
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Third
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+&lt;div class=&quot;ippon-toggle&quot;&gt;
+  &lt;div class=&quot;ippon-toggle--header&quot;&gt;
+    &lt;button class=&quot;ippon-toggle--button&quot; id=&quot;first-toggle&quot; aria-expanded=&quot;false&quot;&gt;
+      &lt;span class=&quot;ippon-toggle--icon ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space -gap-10 -middle&quot;&gt;
+        &lt;span class=&quot;ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Toggle Title
+        &lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;(3 elements)
+        &lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/button&gt;
+    &lt;div class=&quot;ippon-toggle--actions&quot;&gt;
+      &lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Action
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-toggle--body&quot; role=&quot;region&quot; aria-labelledby=&quot;first-toggle&quot;&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;First
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Second
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Third
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;ippon-toggle -open&quot;&gt;
+  &lt;div class=&quot;ippon-toggle--header&quot;&gt;
+    &lt;button class=&quot;ippon-toggle--button&quot; id=&quot;second-toggle&quot; aria-expanded=&quot;true&quot;&gt;
+      &lt;span class=&quot;ippon-toggle--icon ippon-ion-chevron-forward&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+      &lt;div class=&quot;ippon-h-space -gap-10 -middle&quot;&gt;
+        &lt;span class=&quot;ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline&quot; role=&quot;presentation&quot;&gt;&lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -bold&quot;&gt;Toggle Title
+        &lt;/span&gt;
+        &lt;span class=&quot;ippon-text -body -small -color-neutral-tertiary-inversed&quot;&gt;(3 elements)
+        &lt;/span&gt;
+      &lt;/div&gt;
+    &lt;/button&gt;
+    &lt;div class=&quot;ippon-toggle--actions&quot;&gt;
+      &lt;button class=&quot;ippon-button -neutral -outline&quot;&gt;Action
+      &lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ippon-toggle--body&quot; role=&quot;region&quot; aria-labelledby=&quot;second-toggle&quot;&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;First
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Second
+    &lt;/div&gt;
+    &lt;div class=&quot;ippon-toggle--content&quot;&gt;Third
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;">Copy</button></div><div class="tikui-line-section--column"><pre class="doc-code-example"><code class="code language-pug">.ippon-toggle
+  .ippon-toggle--header
+    button#first-toggle.ippon-toggle--button(aria-expanded=&quot;false&quot;)
+      span.ippon-toggle--icon.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+      .ippon-h-space.-gap-10.-middle
+        span.ippon-icon.-size-16.-color-warning-primary.ippon-ion-folder-outline(role=&quot;presentation&quot;)
+        span.ippon-text.-body.-bold Toggle Title
+        span.ippon-text.-body.-small.-color-neutral-tertiary-inversed (3 elements)
+    .ippon-toggle--actions
+      button.ippon-button.-neutral.-outline Action
+  .ippon-toggle--body(role=&quot;region&quot; aria-labelledby=&quot;first-toggle&quot;)
+    .ippon-toggle--content First
+    .ippon-toggle--content Second
+    .ippon-toggle--content Third
+.ippon-toggle.-open
+  .ippon-toggle--header
+    button#second-toggle.ippon-toggle--button(aria-expanded=&quot;true&quot;)
+      span.ippon-toggle--icon.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+      .ippon-h-space.-gap-10.-middle
+        span.ippon-icon.-size-16.-color-warning-primary.ippon-ion-folder-outline(role=&quot;presentation&quot;)
+        span.ippon-text.-body.-bold Toggle Title
+        span.ippon-text.-body.-small.-color-neutral-tertiary-inversed (3 elements)
+    .ippon-toggle--actions
+      button.ippon-button.-neutral.-outline Action
+  .ippon-toggle--body(role=&quot;region&quot; aria-labelledby=&quot;second-toggle&quot;)
+    .ippon-toggle--content First
+    .ippon-toggle--content Second
+    .ippon-toggle--content Third</code></pre><button class="tikui-button -small" onclick="copyCode(this)" data-code="
+.ippon-toggle
+  .ippon-toggle--header
+    button#first-toggle.ippon-toggle--button(aria-expanded=&quot;false&quot;)
+      span.ippon-toggle--icon.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+      .ippon-h-space.-gap-10.-middle
+        span.ippon-icon.-size-16.-color-warning-primary.ippon-ion-folder-outline(role=&quot;presentation&quot;)
+        span.ippon-text.-body.-bold Toggle Title
+        span.ippon-text.-body.-small.-color-neutral-tertiary-inversed (3 elements)
+    .ippon-toggle--actions
+      button.ippon-button.-neutral.-outline Action
+  .ippon-toggle--body(role=&quot;region&quot; aria-labelledby=&quot;first-toggle&quot;)
+    .ippon-toggle--content First
+    .ippon-toggle--content Second
+    .ippon-toggle--content Third
+.ippon-toggle.-open
+  .ippon-toggle--header
+    button#second-toggle.ippon-toggle--button(aria-expanded=&quot;true&quot;)
+      span.ippon-toggle--icon.ippon-ion-chevron-forward(role=&quot;presentation&quot;)
+      .ippon-h-space.-gap-10.-middle
+        span.ippon-icon.-size-16.-color-warning-primary.ippon-ion-folder-outline(role=&quot;presentation&quot;)
+        span.ippon-text.-body.-bold Toggle Title
+        span.ippon-text.-body.-small.-color-neutral-tertiary-inversed (3 elements)
+    .ippon-toggle--actions
+      button.ippon-button.-neutral.-outline Action
+  .ippon-toggle--body(role=&quot;region&quot; aria-labelledby=&quot;second-toggle&quot;)
+    .ippon-toggle--content First
+    .ippon-toggle--content Second
+    .ippon-toggle--content Third">Copy</button></div></div></div></div></div></div></div></div></div></div><script src="../lib/prismjs/prism.js"></script><script src="../lib/prismjs/prism-pug.js"></script><script src="../documentation/scripts/tikui.js"></script></body></html>

package/dist/molecule/tabs/tabs.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="ippon-tabs" id="panel-id" role="tablist"><button class="ippon-tab" role="tab" id="tab-1" aria-controls="panel-id">Tab 1</button><button class="ippon-tab" role="tab" id="tab-2" aria-controls="panel-id" aria-selected="true" tabindex="-1">Tab 2</button><a class="ippon-tab" role="tab" id="tab-3" aria-controls="panel-id" href="#tab3">Tab 3</a><button class="ippon-tab" role="tab" id="tab-4" aria-controls="panel-id">Tab 4</button><button class="ippon-tab" role="tab" id="tab-5" aria-controls="panel-id">Tab 5</button></div>

package/dist/molecule/tabs/tabs.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ ## Tabs

package/dist/molecule/tabs/tabs.mixin.html ADDED Viewed

File without changes

package/dist/molecule/tabs/tabs.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/molecule/toggle/toggle.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="ippon-toggle"><div class="ippon-toggle--header"><button class="ippon-toggle--button" id="first-toggle" aria-expanded="false"><span class="ippon-toggle--icon ippon-ion-chevron-forward" role="presentation"></span><div class="ippon-h-space -gap-10 -middle"><span class="ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline" role="presentation"></span><span class="ippon-text -body -bold">Toggle Title</span><span class="ippon-text -body -small -color-neutral-tertiary-inversed">(3 elements)</span></div></button><div class="ippon-toggle--actions"><button class="ippon-button -neutral -outline">Action</button></div></div><div class="ippon-toggle--body" role="region" aria-labelledby="first-toggle"><div class="ippon-toggle--content">First</div><div class="ippon-toggle--content">Second</div><div class="ippon-toggle--content">Third</div></div></div><div class="ippon-toggle -open"><div class="ippon-toggle--header"><button class="ippon-toggle--button" id="second-toggle" aria-expanded="true"><span class="ippon-toggle--icon ippon-ion-chevron-forward" role="presentation"></span><div class="ippon-h-space -gap-10 -middle"><span class="ippon-icon -size-16 -color-warning-primary ippon-ion-folder-outline" role="presentation"></span><span class="ippon-text -body -bold">Toggle Title</span><span class="ippon-text -body -small -color-neutral-tertiary-inversed">(3 elements)</span></div></button><div class="ippon-toggle--actions"><button class="ippon-button -neutral -outline">Action</button></div></div><div class="ippon-toggle--body" role="region" aria-labelledby="second-toggle"><div class="ippon-toggle--content">First</div><div class="ippon-toggle--content">Second</div><div class="ippon-toggle--content">Third</div></div></div>

package/dist/molecule/toggle/toggle.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ ## Toggle

package/dist/molecule/toggle/toggle.mixin.html ADDED Viewed

File without changes

package/dist/molecule/toggle/toggle.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/organism/button-card/button-card.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <button class="ippon-button-card -shadow-l1 -small"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l2"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l3 -large"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l4"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l5"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -border"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l5 -border"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -border -full-width"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button>

package/dist/organism/button-card/button-card.md ADDED Viewed

@@ -0,0 +1,28 @@
+## Button card
+A clickable card component that acts as an interactive surface. It extends the base card styles with cursor pointer and hover/active states, making it suitable for navigation or selection purposes.
+**Sizes:**
+- Small `-small`
+- Medium (Default)
+- Large `-large`
+**Shadows:**
+- No shadow (default)
+- Shadow level 1 `-shadow-l1`
+- Shadow level 2 `-shadow-l2`
+- Shadow level 3 `-shadow-l3`
+- Shadow level 4 `-shadow-l4`
+- Shadow level 5 `-shadow-l5`
+**Border:**
+- No border (default)
+- Border `-border`
+**Width:**
+- Inline (default)
+- Full width `-full-width`

package/dist/organism/button-card/button-card.mixin.html ADDED Viewed

File without changes

package/dist/organism/button-card/button-card.render.html ADDED Viewed

@@ -0,0 +1 @@

+ <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); justify-items: left; align-items: center"><button class="ippon-button-card -shadow-l1 -small"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l2"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l3 -large"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l4"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l5"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -border"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -shadow-l5 -border"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button><button class="ippon-button-card -border -full-width"><div class="ippon-h-space -gap-16 -middle"><span class="ippon-icon -size-24 -color-brand-primary ippon-ion-hardware-chip-sharp" role="presentation"></span><div class="ippon-v-space -gap-4 -left"><span class="ippon-text -body -color-neutral-tertiary-inversed">Some key</span><span class="ippon-text -large -label">Description value</span></div><span class="ippon-icon -size-24 ippon-ion-chevron-forward" role="presentation"></span></div></button></div></body></html>

package/dist/organism/card/card.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="ippon-card -shadow-l1 -small">Card level 1 small</div><div class="ippon-card -shadow-l2">Card level 2</div><div class="ippon-card -shadow-l3 -large">Card level 3 large</div><div class="ippon-card -shadow-l4">Card level 4</div><div class="ippon-card -shadow-l5">Card level 5</div><div class="ippon-card -border">Card with border</div><div class="ippon-card -shadow-l3 -border -small">Card combination</div>

package/dist/organism/card/card.md ADDED Viewed

@@ -0,0 +1,23 @@
+## Card
+A basic card component that serves as a container for content. It provides a consistent surface with rounded corners, padding, and optional shadow and border styling.
+**Sizes:**
+- Small `-small`
+- Medium (Default)
+- Large `-large`
+**Shadows:**
+- No shadow (default)
+- Shadow level 1 `-shadow-l1`
+- Shadow level 2 `-shadow-l2`
+- Shadow level 3 `-shadow-l3`
+- Shadow level 4 `-shadow-l4`
+- Shadow level 5 `-shadow-l5`
+**Border:**
+- No border (default)
+- Border `-border`

package/dist/organism/card/card.mixin.html ADDED Viewed

File without changes

package/dist/organism/card/card.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/organism/container/container.code.html ADDED Viewed

	@@ -0,0 +1 @@
1	+ <div class="ippon-container"><p>Default container (inline-size)</p></div><hr/><div class="ippon-container"><div class="ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32"><div class="ippon-grid--slot">Slot 1</div><div class="ippon-grid--slot">Slot 2</div><div class="ippon-grid--slot">Slot 3</div><div class="ippon-grid--slot">Slot 4</div></div></div>

package/dist/organism/container/container.md ADDED Viewed

@@ -0,0 +1,5 @@
+## Container
+A container component that establishes a container query context. It allows child elements to use container queries to respond to the container's dimensions rather than the viewport size.
+The container uses `container-type: inline-size` to enable queries based on the container's inline (width) dimension.

package/dist/organism/container/container.mixin.html ADDED Viewed

File without changes

package/dist/organism/container/container.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/organism/grid/grid.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="ippon-grid -media-4 -media-tab-12 -gap-16 -gap-desktop-s-32"><div class="ippon-grid--slot -col-2 -col-tab-4"><div class="ipp-doc-slot">Slot (-col-2 -col-tab-4)</div></div><div class="ippon-grid--slot -col-2 -col-tab-4"><div class="ipp-doc-slot">Slot (-col-2 -col-tab-4)</div></div><div class="ippon-grid--slot -col-4 -col-tab-4"><div class="ipp-doc-slot">Slot (-col-4 -col-tab-4)</div></div><div class="ippon-grid--slot -col-4 -col-tab-6"><div class="ipp-doc-slot">Slot (-col-4 -col-tab-6)</div></div><div class="ippon-grid--slot -col-4 -col-tab-6"><div class="ipp-doc-slot">Slot (-col-4 -col-tab-6)</div></div><div class="ippon-grid--slot -col-1 -col-tab-2"><div class="ipp-doc-slot">Slot (-col-1 -col-tab-2)</div></div><div class="ippon-grid--slot -col-3 -col-tab-10"><div class="ipp-doc-slot">Slot (-col-3 -col-tab-10)</div></div></div><hr/><div class="ippon-grid -container-4 -container-m-12 -gap-16 -gap-l-32"><div class="ippon-grid--slot -col-2 -col-m-4"><div class="ipp-doc-slot">Slot (-col-2 -col-m-4)</div></div><div class="ippon-grid--slot -col-2 -col-m-4"><div class="ipp-doc-slot">Slot (-col-2 -col-m-4)</div></div><div class="ippon-grid--slot -col-4 -col-m-4"><div class="ipp-doc-slot">Slot (-col-4 -col-m-4)</div></div><div class="ippon-grid--slot -col-4 -col-m-6"><div class="ipp-doc-slot">Slot (-col-4 -col-m-6)</div></div><div class="ippon-grid--slot -col-4 -col-m-6"><div class="ipp-doc-slot">Slot (-col-4 -col-m-6)</div></div><div class="ippon-grid--slot -col-1 -col-m-2"><div class="ipp-doc-slot">Slot (-col-1 -col-m-2)</div></div><div class="ippon-grid--slot -col-3 -col-m-10"><div class="ipp-doc-slot">Slot (-col-3 -col-m-10)</div></div></div>

package/dist/organism/grid/grid.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ ## Grid

package/dist/organism/grid/grid.mixin.html ADDED Viewed

File without changes

package/dist/organism/grid/grid.render.html ADDED Viewed

@@ -0,0 +1 @@

package/dist/organism/h-space/h-space.code.html ADDED Viewed

@@ -0,0 +1 @@

+ <div class="ippon-h-space"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-8"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-32 -middle"><div style="width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-16 -top"><div style="width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-20 -bottom"><div style="width: var(--ippon-size-32); height: var(--ippon-size-16); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-8); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-32 -left"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-16 -center"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-20 -right"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-20 -space-between"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-16 -stretch"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div class="ippon-h-space--slot -expand"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><div class="ippon-h-space -gap-16 -wrap"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></div><section class="ippon-h-space -gap-16"><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div><div style="width: var(--ippon-size-32); height: var(--ippon-size-32); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)"></div></section>

package/dist/organism/h-space/h-space.md ADDED Viewed

@@ -0,0 +1,22 @@
+## Horizontal space (h-space)
+The `h-space` organism represents horizontal spaces between elements.
+**Gap**
+The `-gap-{size}` alternative specifies the gap between child elements.
+**Tag**
+The `tag` property allows specifying a custom HTML element (e.g., `div`, `section`, `article`). Defaults to `div`.
+**Vertical Alignment**
+The following alternatives control the vertical alignment of child elements:
+- `-top`: Vertically align items to the top
+- `-middle`: Vertically align items to the middle
+- `-bottom`: Vertically align items to the bottom
+- `-left`: Horizontally align items to the left
+- `-center`: Horizontally align items to the center
+- `-right`: Horizontally align items to the right

package/dist/organism/h-space/h-space.mixin.html ADDED Viewed

File without changes