@ippon-ui/ui 0.0.2

package/styles/src/atom/button/_button.scss

@@ -0,0 +1,242 @@
+@use '../../quark/typography';
+
+@keyframes ippon-button-loading-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ippon-button-loading-spin {
+  from {
+    rotate: 0deg;
+  }
+
+  to {
+    rotate: 360deg;
+  }
+}
+
+.ippon-button {
+  @include typography.label-medium;
+
+  --_color-primary: var(--ippon-color-brand-surface-primary);
+  --_color-primary-hover: var(--ippon-color-brand-surface-primary-hover);
+  --_color-primary-active: var(--ippon-color-brand-surface-primary-active);
+  --_color-secondary: var(--ippon-color-brand-surface-secondary);
+  --_color-secondary-hover: var(--ippon-color-brand-surface-secondary-hover);
+  --_color-secondary-active: var(--ippon-color-brand-surface-secondary-active);
+  --_color-outline: transparent;
+  --_color-text-primary: var(--ippon-color-brand-text-icon-on-primary);
+  --_color-text-secondary: var(--ippon-color-brand-text-icon-on-secondary);
+  --_color-border: var(--ippon-color-brand-border);
+  --_icon-size: var(--ippon-size-20);
+  --_padding-vertical: var(--ippon-size-8);
+  --_padding-horizontal: var(--ippon-size-16);
+  --_background-color: var(--_color-primary);
+  --_border-color: var(--_color-primary);
+  --_color: var(--_color-text-primary);
+  --_border-width: 1px;
+  --_inner-padding-vertical: calc(var(--_padding-vertical) - var(--_border-width));
+  --_inner-padding-horizontal: calc(var(--_padding-horizontal) - var(--_border-width));
+
+  display: inline-flex;
+  gap: var(--ippon-size-8);
+  align-items: center;
+  border: var(--_border-width) solid var(--_border-color);
+  border-radius: var(--ippon-radius-m);
+  background-color: var(--_background-color);
+  padding: var(--_inner-padding-vertical) var(--_inner-padding-horizontal);
+  vertical-align: middle;
+  color: var(--_color);
+  cursor: pointer;
+
+  &:has(&--icon:is(:last-child)) {
+    padding-right: var(--_inner-padding-vertical);
+  }
+
+  &:has(&--icon:is(:first-child)) {
+    padding-left: var(--_inner-padding-vertical);
+  }
+
+  &--icon {
+    line-height: 1;
+    font-size: var(--_icon-size);
+    font-weight: 400;
+  }
+
+  &.-small {
+    @include typography.label-small;
+
+    --_padding-vertical: var(--ippon-size-8);
+    --_padding-horizontal: var(--ippon-size-12);
+    --_icon-size: var(--ippon-size-16);
+  }
+
+  &.-large {
+    @include typography.label-large;
+
+    --_padding-vertical: var(--ippon-size-12);
+    --_padding-horizontal: var(--ippon-size-16);
+    --_icon-size: var(--ippon-size-24);
+  }
+
+  &:hover {
+    --_background-color: var(--_color-primary-hover);
+    --_border-color: var(--_color-primary-hover);
+  }
+
+  &:active {
+    --_background-color: var(--_color-primary-active);
+    --_border-color: var(--_color-primary-active);
+  }
+
+  &:disabled:not(.-loading) {
+    --_background-color: var(--ippon-color-neutral-200);
+    --_border-color: var(--ippon-color-neutral-200);
+    --_color: var(--ippon-color-neutral-500);
+
+    cursor: not-allowed;
+  }
+
+  &.-secondary {
+    --_background-color: var(--_color-secondary);
+    --_border-color: var(--_color-secondary);
+    --_color: var(--_color-text-secondary);
+
+    &:hover {
+      --_background-color: var(--_color-secondary-hover);
+      --_border-color: var(--_color-secondary-hover);
+    }
+
+    &:active {
+      --_background-color: var(--_color-secondary-active);
+      --_border-color: var(--_color-secondary-active);
+    }
+
+    &:disabled:not(.-loading) {
+      --_background-color: var(--ippon-color-neutral-200);
+      --_border-color: var(--ippon-color-neutral-200);
+      --_color: var(--ippon-color-neutral-500);
+    }
+  }
+
+  &.-outline {
+    --_background-color: var(--_color-outline);
+    --_color: var(--_color-text-secondary);
+    --_border-color: var(--_color-border);
+
+    &:hover {
+      --_background-color: var(--_color-secondary-hover);
+    }
+
+    &:active {
+      --_background-color: var(--_color-secondary-active);
+    }
+
+    &:disabled:not(.-loading) {
+      --_background-color: var(--ippon-color-neutral-200);
+      --_border-color: var(--ippon-color-neutral-200);
+      --_color: var(--ippon-color-neutral-500);
+    }
+  }
+
+  &.-text {
+    --_background-color: transparent;
+    --_border-color: transparent;
+    --_color: var(--_color-text-secondary);
+
+    &:hover {
+      --_background-color: var(--_color-secondary-hover);
+      --_border-color: transparent;
+    }
+
+    &:active {
+      --_background-color: var(--_color-secondary-active);
+      --_border-color: transparent;
+    }
+
+    &:disabled:not(.-loading) {
+      --_background-color: transparent;
+      --_border-color: transparent;
+    }
+  }
+
+  &.-loading {
+    animation: ippon-button-loading-pulse 1.5s ease-in-out infinite;
+    cursor: progress;
+  }
+
+  &--icon.-loading {
+    animation: ippon-button-loading-spin 1s linear infinite;
+  }
+
+  &.-success {
+    --_color-primary: var(--ippon-color-success-surface-primary);
+    --_color-primary-hover: var(--ippon-color-success-surface-primary-hover);
+    --_color-primary-active: var(--ippon-color-success-surface-primary-active);
+    --_color-secondary: var(--ippon-color-success-surface-secondary);
+    --_color-secondary-hover: var(--ippon-color-success-surface-secondary-hover);
+    --_color-secondary-active: var(--ippon-color-success-surface-secondary-active);
+    --_color-outline: transparent;
+    --_color-text-primary: var(--ippon-color-success-text-icon-on-primary);
+    --_color-text-secondary: var(--ippon-color-success-text-icon-on-secondary);
+    --_color-border: var(--ippon-color-success-border);
+  }
+
+  &.-error {
+    --_color-primary: var(--ippon-color-error-surface-primary);
+    --_color-primary-hover: var(--ippon-color-error-surface-primary-hover);
+    --_color-primary-active: var(--ippon-color-error-surface-primary-active);
+    --_color-secondary: var(--ippon-color-error-surface-secondary);
+    --_color-secondary-hover: var(--ippon-color-error-surface-secondary-hover);
+    --_color-secondary-active: var(--ippon-color-error-surface-secondary-active);
+    --_color-outline: var(--ippon-color-neutral-surface-secondary);
+    --_color-text-primary: var(--ippon-color-error-text-icon-on-primary);
+    --_color-text-secondary: var(--ippon-color-error-text-icon-on-secondary);
+    --_color-border: var(--ippon-color-error-border);
+  }
+
+  &.-information {
+    --_color-primary: var(--ippon-color-information-2-surface-primary);
+    --_color-primary-hover: var(--ippon-color-information-2-surface-primary-hover);
+    --_color-primary-active: var(--ippon-color-information-2-surface-primary-active);
+    --_color-secondary: var(--ippon-color-information-2-surface-secondary);
+    --_color-secondary-hover: var(--ippon-color-information-2-surface-secondary-hover);
+    --_color-secondary-active: var(--ippon-color-information-2-surface-secondary-active);
+    --_color-outline: transparent;
+    --_color-text-primary: var(--ippon-color-information-2-text-icon-on-primary);
+    --_color-text-secondary: var(--ippon-color-information-2-text-icon-on-secondary);
+    --_color-border: var(--ippon-color-information-2-border);
+  }
+
+  &.-warning {
+    --_color-primary: var(--ippon-color-warning-surface-primary);
+    --_color-primary-hover: var(--ippon-color-warning-surface-primary-hover);
+    --_color-primary-active: var(--ippon-color-warning-surface-primary-active);
+    --_color-secondary: var(--ippon-color-warning-surface-secondary);
+    --_color-secondary-hover: var(--ippon-color-warning-surface-secondary-hover);
+    --_color-secondary-active: var(--ippon-color-warning-surface-secondary-active);
+    --_color-outline: var(--ippon-color-neutral-surface-secondary);
+    --_color-text-primary: var(--ippon-color-warning-text-icon-on-primary);
+    --_color-text-secondary: var(--ippon-color-warning-text-icon-on-secondary);
+    --_color-border: var(--ippon-color-warning-border);
+  }
+
+  &.-neutral {
+    --_color-primary: var(--ippon-color-neutral-surface-primary);
+    --_color-primary-hover: var(--ippon-color-neutral-surface-primary-hover);
+    --_color-primary-active: var(--ippon-color-neutral-surface-primary-active);
+    --_color-secondary: var(--ippon-color-neutral-surface-secondary);
+    --_color-secondary-hover: var(--ippon-color-neutral-surface-secondary-hover);
+    --_color-secondary-active: var(--ippon-color-neutral-surface-secondary-active);
+    --_color-outline: var(--ippon-color-neutral-surface-secondary);
+    --_color-text-primary: var(--ippon-color-neutral-text-icon-on-primary);
+    --_color-text-secondary: var(--ippon-color-neutral-text-icon-on-secondary);
+    --_color-border: var(--ippon-color-neutral-border);
+  }
+}

package/styles/src/atom/button/button.code.pug

@@ -0,0 +1,38 @@
+include /atom/ion/ion.mixin.pug
+
+include button.mixin.pug
+
+mixin ippon-button-example-variants(options)
+  - const { color, size } = options || {};
+  - const variants = [null, 'secondary', 'outline', 'text'];
+  - const ucFirst = (string) => (string ? string.charAt(0).toUpperCase() + string.slice(1) : '');
+  - const sizeSuffix = size ? ` (${size})` : '';
+  each variant in variants
+    +ippon-button({ color, variant: variant, size })
+      = `${ucFirst(color || 'default')} ${variant || 'primary'}${sizeSuffix}`
+  +ippon-button({ size, color, disabled: true })
+    = 'disabled'
+  +ippon-button({ size, color, loading: true })
+    = 'loading'
+
+mixin ippon-button-example-colors
+  - const colors = ['success', 'error', 'information', 'warning', 'neutral'];
+
+  each color in colors
+    +ippon-button-example-variants({ color })
+
+mixin ippon-button-example-icons(size)
+  +ippon-button({ size, icon: { name: 'heart' } })
+  +ippon-button({ size, variant: 'secondary', iconLeft: { name: 'logo-angular' } }) Icon left
+  +ippon-button({ size, variant: 'outline', iconRight: { name: 'search' } }) Icon right
+  +ippon-button({ size, variant: 'text', iconLeft: { name: 'remove' }, iconRight: { name: 'add' } }) Icon both
+  +ippon-button({ size, disabled: true, iconLeft: { name: 'remove' }, iconRight: { name: 'add' } }) Disabled
+  +ippon-button({ size, loading: true, iconLeft: { name: 'remove' }, iconRight: { name: 'add' } }) Loading
+
++ippon-button-example-variants({ size: 'small' })
++ippon-button-example-variants
++ippon-button-example-variants({ size: 'large' })
++ippon-button-example-colors
++ippon-button-example-icons('small')
++ippon-button-example-icons
++ippon-button-example-icons('large')

package/styles/src/atom/button/button.md

@@ -0,0 +1,31 @@
+## Button
+
+**Colors:**
+
+- Default
+- Success `-success`
+- Error `-error`
+- Information `-information`
+- Warning `-warning`
+- Neutral `-neutral`
+
+**Variants:**
+
+- Primary
+- Secondary `-secondary`
+- Outline `-outline`
+- Text `-text`
+
+**States:**
+
+- Loading `-loading` (adds `disabled` and `aria-busy="true"`)
+  - When a right icon is present, replace it with a `sync` icon (the CSS animation is handled by `-loading`)
+
+**Icons:**
+
+If you use [icons]([[TIKUI_BASEPATH]]icons/index.html), don't forget to wrap each child in a **part**:
+
+- `icon-button--icon` for the icon
+- `icon-button--text` for the text
+
+> It's because the space before and after the icon is different from a _text_ or an _icon_.

package/styles/src/atom/button/button.mixin.pug

@@ -0,0 +1,30 @@
+include /atom/ion/ion.mixin.pug
+
+mixin ippon-button(options)
+  - const { disabled, loading, color, variant, icon, iconLeft, iconRight, size, command, commandfor } = options || {};
+  - const colorClass = color ? `-${color}` : null;
+  - const variantClass = variant ? `-${variant}` : null;
+  - const sizeClass = size ? `-${size}` : null;
+  - const loadingClass = loading ? '-loading' : null;
+  - const realIconLeft = iconLeft ?? icon;
+  - const realIconRight = loading && iconRight ? { name: 'sync' } : iconRight;
+  - const iconRightClass = loading && iconRight ? 'ippon-button--icon -loading' : 'ippon-button--icon';
+  - const hasIcon = !!(realIconLeft || realIconRight);
+
+  button.ippon-button(
+    class=[colorClass, variantClass, sizeClass, loadingClass],
+    disabled=disabled || loading,
+    aria-busy=loading ? 'true' : undefined,
+    command=command,
+    commandfor=commandfor
+  )
+    if realIconLeft
+      +ippon-ion({ ...realIconLeft, additionalClass: 'ippon-button--icon' })
+    if block
+      if hasIcon
+        span.ippon-button--text
+          block
+      else
+        block
+    if realIconRight
+      +ippon-ion({ ...realIconRight, additionalClass: iconRightClass })

package/styles/src/atom/button/button.render.pug

@@ -0,0 +1,13 @@
+extends /layout
+
+block body
+  div(
+    style='display: grid; grid-template-columns: repeat(6, auto); gap: 1rem; justify-items: left; align-items: center'
+  )
+    div Primary
+    div Secondary
+    div Outline
+    div Text
+    div Disabled
+    div Loading
+    include button.code.pug

package/styles/src/atom/icon/_icon.scss

@@ -0,0 +1,8 @@
+@use '../../quark/font';
+
+.ippon-icon {
+  line-height: 1;
+
+  @include font.sizes;
+  @include font.colors;
+}

package/styles/src/atom/icon/icon.code.pug

@@ -0,0 +1,5 @@
+include icon.mixin.pug
+
++ippon-icon({ name: 'add' })
++ippon-icon({ name: 'close', size: 24 })
++ippon-icon({ name: 'close', color: 'brand-primary' })

package/styles/src/atom/icon/icon.md

@@ -0,0 +1,11 @@
+## Icon
+
+The `icon` atom represents a graphical icon element from the Ionicons library.
+
+**Usage**
+
+Icons are rendered using the `ippon-icon` class with the `ippon-ion-{name}` classes to specify which icon to display from the Ionicons library.
+
+**Sizing**
+
+Icons inherit their size from the parent element's font size. They maintain a 1:1 aspect ratio.

package/styles/src/atom/icon/icon.mixin.pug

@@ -0,0 +1,8 @@
+include /atom/ion/ion.mixin.pug
+
+mixin ippon-icon(options)
+  - const { color, additionalClass, size } = options;
+  - const sizeClass = size ? `-size-${size}` : null;
+  - const colorClass = color ? `-color-${color}` : null;
+  - const ionOptions = { additionalClass: ['ippon-icon', sizeClass, colorClass, additionalClass], ...options };
+  +ippon-ion(ionOptions)

package/styles/src/atom/icon/icon.render.pug

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

package/styles/src/atom/ion/ion.code.pug

@@ -0,0 +1,8 @@
+include ion.mixin.pug
+
++ippon-ion({ name: 'home', variant: 'filled' })
++ippon-ion({ name: 'home', variant: 'outline' })
++ippon-ion({ name: 'home', variant: 'sharp' })
++ippon-ion({ name: 'logo-angular' })
++ippon-ion({ name: 'logo-react' })
++ippon-ion({ name: 'logo-vue' })

package/styles/src/atom/ion/ion.md

@@ -0,0 +1,11 @@
+## Ion (Icons)
+
+Ion are based on _Ionicons_, the set is [available here]([[TIKUI_BASEPATH]]icons/index.html).
+
+There is two kinds of icons:
+
+- Classic ones: start with `ippon-ion-` followed by suffix (Variant):
+  - Nothing: the default one (**Filled**).
+  - `-outline` for the **outline** version.
+  - `-sharp` for the **sharp** version.
+- Logo ones: start with `ippon-ion-logo-` followed by the name of the logo.

package/styles/src/atom/ion/ion.mixin.pug

@@ -0,0 +1,8 @@
+mixin ippon-ion(options)
+  - const { name, variant, additionalClass, clickable } = options || {};
+  - const safeVariant = ['outline', 'sharp'].includes(variant) ? variant : null;
+  - const suffix = safeVariant ? `-${safeVariant}` : '';
+  - const iconClass = `ippon-ion-${name}${suffix}`;
+  - const selector = clickable ? 'button' : 'span';
+  - const role = clickable ? null : 'presentation';
+  #{selector}(class=[additionalClass, iconClass], role=role)

package/styles/src/atom/ion/ion.render.pug

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

package/styles/src/atom/meter/_meter.scss

@@ -0,0 +1,23 @@
+.ippon-meter {
+  --_bar-color: var(--ippon-color-information-2-surface-primary);
+  --_background-color: var(--ippon-color-neutral-surface-tertiary);
+  --_height: var(--ippon-size-8);
+  --ippon-meter-percentage: 0%;
+
+  display: block;
+  position: relative;
+  background-color: var(--_background-color);
+  width: 100%;
+  height: var(--_height);
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    inset: 0 auto 0 0;
+    transition: width 0.3s ease-in-out;
+    border-radius: var(--_border-radius);
+    background-color: var(--_bar-color);
+    width: var(--ippon-meter-percentage);
+    content: '';
+  }
+}

package/styles/src/atom/meter/meter.code.pug

@@ -0,0 +1,8 @@
+include meter.mixin.pug
+
++ippon-meter({ min: 0, max: 100, value: 0 })
++ippon-meter({ min: 0, max: 100, value: 25 })
++ippon-meter({ min: 0, max: 100, value: 50 })
++ippon-meter({ min: 0, max: 100, value: 75 })
++ippon-meter({ min: 0, max: 100, value: 100 })
++ippon-meter({ min: 0, max: 200, value: 150 })

package/styles/src/atom/meter/meter.md

@@ -0,0 +1,7 @@
+## Meter
+
+A meter component to display a gauge indicator with a minimum, current, and maximum value.
+
+**Accessibility:**
+
+Uses ARIA `role="meter"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes for proper accessibility support.

package/styles/src/atom/meter/meter.mixin.pug

@@ -0,0 +1,12 @@
+mixin ippon-meter(options)
+  - const { min = 0, max = 100, value = 0 } = options || {};
+  - const percentage = ((value - min) / (max - min)) * 100;
+  - const style = `--ippon-meter-percentage: ${Math.min(Math.max(percentage, 0), 100)}%`;
+
+  .ippon-meter(
+    role='meter',
+    aria-valuenow=value,
+    aria-valuemin=min,
+    aria-valuemax=max,
+    style=style
+  )

package/styles/src/atom/meter/meter.render.pug

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

package/styles/src/atom/progress/_progress.scss

@@ -0,0 +1,23 @@
+.ippon-progress {
+  --_bar-color: var(--ippon-color-information-2-surface-primary);
+  --_background-color: var(--ippon-color-neutral-surface-tertiary);
+  --_height: var(--ippon-size-8);
+  --ippon-progress-percentage: 0%;
+
+  display: block;
+  position: relative;
+  background-color: var(--_background-color);
+  width: 100%;
+  height: var(--_height);
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    inset: 0 auto 0 0;
+    transition: width 0.3s ease-in-out;
+    border-radius: var(--_border-radius);
+    background-color: var(--_bar-color);
+    width: var(--ippon-progress-percentage);
+    content: '';
+  }
+}

package/styles/src/atom/progress/progress.code.pug

@@ -0,0 +1,8 @@
+include progress.mixin.pug
+
++ippon-progress({ min: 0, max: 100, value: 0 })
++ippon-progress({ min: 0, max: 100, value: 25 })
++ippon-progress({ min: 0, max: 100, value: 50 })
++ippon-progress({ min: 0, max: 100, value: 75 })
++ippon-progress({ min: 0, max: 100, value: 100 })
++ippon-progress({ min: 0, max: 200, value: 150 })

package/styles/src/atom/progress/progress.md

@@ -0,0 +1,7 @@
+## Progress
+
+A progress component to display the completion progress of a task.
+
+**Accessibility:**
+
+Uses ARIA `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes for proper accessibility support.

package/styles/src/atom/progress/progress.mixin.pug

@@ -0,0 +1,14 @@
+mixin ippon-progress(options)
+  - const { min = 0, max = 100, value = 0 } = options || {};
+  - const percentage = ((value - min) / (max - min)) * 100;
+  - const style = `--ippon-progress-percentage: ${Math.min(Math.max(percentage, 0), 100)}%`;
+  - const busy = value < max;
+
+  .ippon-progress(
+    role='progressbar',
+    aria-valuenow=value,
+    aria-valuemin=min,
+    aria-valuemax=max,
+    aria-busy=busy,
+    style=style
+  )

package/styles/src/atom/progress/progress.render.pug

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

package/styles/src/atom/tab/_tab.scss

@@ -0,0 +1,48 @@
+@use '../../quark/typography';
+
+.ippon-tab {
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  gap: var(--ippon-size-4);
+  border: 0;
+  background: transparent;
+  padding: var(--ippon-size-8) var(--ippon-size-12) var(--ippon-size-10);
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+
+  @include typography.body-medium-bold;
+
+  &:hover {
+    color: var(--ippon-color-information-2-text-icon-secondary);
+  }
+
+  &[aria-selected='true'] {
+    color: var(--ippon-color-information-2-text-icon-secondary);
+    cursor: default;
+  }
+
+  &[aria-selected='true']::after {
+    bottom: calc(-1 * var(--_height));
+  }
+
+  &::after {
+    --_height: var(--ippon-size-2);
+    --_double-height: calc(var(--_height) * 2);
+    --_radius: var(--ippon-radius-m);
+    --_padding: var(--ippon-size-8);
+
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    right: var(--_padding);
+    bottom: calc(-1 * var(--_double-height));
+    left: var(--_padding);
+    border: var(--_height) solid var(--ippon-color-information-2-surface-primary);
+    border-radius: var(--_radius);
+    height: var(--_double-height);
+    content: '';
+  }
+}

package/styles/src/atom/tab/tab.code.pug

@@ -0,0 +1,5 @@
+include tab.mixin.pug
+
++ippon-tab({ id: 'tab-1', controls: 'panel-id' }) Tab 1
++ippon-tab({ id: 'tab-2', controls: 'panel-id', selected: true }) Tab 2
++ippon-tab({ id: 'tab-3', controls: 'panel-id', href: '#tab3' }) Tab 3

package/styles/src/atom/tab/tab.md

@@ -0,0 +1 @@
+## Tab

package/styles/src/atom/tab/tab.mixin.pug

@@ -0,0 +1,14 @@
+mixin ippon-tab(options)
+  - const { id, controls, selected, href } = options || {};
+  - const selector = href ? 'a' : 'button';
+  - ariaSelected = selected ? 'true' : null;
+  - tabindex = selected ? -1 : null;
+  #{selector}.ippon-tab(
+    role='tab',
+    id=id,
+    aria-controls=controls,
+    aria-selected=ariaSelected,
+    href=href,
+    tabindex=tabindex
+  )
+    block

package/styles/src/atom/tab/tab.render.pug

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