@ippon-ui/ui 0.0.2

package/styles/src/molecule/toggle/toggle.mixin.pug

@@ -0,0 +1,36 @@
+include /atom/ion/ion.mixin.pug
+include /atom/button/button.mixin.pug
+
+mixin ippon-toggle--title
+  .ippon-toggle--title
+    block
+
+mixin ippon-toggle--button(options)
+  - const { id, open } = options || {};
+  - const expanded = open ? 'true' : 'false';
+  button.ippon-toggle--button(class=openClass, id=id, aria-expanded=expanded)
+    +ippon-ion({ name: 'chevron-forward', additionalClass: 'ippon-toggle--icon' })
+    block
+
+mixin ippon-toggle--actions
+  .ippon-toggle--actions
+    block
+
+mixin ippon-toggle--header
+  .ippon-toggle--header
+    block
+
+mixin ippon-toggle--body(options)
+  - const { labelledBy } = options || {};
+  .ippon-toggle--body(role='region', aria-labelledby=labelledBy)
+    block
+
+mixin ippon-toggle--content
+  .ippon-toggle--content
+    block
+
+mixin ippon-toggle(options)
+  - const { open } = options || {};
+  - const openClass = open ? '-open' : null;
+  .ippon-toggle(class=openClass)
+    block

package/styles/src/molecule/toggle/toggle.render.pug

@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  div(style='display: flex; flex-direction: column; gap: 1rem')
+    include toggle.code.pug

package/styles/src/organism/_abstract-card.scss

@@ -0,0 +1,36 @@
+@use '../quark/shadow';
+
+%ippon-card {
+  --_border-width: 0px;
+  --_padding-v: var(--ippon-size-16);
+  --_padding--inner-v: calc(var(--_padding-v) - var(--_border-width));
+  --_padding-h: var(--ippon-size-16);
+  --_padding--inner-h: calc(var(--_padding-h) - var(--_border-width));
+
+  box-sizing: border-box;
+  border: var(--_border-width) solid var(--ippon-color-neutral-border);
+  border-radius: var(--ippon-radius-l);
+  background-color: var(--ippon-color-neutral-surface-primary);
+  padding: var(--_padding-v) var(--_padding-h);
+  color: var(--ippon-color-neutral-text-icon-on-primary);
+
+  @include shadow.shadows;
+
+  &.-border {
+    --_border-width: 1px;
+  }
+
+  &.-small {
+    --_padding-h: var(--ippon-size-8);
+    --_padding-v: var(--ippon-size-8);
+  }
+
+  &.-large {
+    --_padding-v: var(--ippon-size-20);
+    --_padding-h: var(--ippon-size-24);
+  }
+}
+
+@mixin ippon-card {
+  @extend %ippon-card;
+}

package/styles/src/organism/_docorganism.scss

@@ -0,0 +1 @@
+@use 'grid/docgrid';

package/styles/src/organism/_organism.scss

@@ -0,0 +1,8 @@
+@use 'button-card/button-card';
+@use 'card/card';
+@use 'container/container';
+@use 'grid/grid';
+@use 'header/header';
+@use 'h-space/h-space';
+@use 'modal/modal';
+@use 'v-space/v-space';

package/styles/src/organism/button-card/_button-card.scss

@@ -0,0 +1,22 @@
+@use '../abstract-card';
+@use '../../quark/shadow';
+
+.ippon-button-card {
+  @include abstract-card.ippon-card;
+
+  display: inline-block;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--ippon-color-neutral-surface-primary-hover);
+  }
+
+  &:active {
+    background-color: var(--ippon-color-neutral-surface-primary-active);
+  }
+
+  &.-full-width {
+    display: block;
+    width: 100%;
+  }
+}

package/styles/src/organism/button-card/button-card.code.pug

@@ -0,0 +1,31 @@
+include /atom/text/text.mixin.pug
+include /atom/icon/icon.mixin.pug
+include /organism/h-space/h-space.mixin.pug
+include /organism/v-space/v-space.mixin.pug
+
+include button-card.mixin.pug
+
+mixin ippon-button-card-example(options)
+  +ippon-button-card(options)
+    +ippon-h-space({ gap: 16, align: 'middle' })
+      +ippon-icon({ name: 'hardware-chip', variant: 'sharp', size: 24, color: 'brand-primary' })
+      +ippon-v-space({ gap: 4, align: 'left' })
+        +ippon-text({ variant: 'body', color: 'neutral-tertiary-inversed' }) Some key
+        +ippon-text({ variant: 'label', size: 'large' }) Description value
+      +ippon-icon({ name: 'chevron-forward', size: 24 })
+
++ippon-button-card-example({ shadow: 'l1', size: 'small' })
+
++ippon-button-card-example({ shadow: 'l2' })
+
++ippon-button-card-example({ shadow: 'l3', size: 'large' })
+
++ippon-button-card-example({ shadow: 'l4' })
+
++ippon-button-card-example({ shadow: 'l5' })
+
++ippon-button-card-example({ border: true })
+
++ippon-button-card-example({ border: true, shadow: 'l5' })
+
++ippon-button-card-example({ border: true, fullWidth: true })

package/styles/src/organism/button-card/button-card.md

@@ -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/styles/src/organism/button-card/button-card.mixin.pug

@@ -0,0 +1,8 @@
+mixin ippon-button-card(options)
+  - const { shadow, border, size, fullWidth } = options || {};
+  - const shadowClass = shadow ? `-shadow-${shadow}` : null;
+  - const borderClass = border ? '-border' : null;
+  - const sizeClass = size ? `-${size}` : null;
+  - const fullWidthClass = fullWidth ? '-full-width' : null;
+  button.ippon-button-card(class=[shadowClass, borderClass, sizeClass, fullWidthClass])
+    block

package/styles/src/organism/button-card/button-card.render.pug

@@ -0,0 +1,7 @@
+extends /layout
+
+block body
+  div(
+    style='display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); justify-items: left; align-items: center'
+  )
+    include button-card.code.pug

package/styles/src/organism/card/_card.scss

@@ -0,0 +1,6 @@
+@use '../abstract-card';
+@use '../../quark/shadow';
+
+.ippon-card {
+  @include abstract-card.ippon-card;
+}

package/styles/src/organism/card/card.code.pug

@@ -0,0 +1,9 @@
+include card.mixin.pug
+
++ippon-card({ shadow: 'l1', size: 'small' }) Card level 1 small
++ippon-card({ shadow: 'l2' }) Card level 2
++ippon-card({ shadow: 'l3', size: 'large' }) Card level 3 large
++ippon-card({ shadow: 'l4' }) Card level 4
++ippon-card({ shadow: 'l5' }) Card level 5
++ippon-card({ border: true }) Card with border
++ippon-card({ shadow: 'l3', border: true, size: 'small' }) Card combination

package/styles/src/organism/card/card.md

@@ -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/styles/src/organism/card/card.mixin.pug

@@ -0,0 +1,7 @@
+mixin ippon-card(options)
+  - const { shadow, border, size } = options || {};
+  - const shadowClass = shadow ? `-shadow-${shadow}` : null;
+  - const borderClass = border ? '-border' : null;
+  - const sizeClass = size ? `-${size}` : null;
+  .ippon-card(class=[shadowClass, borderClass, sizeClass])
+    block

package/styles/src/organism/card/card.render.pug

@@ -0,0 +1,7 @@
+extends /layout
+
+block body
+  div(
+    style='display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: center'
+  )
+    include card.code.pug

package/styles/src/organism/container/_container.scss

@@ -0,0 +1,3 @@
+.ippon-container {
+  container-type: inline-size;
+}

package/styles/src/organism/container/container.code.pug

@@ -0,0 +1,13 @@
+include container.mixin.pug
+include ../grid/grid.mixin.pug
+
++ippon-container
+  p Default container (inline-size)
+
+hr
++ippon-container
+  +ippon-grid('-container-4 -container-m-12 -gap-16 -gap-l-32')
+    +ippon-grid--slot Slot 1
+    +ippon-grid--slot Slot 2
+    +ippon-grid--slot Slot 3
+    +ippon-grid--slot Slot 4

package/styles/src/organism/container/container.md

@@ -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/styles/src/organism/container/container.mixin.pug

@@ -0,0 +1,3 @@
+mixin ippon-container
+  .ippon-container
+    block

package/styles/src/organism/container/container.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include container.code.pug

package/styles/src/organism/grid/_docgrid.scss

@@ -0,0 +1,11 @@
+.ipp-doc-container {
+  container-type: inline-size;
+}
+
+.ipp-doc-slot {
+  box-sizing: border-box;
+  border: var(--ippon-size-4) solid var(--ippon-color-brand-border);
+  background-color: var(--ippon-color-brand-surface-primary);
+  padding: var(--ippon-size-16);
+  color: var(--ippon-color-brand-text-icon-on-primary);
+}

package/styles/src/organism/grid/_grid.scss

@@ -0,0 +1,84 @@
+@use '../../quark/breakpoint';
+@use '../../quark/gap';
+@use 'sass:math';
+
+$ippon-grid-columns: 4, 12;
+$ippon-grid-max-columns: math.max($ippon-grid-columns...);
+
+@mixin ippon-grid-layout-column($layout, $columns) {
+  &.-#{$layout}-#{$columns} {
+    grid-template-columns: repeat(#{$columns}, 1fr);
+  }
+}
+
+@mixin ippon-grid-layout($layout) {
+  @each $columns in $ippon-grid-columns {
+    @include ippon-grid-layout-column($layout, $columns);
+  }
+}
+
+@mixin ippon-grid-layout-breakpoint-column($layout, $breakpoint, $columns) {
+  &.-#{$layout}-#{$breakpoint}-#{$columns} {
+    grid-template-columns: repeat(#{$columns}, 1fr);
+  }
+}
+
+@mixin ippon-grid-layout-breakpoint($layout, $breakpoint) {
+  @each $columns in $ippon-grid-columns {
+    @include ippon-grid-layout-breakpoint-column($layout, $breakpoint, $columns);
+  }
+}
+
+@mixin ippon-grid-slot-column {
+  @for $column from 1 through $ippon-grid-max-columns {
+    &.-col-#{$column} {
+      grid-column: span #{$column};
+    }
+  }
+}
+
+@mixin ippon-grid-slot-breakpoint-column($breakpoint) {
+  @for $column from 1 through $ippon-grid-max-columns {
+    &.-col-#{$breakpoint}-#{$column} {
+      grid-column: span #{$column};
+    }
+  }
+}
+
+.ippon-grid {
+  display: grid;
+
+  @include gap.gaps;
+  @include gap.media-gaps;
+  @include gap.container-gaps;
+  @include ippon-grid-layout('media');
+  @include ippon-grid-layout('container');
+
+  &--slot {
+    @include ippon-grid-slot-column;
+  }
+
+  @each $breakpoint, $breakpoint-value in breakpoint.$media-breakpoints {
+    &--slot {
+      @media (min-width: $breakpoint-value) {
+        @include ippon-grid-slot-breakpoint-column($breakpoint);
+      }
+    }
+
+    @media (min-width: $breakpoint-value) {
+      @include ippon-grid-layout-breakpoint('media', $breakpoint);
+    }
+  }
+
+  @each $breakpoint, $container-value in breakpoint.$container-breakpoints {
+    &--slot {
+      @container (min-width: #{$container-value}) {
+        @include ippon-grid-slot-breakpoint-column($breakpoint);
+      }
+    }
+
+    @container (min-width: #{$container-value}) {
+      @include ippon-grid-layout-breakpoint('container', $breakpoint);
+    }
+  }
+}

package/styles/src/organism/grid/grid.code.pug

@@ -0,0 +1,25 @@
+include grid.mixin.pug
+
+mixin ippon-grid--slot-example(classes)
+  .ippon-grid--slot(class=classes)
+    .ipp-doc-slot= `Slot (${classes})`
+
++ippon-grid('-media-4 -media-tab-12 -gap-16 -gap-desktop-s-32')
+  +ippon-grid--slot-example('-col-2 -col-tab-4')
+  +ippon-grid--slot-example('-col-2 -col-tab-4')
+  +ippon-grid--slot-example('-col-4 -col-tab-4')
+  +ippon-grid--slot-example('-col-4 -col-tab-6')
+  +ippon-grid--slot-example('-col-4 -col-tab-6')
+  +ippon-grid--slot-example('-col-1 -col-tab-2')
+  +ippon-grid--slot-example('-col-3 -col-tab-10')
+
+hr
+
++ippon-grid('-container-4 -container-m-12 -gap-16 -gap-l-32')
+  +ippon-grid--slot-example('-col-2 -col-m-4')
+  +ippon-grid--slot-example('-col-2 -col-m-4')
+  +ippon-grid--slot-example('-col-4 -col-m-4')
+  +ippon-grid--slot-example('-col-4 -col-m-6')
+  +ippon-grid--slot-example('-col-4 -col-m-6')
+  +ippon-grid--slot-example('-col-1 -col-m-2')
+  +ippon-grid--slot-example('-col-3 -col-m-10')

package/styles/src/organism/grid/grid.md

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

package/styles/src/organism/grid/grid.mixin.pug

@@ -0,0 +1,7 @@
+mixin ippon-grid(classes)
+  .ippon-grid(class=classes)
+    block
+
+mixin ippon-grid--slot(classes)
+  .ippon-grid--slot(class=classes)
+    block

package/styles/src/organism/grid/grid.render.pug

@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  .ipp-doc-container
+    include grid.code.pug

package/styles/src/organism/h-space/_h-space.scss

@@ -0,0 +1,49 @@
+@use '../../quark/gap';
+
+.ippon-h-space {
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  @include gap.gaps;
+
+  &.-wrap {
+    flex-wrap: wrap;
+  }
+
+  &.-space-between {
+    justify-content: space-between;
+  }
+
+  &.-top {
+    align-items: flex-start;
+  }
+
+  &.-middle {
+    align-items: center;
+  }
+
+  &.-bottom {
+    align-items: flex-end;
+  }
+
+  &.-left {
+    justify-content: flex-start;
+  }
+
+  &.-center {
+    justify-content: center;
+  }
+
+  &.-right {
+    justify-content: flex-end;
+  }
+
+  &--slot {
+    &.-expand {
+      flex: 1;
+    }
+  }
+}

package/styles/src/organism/h-space/h-space.code.pug

@@ -0,0 +1,56 @@
+include h-space.mixin.pug
+
+mixin ippon-h-space-rectangle(height = 32)
+  div(
+    style=`width: var(--ippon-size-32); height: var(--ippon-size-${height}); background-color: var(--ippon-color-brand-surface-primary); border-radius: var(--ippon-radius-m)`
+  )
+
+mixin ippon-h-space-equal-rectangles(options)
+  +ippon-h-space-rectangle(options)
+  +ippon-h-space-rectangle(options)
+  +ippon-h-space-rectangle(options)
+
+mixin ippon-h-space-mixed-rectangles
+  +ippon-h-space-rectangle(16)
+  +ippon-h-space-rectangle(8)
+  +ippon-h-space-rectangle(32)
+
++ippon-h-space
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 8 })
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 32, align: 'middle' })
+  +ippon-h-space-mixed-rectangles
+
++ippon-h-space({ gap: 16, align: 'top' })
+  +ippon-h-space-mixed-rectangles
+
++ippon-h-space({ gap: 20, align: 'bottom' })
+  +ippon-h-space-mixed-rectangles
+
++ippon-h-space({ gap: 32, align: 'left' })
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 16, align: 'center' })
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 20, align: 'right' })
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 20, align: 'space-between' })
+  +ippon-h-space-equal-rectangles
+
++ippon-h-space({ gap: 16, align: 'stretch' })
+  +ippon-h-space-rectangle
+  +ippon-h-space--slot({ expand: true })
+    +ippon-h-space-rectangle
+  +ippon-h-space-rectangle
+
++ippon-h-space({ gap: 16, wrap: true })
+  each i in Array(40).fill()
+    +ippon-h-space-rectangle
+
++ippon-h-space({ gap: 16, tag: 'section' })
+  +ippon-h-space-equal-rectangles

package/styles/src/organism/h-space/h-space.md

@@ -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/styles/src/organism/h-space/h-space.mixin.pug

@@ -0,0 +1,14 @@
+mixin ippon-h-space(options)
+  - const { gap, align, wrap, tag } = options || {};
+  - const gapClass = gap ? `-gap-${gap}` : null;
+  - const alignClass = align ? `-${align}` : null;
+  - const wrapClass = wrap ? '-wrap' : null;
+
+  #{tag || 'div'}.ippon-h-space(class=[gapClass, alignClass, wrapClass])
+    block
+
+mixin ippon-h-space--slot(options)
+  - const { expand } = options || {};
+  - const expandClass = expand ? '-expand' : null;
+  .ippon-h-space--slot(class=expandClass)
+    block

package/styles/src/organism/h-space/h-space.render.pug

@@ -0,0 +1,5 @@
+extends /layout
+
+block body
+  div(style='display: flex; flex-direction: column; gap: 2rem')
+    include h-space.code.pug

package/styles/src/organism/header/_header.scss

@@ -0,0 +1,8 @@
+.ippon-header {
+  display: flex;
+  gap: var(--ippon-size-32);
+  align-items: center;
+  border-bottom: 1px solid var(--ippon-color-neutral-border);
+  background-color: var(--ippon-color-neutral-surface-primary);
+  padding: var(--ippon-size-32) var(--ippon-size-48);
+}

package/styles/src/organism/header/header.code.pug

@@ -0,0 +1,14 @@
+include /molecule/tabs/tabs.mixin.pug
+include /atom/tab/tab.mixin.pug
+
+include header.mixin.pug
+
++ippon-header
+  +ippon-header--slot Logo
+  +ippon-header--slot
+    +ippon-tabs({ id: 'main-navigation' })
+      +ippon-tab({ id: 'tab-1', controls: 'main-navigation' }) Tab 1
+      +ippon-tab({ id: 'tab-2', controls: 'main-navigation', selected: true }) Tab 2
+      +ippon-tab({ id: 'tab-3', controls: 'main-navigation', href: '#tab3' }) Tab 3
+      +ippon-tab({ id: 'tab-4', controls: 'main-navigation' }) Tab 4
+      +ippon-tab({ id: 'tab-5', controls: 'main-navigation' }) Tab 5

package/styles/src/organism/header/header.md

@@ -0,0 +1 @@
+## Header

package/styles/src/organism/header/header.mixin.pug

@@ -0,0 +1,7 @@
+mixin ippon-header
+  .ippon-header
+    block
+
+mixin ippon-header--slot
+  .ippon-header--slot
+    block

package/styles/src/organism/header/header.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include header.code.pug