@inglorious/ui 7.1.1 → 7.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -300,28 +300,28 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "10.0.1",
-    "@inglorious/store": "11.0.1",
-    "@inglorious/utils": "3.8.0",
-    "@inglorious/web": "6.4.1"
+    "@inglorious/charts": "10.0.2",
+    "@inglorious/store": "11.0.2",
+    "@inglorious/utils": "4.0.0",
+    "@inglorious/web": "6.4.2"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.2.36",
-    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@fontsource/material-symbols-outlined": "^5.3.5",
+    "@fortawesome/fontawesome-free": "^7.3.1",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/vite-plugin-jsx": "2.0.1",
-    "@inglorious/vite-plugin-vue": "1.0.2",
-    "@inglorious/store": "11.0.1",
-    "@inglorious/web": "6.4.1",
-    "@storybook/addon-docs": "^10.5.6",
-    "@storybook/web-components-vite": "^10.5.6",
-    "happy-dom": "^15.11.0",
-    "jsdom": "^25.0.0",
-    "lucide": "^0.575.0",
-    "prettier": "^3.6.2",
-    "storybook": "^10.5.6",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.15"
+    "@inglorious/store": "11.0.2",
+    "@inglorious/vite-plugin-jsx": "2.0.2",
+    "@inglorious/vite-plugin-vue": "1.0.3",
+    "@inglorious/web": "6.4.2",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/web-components-vite": "^10.6.0",
+    "happy-dom": "^20.14.0",
+    "jsdom": "^30.0.1",
+    "lucide": "^1.41.0",
+    "prettier": "^3.9.6",
+    "storybook": "^10.6.0",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/button-group/template.js

@@ -75,9 +75,11 @@ export function render(props) {
           children: html`
             ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
             ${children ?? label}
-            ${iconAfter
-              ? html`<span class="iw-button-icon">${iconAfter}</span>`
-              : null}
+            ${
+              iconAfter
+                ? html`<span class="iw-button-icon">${iconAfter}</span>`
+                : null
+            }
           `,
           variant: itemVariant ?? variant,
           color: itemColor ?? color,

package/src/controls/combobox/template.js

@@ -46,9 +46,11 @@ export const Combobox = {
         [`iw-combobox-${props.size}`]: props.size !== "md",
       })}
     >
-      ${props.label
-        ? html`<label class="iw-combobox-label">${props.label}</label>`
-        : null}
+      ${
+        props.label
+          ? html`<label class="iw-combobox-label">${props.label}</label>`
+          : null
+      }
       ${this.renderControl?.(props)}
       ${when(props.isOpen, () => this.renderDropdown?.(props))}
     </div>`
@@ -118,9 +120,11 @@ export const Combobox = {
     )
 
     return html`<span class="iw-combobox-value"
-      >${selectedOption
-        ? getOptionLabel(selectedOption)
-        : String(props.selectedValue)}</span
+      >${
+        selectedOption
+          ? getOptionLabel(selectedOption)
+          : String(props.selectedValue)
+      }</span
     >`
   },
 

package/src/controls/fab/style.css

@@ -1,76 +1,44 @@
 .iw-button.iw-fab {
   box-shadow: var(--iw-shadow-lg);
   border: 0;
-  width: 3.5rem;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.65em;
+  line-height: 1;
+  font-weight: var(--iw-font-weight-normal);
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
     box-shadow: var(--iw-shadow-xl);
   }
 
-  .iw-fab-content {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.65em;
-    line-height: 1;
-    font-weight: var(--iw-font-weight-normal);
-    transform: translateY(-0.04em);
-  }
-
-  &.iw-button-sm {
-    width: 2.75rem;
+  &.iw-button-shape-round {
+    width: var(--iw-space-12);
+    height: var(--iw-space-12);
 
-    .iw-fab-content {
-      font-size: 1.55em;
+    &.iw-button-sm {
+      width: var(--iw-space-10);
+      height: var(--iw-space-10);
     }
-  }
-
-  &.iw-button-lg {
-    width: 4.25rem;
 
-    .iw-fab-content {
-      font-size: 1.75em;
+    &.iw-button-lg {
+      width: var(--iw-space-14);
+      height: var(--iw-space-14);
     }
   }
 
   &.iw-fab-extended {
-    width: auto;
-    min-height: 2.5rem;
-    padding: var(--iw-space-2) var(--iw-space-4);
+    min-height: var(--iw-space-10);
     gap: var(--iw-space-2);
 
-    .iw-fab-content {
-      font-size: inherit;
-      transform: none;
+    &.iw-button-sm {
+      min-height: var(--iw-space-8);
     }
-  }
-
-  &.iw-fab-extended.iw-button-sm {
-    min-height: 2rem;
-    padding: var(--iw-space-1) var(--iw-space-3);
-  }
 
-  &.iw-fab-extended.iw-button-lg {
-    min-height: 3rem;
-    padding: var(--iw-space-3) var(--iw-space-5);
-  }
-
-  &.iw-fab-extended .iw-fab-content {
-    transform: none;
-  }
-
-  &.iw-fab-extended .iw-button-icon {
-    width: 1.1em;
-    height: 1.1em;
-    transform: translateY(-0.02em);
-  }
-
-  &.iw-fab-extended.iw-button-sm .iw-button-icon {
-    transform: none;
-  }
-
-  &.iw-fab-extended.iw-button-lg .iw-button-icon {
-    transform: translateY(-0.03em);
+    &.iw-button-lg {
+      min-height: var(--iw-space-12);
+    }
   }
 }

package/src/controls/fab/template.js

@@ -3,8 +3,6 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { html } from "@inglorious/web"
-
 import { Button } from "../button/index.js"
 
 /**
@@ -27,9 +25,7 @@ export function render(props) {
     shape: isExtended ? "pill" : "round",
     className:
       `iw-fab ${isExtended ? "iw-fab-extended" : ""} ${className}`.trim(),
-    children: isExtended
-      ? children
-      : html`<span class="iw-fab-content">${children}</span>`,
+    children,
     onClick,
   })
 }

package/src/controls/file-upload/template.js

@@ -55,16 +55,20 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${label
-        ? html`
-            <label for=${uploadId} class="iw-upload-label">
-              ${label}
-              ${isRequired
-                ? html`<span class="iw-upload-required">*</span>`
-                : null}
-            </label>
-          `
-        : null}
+      ${
+        label
+          ? html`
+              <label for=${uploadId} class="iw-upload-label">
+                ${label}
+                ${
+                  isRequired
+                    ? html`<span class="iw-upload-required">*</span>`
+                    : null
+                }
+              </label>
+            `
+          : null
+      }
 
       <div class=${classMap(fieldClasses)}>
         <input
@@ -90,11 +94,13 @@ export function render(props) {
 
       <div class="iw-upload-field-summary">${summaryText}</div>
 
-      ${error
-        ? html`<span class="iw-upload-error-message">${error}</span>`
-        : hint
-          ? html`<span class="iw-upload-hint">${hint}</span>`
-          : null}
+      ${
+        error
+          ? html`<span class="iw-upload-error-message">${error}</span>`
+          : hint
+            ? html`<span class="iw-upload-hint">${hint}</span>`
+            : null
+      }
     </div>
   `
 }

package/src/controls/icon-button/template.js

@@ -27,9 +27,11 @@ export function render(props) {
     <span class="iw-icon-button-content iw-icon-button-content-${direction}">
       ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
       ${label}
-      ${iconAfter
-        ? html`<span class="iw-button-icon">${iconAfter}</span>`
-        : null}
+      ${
+        iconAfter
+          ? html`<span class="iw-button-icon">${iconAfter}</span>`
+          : null
+      }
     </span>
   `
 

package/src/controls/input/template.js

@@ -63,16 +63,20 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${label
-        ? html`
-            <label for=${inputId} class="iw-input-label">
-              ${label}
-              ${isRequired
-                ? html`<span class="iw-input-required">*</span>`
-                : null}
-            </label>
-          `
-        : null}
+      ${
+        label
+          ? html`
+              <label for=${inputId} class="iw-input-label">
+                ${label}
+                ${
+                  isRequired
+                    ? html`<span class="iw-input-required">*</span>`
+                    : null
+                }
+              </label>
+            `
+          : null
+      }
 
       <div class="iw-input-frame">
         ${icon ? html`<span class="iw-input-icon">${icon}</span>` : null}
@@ -93,18 +97,22 @@ export function render(props) {
           ${ref((element) => applyElementProps(element, rest))}
         />
 
-        ${iconAfter
-          ? html`<span class="iw-input-icon iw-input-icon-after"
-              >${iconAfter}</span
-            >`
-          : null}
+        ${
+          iconAfter
+            ? html`<span class="iw-input-icon iw-input-icon-after"
+                >${iconAfter}</span
+              >`
+            : null
+        }
       </div>
 
-      ${error
-        ? html`<span class="iw-input-error-message">${error}</span>`
-        : hint
-          ? html`<span class="iw-input-hint">${hint}</span>`
-          : null}
+      ${
+        error
+          ? html`<span class="iw-input-error-message">${error}</span>`
+          : hint
+            ? html`<span class="iw-input-hint">${hint}</span>`
+            : null
+      }
     </div>
   `
 }

package/src/controls/radio-group/template.js

@@ -45,9 +45,11 @@ export function render(props) {
       ?disabled=${isDisabled}
       ${ref((element) => applyElementProps(element, rest))}
     >
-      ${label
-        ? html`<legend class="iw-radio-group-label">${label}</legend>`
-        : null}
+      ${
+        label
+          ? html`<legend class="iw-radio-group-label">${label}</legend>`
+          : null
+      }
       ${options.map((option) => {
         const {
           label: optionLabel,

package/src/controls/slider/template.js

@@ -48,15 +48,21 @@ export function render(props) {
 
   return html`
     <div class=${classMap(classes)}>
-      ${(label || isValueVisible) &&
-      html`<div class="iw-slider-header">
-        ${label
-          ? html`<label for=${inputId}>${label}</label>`
-          : html`<span></span>`}
-        ${isValueVisible
-          ? html`<output class="iw-slider-value">${value}</output>`
-          : null}
-      </div>`}
+      ${
+        (label || isValueVisible) &&
+        html`<div class="iw-slider-header">
+          ${
+            label
+              ? html`<label for=${inputId}>${label}</label>`
+              : html`<span></span>`
+          }
+          ${
+            isValueVisible
+              ? html`<output class="iw-slider-value">${value}</output>`
+              : null
+          }
+        </div>`
+      }
       <input
         id=${inputId}
         class="iw-slider-input"

package/src/controls/textarea/template.js

@@ -57,16 +57,20 @@ export function render(props) {
 
   return html`
     <div class=${classMap(wrapperClasses)}>
-      ${label
-        ? html`
-            <label for=${textareaId} class="iw-textarea-label">
-              ${label}
-              ${isRequired
-                ? html`<span class="iw-textarea-required">*</span>`
-                : null}
-            </label>
-          `
-        : null}
+      ${
+        label
+          ? html`
+              <label for=${textareaId} class="iw-textarea-label">
+                ${label}
+                ${
+                  isRequired
+                    ? html`<span class="iw-textarea-required">*</span>`
+                    : null
+                }
+              </label>
+            `
+          : null
+      }
 
       <textarea
         id=${textareaId}
@@ -84,11 +88,13 @@ export function render(props) {
         ${ref((element) => applyElementProps(element, rest))}
       ></textarea>
 
-      ${error
-        ? html`<span class="iw-textarea-error-message">${error}</span>`
-        : hint
-          ? html`<span class="iw-textarea-hint">${hint}</span>`
-          : null}
+      ${
+        error
+          ? html`<span class="iw-textarea-error-message">${error}</span>`
+          : hint
+            ? html`<span class="iw-textarea-hint">${hint}</span>`
+            : null
+      }
     </div>
   `
 }

package/src/data-display/avatar/template.js

@@ -57,9 +57,11 @@ export function render(props) {
     style=${styleMap(styles)}
     @click=${onClick}
   >
-    ${src
-      ? html`<img class="iw-avatar-img" src=${src} alt=${alt} />`
-      : (children ?? initials ?? "?")}
+    ${
+      src
+        ? html`<img class="iw-avatar-img" src=${src} alt=${alt} />`
+        : (children ?? initials ?? "?")
+    }
   </span>`
 }
 

package/src/data-display/before-after/handlers.js

@@ -2,7 +2,7 @@
  * @typedef {import('../../../types/data-display/before-after.js').BeforeAfterProps} BeforeAfterEntity
  */
 
-import { clamp } from "@inglorious/utils/math/numbers.js"
+import { clamp } from "@inglorious/utils/math/number.js"
 
 import {
   DEFAULT_POSITION,

package/src/data-display/before-after/template.js

@@ -3,7 +3,7 @@
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
-import { clamp } from "@inglorious/utils/math/numbers.js"
+import { clamp } from "@inglorious/utils/math/number.js"
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 

package/src/data-display/carousel/helpers.js

@@ -1,4 +1,4 @@
-import { clamp } from "@inglorious/utils/math/numbers.js"
+import { clamp } from "@inglorious/utils/math/number.js"
 
 export const DEFAULT_AXIS = "x"
 export const VERTICAL_AXIS = "y"

package/src/data-display/chip/template.js

@@ -31,10 +31,12 @@ export function render(props) {
 
   return html`<span class=${classMap(classes)}>
     <span class="iw-chip-label">${children}</span>
-    ${isRemovable
-      ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
-          ×
-        </button>`
-      : null}
+    ${
+      isRemovable
+        ? html`<button type="button" class="iw-chip-remove" @click=${onClick}>
+            ×
+          </button>`
+        : null
+    }
   </span>`
 }

package/src/data-display/list/template.js

@@ -96,9 +96,11 @@ export const List = {
             meta,
             index,
             path: [...path, index],
-          })}${shouldDivide
-            ? html`<li class="iw-list-divider" role="separator"></li>`
-            : null}`
+          })}${
+            shouldDivide
+              ? html`<li class="iw-list-divider" role="separator"></li>`
+              : null
+          }`
         },
       )
 

package/src/examples/dashboard/primitive-section.js

@@ -77,22 +77,24 @@ export const PrimitiveSection = {
                       description ??
                       "This section is wired for per-primitive docs and examples.",
                   })}
-                  ${useCases.length
-                    ? html`
-                        <div style="margin-top: 16px; text-align: left;">
-                          ${Typography.render({
-                            variant: "body2",
-                            color: "secondary",
-                            children: "Common use cases",
-                          })}
-                          <ul style="margin: 8px 0 0; padding-left: 20px;">
-                            ${useCases.map(
-                              (useCase) => html`<li>${useCase}</li>`,
-                            )}
-                          </ul>
-                        </div>
-                      `
-                    : ""}
+                  ${
+                    useCases.length
+                      ? html`
+                          <div style="margin-top: 16px; text-align: left;">
+                            ${Typography.render({
+                              variant: "body2",
+                              color: "secondary",
+                              children: "Common use cases",
+                            })}
+                            <ul style="margin: 8px 0 0; padding-left: 20px;">
+                              ${useCases.map(
+                                (useCase) => html`<li>${useCase}</li>`,
+                              )}
+                            </ul>
+                          </div>
+                        `
+                      : ""
+                  }
                 </div>
               `,
             }),
@@ -123,10 +125,9 @@ export const PrimitiveSection = {
                               color: "secondary",
                               children: "Code",
                             }),
-                            html`<pre
-                              class="iw-primitive-code"
-                            ><code>${exampleCode ??
-                            "// Example coming soon."}</code></pre>`,
+                            html`<pre class="iw-primitive-code"><code>${
+                              exampleCode ?? "// Example coming soon."
+                            }</code></pre>`,
                           ],
                         }),
                         Flex.render({
@@ -139,10 +140,12 @@ export const PrimitiveSection = {
                               children: "Result",
                             }),
                             html`<div class="iw-primitive-preview">
-                              ${examplePreview ??
-                              html`<div class="iw-primitive-preview-empty">
-                                Preview coming soon.
-                              </div>`}
+                              ${
+                                examplePreview ??
+                                html`<div class="iw-primitive-preview-empty">
+                                  Preview coming soon.
+                                </div>`
+                              }
                             </div>`,
                           ],
                         }),

package/src/feedback/alert/template.js

@@ -55,24 +55,30 @@ export function render(props) {
     ${icon ? html`<div class="iw-alert-icon">${icon}</div>` : null}
     <div class="iw-alert-content">
       ${title ? html`<div class="iw-alert-title">${title}</div>` : null}
-      ${content
-        ? html`<div class="iw-alert-description">${content}</div>`
-        : null}
+      ${
+        content
+          ? html`<div class="iw-alert-description">${content}</div>`
+          : null
+      }
     </div>
-    ${hasTrailing
-      ? html`<div class="iw-alert-trailing">
-          ${action ? html`<div class="iw-alert-action">${action}</div>` : null}
-          ${onClose
-            ? html`<button
-                type="button"
-                class="iw-alert-close"
-                aria-label="Dismiss"
-                @click=${onClose}
-              >
-                ×
-              </button>`
-            : null}
-        </div>`
-      : null}
+    ${
+      hasTrailing
+        ? html`<div class="iw-alert-trailing">
+            ${action ? html`<div class="iw-alert-action">${action}</div>` : null}
+            ${
+              onClose
+                ? html`<button
+                    type="button"
+                    class="iw-alert-close"
+                    aria-label="Dismiss"
+                    @click=${onClose}
+                  >
+                    ×
+                  </button>`
+                : null
+            }
+          </div>`
+        : null
+    }
   </div>`
 }

package/src/feedback/dialog/template.js

@@ -43,23 +43,29 @@ export function render(props) {
       aria-modal="true"
       @click=${(event) => event.stopPropagation()}
     >
-      ${(title || onClose) &&
-      html`<div class="iw-dialog-header">
-        ${title ? html`<div class="iw-dialog-title">${title}</div>` : null}
-        ${onClose
-          ? html`<button
-              type="button"
-              class="iw-dialog-close"
-              aria-label="Close"
-              @click=${onClose}
-            >
-              ×
-            </button>`
-          : null}
-      </div>`}
-      ${description
-        ? html`<div class="iw-dialog-description">${description}</div>`
-        : null}
+      ${
+        (title || onClose) &&
+        html`<div class="iw-dialog-header">
+          ${title ? html`<div class="iw-dialog-title">${title}</div>` : null}
+          ${
+            onClose
+              ? html`<button
+                  type="button"
+                  class="iw-dialog-close"
+                  aria-label="Close"
+                  @click=${onClose}
+                >
+                  ×
+                </button>`
+              : null
+          }
+        </div>`
+      }
+      ${
+        description
+          ? html`<div class="iw-dialog-description">${description}</div>`
+          : null
+      }
       ${children ? html`<div class="iw-dialog-body">${children}</div>` : null}
       ${actions ? html`<div class="iw-dialog-actions">${actions}</div>` : null}
     </div>

package/src/feedback/snackbar/template.js

@@ -43,16 +43,18 @@ export function render(props) {
     <div class="iw-snackbar-content">
       <span class="iw-snackbar-message">${message}</span>
       ${action ? html`<span class="iw-snackbar-action">${action}</span>` : null}
-      ${onClose
-        ? html`<button
-            type="button"
-            class="iw-snackbar-close"
-            aria-label="Dismiss"
-            @click=${onClose}
-          >
-            ×
-          </button>`
-        : null}
+      ${
+        onClose
+          ? html`<button
+              type="button"
+              class="iw-snackbar-close"
+              aria-label="Dismiss"
+              @click=${onClose}
+            >
+              ×
+            </button>`
+          : null
+      }
     </div>
   </div>`
 }

package/src/index.js

@@ -2,6 +2,7 @@ export { Button } from "./controls/button/index.js"
 export { ButtonGroup } from "./controls/button-group/index.js"
 export { Checkbox } from "./controls/checkbox/index.js"
 export { Fab } from "./controls/fab/index.js"
+export { FileUpload } from "./controls/file-upload/index.js"
 export { IconButton } from "./controls/icon-button/index.js"
 export { Input } from "./controls/input/index.js"
 export { RadioGroup } from "./controls/radio-group/index.js"
@@ -10,7 +11,6 @@ export { Select } from "./controls/select/index.js"
 export { Slider } from "./controls/slider/index.js"
 export { Switch } from "./controls/switch/index.js"
 export { Textarea } from "./controls/textarea/index.js"
-export { FileUpload } from "./controls/file-upload/index.js"
 export { Avatar } from "./data-display/avatar/index.js"
 export { Badge } from "./data-display/badge/index.js"
 export { BeforeAfter } from "./data-display/before-after/index.js"

package/src/navigation/bottom-navigation/template.js

@@ -79,12 +79,18 @@ export const BottomNavigation = {
         props.onChange?.(currentValue)
       }}
     >
-      ${action.icon
-        ? html`<span class="iw-bottom-navigation-icon">${action.icon}</span>`
-        : null}
-      ${props.hasLabels
-        ? html`<span class="iw-bottom-navigation-label">${action.label}</span>`
-        : null}
+      ${
+        action.icon
+          ? html`<span class="iw-bottom-navigation-icon">${action.icon}</span>`
+          : null
+      }
+      ${
+        props.hasLabels
+          ? html`<span class="iw-bottom-navigation-label"
+              >${action.label}</span
+            >`
+          : null
+      }
     </button>`
   },
 }

package/src/navigation/breadcrumbs/template.js

@@ -51,12 +51,13 @@ export const Breadcrumbs = {
       <ol class="iw-breadcrumbs-list">
         ${items.map(
           (item, index) =>
-            html`${this.renderItem(item, index, props)}${index <
-            items.length - 1
-              ? html`<li class="iw-breadcrumbs-separator" aria-hidden="true">
-                  ${separator}
-                </li>`
-              : null}`,
+            html`${this.renderItem(item, index, props)}${
+              index < items.length - 1
+                ? html`<li class="iw-breadcrumbs-separator" aria-hidden="true">
+                    ${separator}
+                  </li>`
+                : null
+            }`,
         )}
       </ol>
     </nav>`
@@ -74,22 +75,24 @@ export const Breadcrumbs = {
     const isLast = index === props.items.length - 1
 
     return html`<li class="iw-breadcrumbs-item iw-typography">
-      ${item.href && !isLast
-        ? html`<a
-            href=${item.href}
-            class="iw-breadcrumbs-link"
-            @click=${item.onClick ?? null}
-          >
-            ${item.label}
-          </a>`
-        : html`<span
-            class=${classMap({
-              "iw-breadcrumbs-current": isLast,
-            })}
-            aria-current=${isLast ? "page" : "false"}
-          >
-            ${item.label}
-          </span>`}
+      ${
+        item.href && !isLast
+          ? html`<a
+              href=${item.href}
+              class="iw-breadcrumbs-link"
+              @click=${item.onClick ?? null}
+            >
+              ${item.label}
+            </a>`
+          : html`<span
+              class=${classMap({
+                "iw-breadcrumbs-current": isLast,
+              })}
+              aria-current=${isLast ? "page" : "false"}
+            >
+              ${item.label}
+            </span>`
+      }
     </li>`
   },
 }

package/src/navigation/menu/template.js

@@ -85,13 +85,17 @@ export const Menu = {
         props.onItemClick?.(item.value ?? index, item)
       }}
     >
-      ${item.icon
-        ? html`<span class="iw-menu-item-icon">${item.icon}</span>`
-        : null}
+      ${
+        item.icon
+          ? html`<span class="iw-menu-item-icon">${item.icon}</span>`
+          : null
+      }
       <span class="iw-menu-item-label">${item.label}</span>
-      ${item.trailing
-        ? html`<span class="iw-menu-item-trailing">${item.trailing}</span>`
-        : null}
+      ${
+        item.trailing
+          ? html`<span class="iw-menu-item-trailing">${item.trailing}</span>`
+          : null
+      }
     </button>`
   },
 }

package/src/navigation/pagination/template.js

@@ -52,13 +52,15 @@ export const Pagination = {
       class=${classMap({ "iw-pagination": true, ...extraClasses })}
       aria-label="Pagination"
     >
-      ${isFirstButtonVisible
-        ? this.renderControl(props, {
-            label: "«",
-            target: 1,
-            isDisabled: page <= PRETTY_PAGE || isDisabled,
-          })
-        : null}
+      ${
+        isFirstButtonVisible
+          ? this.renderControl(props, {
+              label: "«",
+              target: 1,
+              isDisabled: page <= PRETTY_PAGE || isDisabled,
+            })
+          : null
+      }
       ${this.renderControl(props, {
         label: "‹",
         target: Math.max(PRETTY_PAGE, page - PRETTY_PAGE),
@@ -70,13 +72,15 @@ export const Pagination = {
         target: Math.min(count, page + PRETTY_PAGE),
         isDisabled: page >= count || isDisabled,
       })}
-      ${isLastButtonVisible
-        ? this.renderControl(props, {
-            label: "»",
-            target: count,
-            isDisabled: page >= count || isDisabled,
-          })
-        : null}
+      ${
+        isLastButtonVisible
+          ? this.renderControl(props, {
+              label: "»",
+              target: count,
+              isDisabled: page >= count || isDisabled,
+            })
+          : null
+      }
     </nav>`
   },
 

package/src/navigation/speed-dial/template.js

@@ -40,13 +40,15 @@ export const SpeedDial = {
         "iw-speed-dial-open": isOpen,
       })}
     >
-      ${isOpen
-        ? html`<div class="iw-speed-dial-actions">
-            ${actions.map((action, index) =>
-              this.renderAction(action, index, props),
-            )}
-          </div>`
-        : null}
+      ${
+        isOpen
+          ? html`<div class="iw-speed-dial-actions">
+              ${actions.map((action, index) =>
+                this.renderAction(action, index, props),
+              )}
+            </div>`
+          : null
+      }
       <button
         type="button"
         class="iw-speed-dial-trigger"

package/src/navigation/stepper/template.js

@@ -67,9 +67,11 @@ export const Stepper = {
       <span class="iw-stepper-indicator">${completed ? "✓" : index + 1}</span>
       <span class="iw-stepper-content">
         <span class="iw-stepper-label">${step.label}</span>
-        ${step.optional
-          ? html`<span class="iw-stepper-optional">${step.optional}</span>`
-          : null}
+        ${
+          step.optional
+            ? html`<span class="iw-stepper-optional">${step.optional}</span>`
+            : null
+        }
       </span>
     </li>`
   },

package/src/styles/tokens.css

@@ -59,6 +59,7 @@
   --iw-space-8: 2rem;
   --iw-space-10: 2.5rem;
   --iw-space-12: 3rem;
+  --iw-space-14: 3.5rem;
   --iw-space-16: 4rem;
   --iw-space-20: 5rem;
   --iw-space-24: 6rem;

package/src/surfaces/accordion/template.js

@@ -93,9 +93,11 @@ export const Accordion = {
         <span class="iw-accordion-title">${title}</span>
         <span class="iw-accordion-caret">▾</span>
       </button>
-      ${isExpanded
-        ? html`<div class="iw-accordion-panel">${content}</div>`
-        : null}
+      ${
+        isExpanded
+          ? html`<div class="iw-accordion-panel">${content}</div>`
+          : null
+      }
     </section>`
   },
 }

package/types/data-display/carousel.d.ts

@@ -7,12 +7,7 @@ export type CarouselDirection = "previous" | "next"
 export type CarouselArrowPlacement = "inside" | "outside"
 export type CarouselArrowVariant = "default" | "outline" | "ghost"
 export type CarouselArrowColor =
-  | "primary"
-  | "secondary"
-  | "success"
-  | "warning"
-  | "error"
-  | "info"
+  "primary" | "secondary" | "success" | "warning" | "error" | "info"
 
 export interface CarouselProps {
   id?: string

package/types/data-display/typography.d.ts

@@ -1,12 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
 export type TypographyVariant =
-  | "body"
-  | "h1"
-  | "h2"
-  | "h3"
-  | "caption"
-  | "overline"
+  "body" | "h1" | "h2" | "h3" | "caption" | "overline"
 
 export interface TypographyProps {
   id?: string

package/types/navigation/pagination.d.ts

@@ -11,12 +11,7 @@ export interface PaginationProps {
   isDisabled?: boolean
   buttonVariant?: "default" | "outline" | "ghost"
   buttonColor?:
-    | "primary"
-    | "secondary"
-    | "success"
-    | "warning"
-    | "error"
-    | "info"
+    "primary" | "secondary" | "success" | "warning" | "error" | "info"
   buttonSize?: "sm" | "md" | "lg"
   itemClassName?: string
   className?: string