@inglorious/ui 7.6.1 → 7.8.0

package/README.md

@@ -44,6 +44,27 @@ The public CSS exports are:
 - `@inglorious/ui/themes/bootstrap.css`
 - `@inglorious/ui/all.css`
 
+## Right-to-left
+
+The components mirror in a right-to-left page (`<html dir="rtl">`, which `@inglorious/i18n` sets for Arabic, Hebrew and the like): their spacing, borders and corners use logical properties, and a `left` drawer sits at the start of the line.
+
+For your own styles, use logical properties too (`margin-inline-start`, `inset-inline-end`, `text-align: start`). For anything that moves sideways, multiply by `--iw-dir-sign`, which is `1` in left-to-right and `-1` in right-to-left:
+
+```css
+.slide-in {
+  transform: translateX(calc(100% * var(--iw-dir-sign)));
+}
+```
+
+Icons that point along the line, such as a back arrow or a chevron, take the `direction` of the text they sit in and are mirrored with `"rtl"`. With `@inglorious/i18n`, that is the i18n entity's `dir`:
+
+```javascript
+MaterialIcon.render({
+  name: "arrow_back",
+  direction: api.getEntity("i18n").dir,
+})
+```
+
 ## Safe-area utilities
 
 The base styles also expose CSS variables and utility classes for the system bars' insets: the notch, rounded corners, the home indicator and Android's status and navigation bars. They are in `base.css`, or on their own in `@inglorious/ui/safe-area.css`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.6.1",
+  "version": "7.8.0",
   "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",

package/src/controls/button-group/style.css

@@ -14,17 +14,17 @@
   }
 
   &.iw-button-group-attached.iw-button-group-row .iw-button:first-child {
-    border-top-left-radius: var(--iw-button-radius);
-    border-bottom-left-radius: var(--iw-button-radius);
+    border-start-start-radius: var(--iw-button-radius);
+    border-end-start-radius: var(--iw-button-radius);
   }
 
   &.iw-button-group-attached.iw-button-group-row .iw-button:last-child {
-    border-top-right-radius: var(--iw-button-radius);
-    border-bottom-right-radius: var(--iw-button-radius);
+    border-start-end-radius: var(--iw-button-radius);
+    border-end-end-radius: var(--iw-button-radius);
   }
 
   &.iw-button-group-attached.iw-button-group-row .iw-button + .iw-button {
-    margin-left: -1px;
+    margin-inline-start: -1px;
   }
 
   &.iw-button-group-attached.iw-button-group-column .iw-button {
@@ -32,13 +32,13 @@
   }
 
   &.iw-button-group-attached.iw-button-group-column .iw-button:first-child {
-    border-top-left-radius: var(--iw-button-radius);
-    border-top-right-radius: var(--iw-button-radius);
+    border-start-start-radius: var(--iw-button-radius);
+    border-start-end-radius: var(--iw-button-radius);
   }
 
   &.iw-button-group-attached.iw-button-group-column .iw-button:last-child {
-    border-bottom-left-radius: var(--iw-button-radius);
-    border-bottom-right-radius: var(--iw-button-radius);
+    border-end-start-radius: var(--iw-button-radius);
+    border-end-end-radius: var(--iw-button-radius);
   }
 
   &.iw-button-group-attached.iw-button-group-column .iw-button + .iw-button {

package/src/controls/combobox/combobox.stories.js

@@ -33,6 +33,10 @@ export default {
     isLoading: { control: "boolean", description: "Show loading state." },
     searchTerm: { control: "text", description: "Current search filter." },
     placeholder: { control: "text", description: "Placeholder text." },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder of the search box in the panel.",
+    },
     noOptionsMessage: { control: "text", description: "No results message." },
     loadingMessage: { control: "text", description: "Loading message." },
     isFullWidth: {

package/src/controls/combobox/style.css

@@ -20,7 +20,7 @@
 
   .iw-combobox-required {
     color: var(--iw-color-error);
-    margin-left: var(--iw-space-1);
+    margin-inline-start: var(--iw-space-1);
   }
 
   .iw-combobox-hint,
@@ -91,8 +91,8 @@
       border-color: var(--iw-input-border-focus);
       box-shadow: var(--iw-input-shadow-focus);
       background: var(--iw-input-bg-focus);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
     }
 
     &.iw-combobox-frame-disabled {
@@ -151,7 +151,7 @@
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      right: var(--iw-space-7);
+      inset-inline-end: var(--iw-space-7);
 
       &:hover {
         color: var(--iw-color-text);
@@ -194,8 +194,8 @@
     overflow: hidden;
     border: 1px solid var(--iw-color-border);
     border-radius: var(--iw-radius-md);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
     background: var(--iw-color-bg);
     box-shadow: var(--iw-shadow-lg);
     margin-top: -1px;

package/src/controls/combobox/template.js

@@ -291,12 +291,17 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderSearchInput(props) {
-    const { searchTerm, isOpen, onSearchChange } = props
+    const {
+      searchTerm,
+      searchPlaceholder = "Search...",
+      isOpen,
+      onSearchChange,
+    } = props
 
     return html`<input
       class="iw-combobox-dropdown-search"
       type="text"
-      placeholder="Search..."
+      placeholder=${searchPlaceholder}
       .value=${searchTerm ?? ""}
       @input=${(event) => onSearchChange?.(event.target.value)}
       @keydown=${(event) => handleKeyDown(props, event)}

package/src/controls/input/style.css

@@ -17,7 +17,7 @@
 
   .iw-input-required {
     color: var(--iw-color-error);
-    margin-left: var(--iw-space-1);
+    margin-inline-start: var(--iw-space-1);
   }
 
   .iw-input-frame {
@@ -74,7 +74,7 @@
       }
 
       &.iw-input-number {
-        text-align: right;
+        text-align: end;
       }
 
       &.iw-input-sm {

package/src/controls/select/style.css

@@ -17,7 +17,7 @@
 
   .iw-select-required {
     color: var(--iw-color-error);
-    margin-left: var(--iw-space-1);
+    margin-inline-start: var(--iw-space-1);
   }
 
   .iw-select-hint,

package/src/controls/switch/style.css

@@ -40,7 +40,7 @@
   }
 
   .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
-    transform: translateX(1rem);
+    transform: translateX(calc(1rem * var(--iw-dir-sign, 1)));
   }
 
   .iw-switch-label {
@@ -59,7 +59,7 @@
   }
 
   &.iw-switch-sm .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
-    transform: translateX(0.875rem);
+    transform: translateX(calc(0.875rem * var(--iw-dir-sign, 1)));
   }
 
   &.iw-switch-lg .iw-switch-track {
@@ -73,7 +73,7 @@
   }
 
   &.iw-switch-lg .iw-switch-input:checked + .iw-switch-track .iw-switch-thumb {
-    transform: translateX(1.25rem);
+    transform: translateX(calc(1.25rem * var(--iw-dir-sign, 1)));
   }
 
   &.iw-switch-disabled {

package/src/controls/textarea/style.css

@@ -16,7 +16,7 @@
 
   .iw-textarea-required {
     color: var(--iw-color-error);
-    margin-left: var(--iw-space-1);
+    margin-inline-start: var(--iw-space-1);
   }
 
   .iw-textarea {

package/src/data-display/divider/style.css

@@ -4,13 +4,13 @@
   margin: var(--iw-space-2) 0;
 
   &.iw-divider-inset {
-    margin-left: var(--iw-space-4);
-    margin-right: var(--iw-space-4);
+    margin-inline-start: var(--iw-space-4);
+    margin-inline-end: var(--iw-space-4);
   }
 
   &.iw-divider-vertical {
     border-top: 0;
-    border-left: 1px solid var(--iw-color-border);
+    border-inline-start: 1px solid var(--iw-color-border);
     width: 0;
     height: 100%;
     margin: 0 var(--iw-space-2);

package/src/data-display/icon/icon-implementations.mdx

@@ -71,14 +71,14 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
   <input id="iw-icon-tab-lucide" type="radio" name="iw-icon-tab" />
   <input id="iw-icon-tab-a11y" type="radio" name="iw-icon-tab" />
 
-  <div className="iw-icon-tab-labels">
-    <label htmlFor="iw-icon-tab-generic">Generic</label>
-    <label htmlFor="iw-icon-tab-svg">Inline SVG</label>
-    <label htmlFor="iw-icon-tab-material">Material</label>
-    <label htmlFor="iw-icon-tab-fa">Font Awesome</label>
-    <label htmlFor="iw-icon-tab-lucide">Lucide</label>
-    <label htmlFor="iw-icon-tab-a11y">Accessibility</label>
-  </div>
+<div className="iw-icon-tab-labels">
+  <label htmlFor="iw-icon-tab-generic">Generic</label>
+  <label htmlFor="iw-icon-tab-svg">Inline SVG</label>
+  <label htmlFor="iw-icon-tab-material">Material</label>
+  <label htmlFor="iw-icon-tab-fa">Font Awesome</label>
+  <label htmlFor="iw-icon-tab-lucide">Lucide</label>
+  <label htmlFor="iw-icon-tab-a11y">Accessibility</label>
+</div>
 
   <div className="iw-icon-tab-panels">
     <section className="iw-icon-tab-panel iw-icon-tab-panel-generic">
@@ -92,6 +92,7 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
       <pre><code>{`Icon.render({
     children: html\`<svg viewBox="0 0 24 24" ...>...</svg>\`,
     size: "md",
+
 })`}</code></pre>
 
 <div className="iw-icon-example">
@@ -121,6 +122,7 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
       <p>Load Font Awesome CSS globally, then pass an icon element as <code>children</code>. Reference: <a href="https://fontawesome.com/search" target="_blank">Font Awesome Icons</a></p>
       <pre><code>{`Icon.render({
     children: html\`<i class="fa-solid fa-user" aria-hidden="true"></i>\`,
+
 })`}</code></pre>
 
 <div className="iw-icon-example">
@@ -133,9 +135,10 @@ Use this page as a quick reference for supported icon strategies in `@inglorious
     <section className="iw-icon-tab-panel iw-icon-tab-panel-lucide">
       <p>Lucide requires runtime bootstrapping before icons render. Reference: <a href="https://lucide.dev/icons/?focus" target="_blank">Lucide Icons</a></p>
       <pre><code>{`import { createIcons, icons } from "lucide"
+
 createIcons({
-    icons,
-    attrs: { "stroke-width": 1.75 },
+icons,
+attrs: { "stroke-width": 1.75 },
 })`}</code></pre>
       <p>Then render nodes such as <code>{`<i data-lucide="user"></i>`}</code>.</p>
 

package/src/data-display/list/style.css

@@ -53,7 +53,7 @@
 /* An item without an icon lines its text up with the items that have one:
    the icon, the margin either side of it, and the row gap. */
 .iw-list-item-inset .iw-list-item-content {
-  margin-left: calc(
+  margin-inline-start: calc(
     var(--iw-list-icon-size, var(--iw-space-6)) + 2 *
       var(--iw-list-icon-spacing, var(--iw-space-4)) + var(--iw-space-2)
   );
@@ -74,7 +74,7 @@
 }
 
 .iw-list-item-trailing {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-2);
@@ -127,7 +127,7 @@
 
 .iw-list-nested {
   margin-top: var(--iw-space-1);
-  padding-left: var(--iw-space-4);
+  padding-inline-start: var(--iw-space-4);
 }
 
 .iw-theme-light {

package/src/data-display/material-icon/style.css

@@ -24,4 +24,10 @@
   &.iw-material-icon-lg {
     font-size: 1.5rem;
   }
+
+  /* `scale` rather than `transform`, so it adds to a rotation set elsewhere
+     instead of replacing it. */
+  &.iw-material-icon-rtl {
+    scale: -1 1;
+  }
 }

package/src/data-display/material-icon/template.js

@@ -9,17 +9,27 @@ import { classMap } from "@inglorious/web/directives/class-map"
 /**
  * Renders a Material Symbols icon by name.
  * Requires the Material Symbols font and supports filled and size variants.
+ * `direction` is the direction of the text the icon sits in. An icon that
+ * points along the line, such as a back arrow or a chevron, is mirrored with
+ * `"rtl"`: in right-to-left text, back points right.
  * @param {MaterialIconProps} props
  * @returns {TemplateResult}
  */
 export function render(props) {
-  const { name = "help", size = "md", isFilled = true, onClick } = props
+  const {
+    name = "help",
+    size = "md",
+    isFilled = true,
+    direction = "ltr",
+    onClick,
+  } = props
 
   return html`<span
     class=${classMap({
       "iw-material-icon": true,
       "material-symbols-outlined": true,
       "iw-material-icon-filled": isFilled,
+      "iw-material-icon-rtl": direction === "rtl",
       [`iw-material-icon-${size}`]: size !== "md",
     })}
     aria-hidden="true"

package/src/feedback/alert/style.css

@@ -34,7 +34,7 @@
 }
 
 .iw-alert-trailing {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-flex;
   align-items: center;
   gap: var(--iw-space-2);

package/src/layout/container/style.css

@@ -18,7 +18,7 @@
 }
 
 .iw-container-padding-sm {
-  padding-left: var(--iw-space-2);
+  padding-inline-start: var(--iw-space-2);
 }
 
 .iw-container-padding-md {

package/src/navigation/bottom-navigation/style.css

@@ -29,4 +29,11 @@
 
 .iw-bottom-navigation-label {
   font-size: var(--iw-font-size-sm);
+  /* One line, like its neighbours: a label too long for its tab is cut short
+     rather than wrapping, which in languages that break between any two
+     characters (Japanese, Chinese) splits a word and makes the bar taller. */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/src/navigation/drawer/style.css

@@ -42,6 +42,12 @@
     transition: transform var(--iw-transition-fast);
   }
 
+  /* The toggle points at the edge the drawer sits on, which a right-to-left
+     page mirrors. `scale`, so the collapsed state's rotation still applies. */
+  .iw-drawer-toggler > span:dir(rtl) {
+    scale: -1 1;
+  }
+
   .iw-list-item-inset,
   .iw-list-item-content,
   .iw-list-item-trailing,
@@ -96,16 +102,18 @@
   }
 }
 
+/* `left` and `right` are the start and end of the line: the left drawer
+   sits on the right in a right-to-left page, and slides off that way. */
 .iw-drawer-left {
-  left: 0;
-  border-right: 1px solid var(--iw-color-border);
-  transform: translateX(-100%);
+  inset-inline-start: 0;
+  border-inline-end: 1px solid var(--iw-color-border);
+  transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
 }
 
 .iw-drawer-right {
-  right: 0;
-  border-left: 1px solid var(--iw-color-border);
-  transform: translateX(100%);
+  inset-inline-end: 0;
+  border-inline-start: 1px solid var(--iw-color-border);
+  transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
 }
 
 @media (min-width: 0rem) {
@@ -128,11 +136,11 @@
     box-shadow: none;
 
     &.iw-drawer-left.iw-drawer-hidden {
-      transform: translateX(-100%);
+      transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
     }
 
     &.iw-drawer-right.iw-drawer-hidden {
-      transform: translateX(100%);
+      transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
     }
 
     & ~ .iw-drawer-backdrop {

package/src/navigation/menu/style.css

@@ -19,7 +19,7 @@
   width: 100%;
   padding: var(--iw-space-2) var(--iw-space-3);
   border-radius: var(--iw-radius-sm);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
 }
 
@@ -29,7 +29,7 @@
 }
 
 .iw-menu-item-trailing {
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--iw-color-text-muted, var(--iw-color-text));
 }
 

package/src/navigation/view-transitions/style.css

@@ -89,25 +89,25 @@
 
 @keyframes iw-view-transition-out-left {
   to {
-    transform: translateX(-100%);
+    transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
   }
 }
 
 @keyframes iw-view-transition-in-right {
   from {
-    transform: translateX(100%);
+    transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
   }
 }
 
 @keyframes iw-view-transition-out-right {
   to {
-    transform: translateX(100%);
+    transform: translateX(calc(100% * var(--iw-dir-sign, 1)));
   }
 }
 
 @keyframes iw-view-transition-in-left {
   from {
-    transform: translateX(-100%);
+    transform: translateX(calc(-100% * var(--iw-dir-sign, 1)));
   }
 }
 

package/src/styles/tokens.css

@@ -1,3 +1,16 @@
+/* The writing direction as a number, for what moves sideways: a slide that
+   goes `translateX(calc(-100% * var(--iw-dir-sign)))` leaves to the left in
+   English and to the right in Arabic. Set again on any element with a `dir`,
+   so a subtree in the other direction gets its own. */
+:root,
+[dir="ltr"] {
+  --iw-dir-sign: 1;
+}
+
+[dir="rtl"] {
+  --iw-dir-sign: -1;
+}
+
 :root {
   /* ========================================
      COLOR PALETTE - Primitive Colors

package/src/surfaces/app-bar/style.css

@@ -105,5 +105,5 @@
 }
 
 .iw-app-bar-trailing {
-  margin-left: auto;
+  margin-inline-start: auto;
 }

package/types/controls/combobox.d.ts

@@ -32,6 +32,8 @@ export interface ComboboxProps {
   isClearable?: boolean
 
   placeholder?: string
+  /** Placeholder of the search box in the panel. Defaults to "Search...". */
+  searchPlaceholder?: string
   noOptionsMessage?: string
   loadingMessage?: string
 

package/types/data-display/material-icon.d.ts

@@ -5,6 +5,11 @@ export interface MaterialIconProps {
   name?: string
   size?: "sm" | "md" | "lg"
   isFilled?: boolean
+  /**
+   * The direction of the text the icon sits in. An icon that points along the
+   * line (a back arrow, a chevron) is mirrored with `"rtl"`. Defaults to `"ltr"`.
+   */
+  direction?: "ltr" | "rtl"
   onClick?: () => void
   [key: string]: unknown
 }