npm - @jirawatpyk/aura-tokens - Versions diffs - 4.17.0 → 4.18.0 - Mend

@jirawatpyk/aura-tokens 4.17.0 → 4.18.0

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 (8) hide show

package/README.md +13 -11
package/aura-tailwind.css +1 -1
package/aura-tailwind.prefixed.css +1 -1
package/aura.css +1 -1
package/components/aura.bundle.js +11 -9
package/components/aura.components.css +5 -2
package/package.json +1 -1
package/tokens.json +1 -1

package/README.md CHANGED Viewed

@@ -29,20 +29,12 @@ npm install @aura/tokens@npm:@jirawatpyk/aura-tokens @aura/react@npm:@jirawatpyk
 ```tsx
 // app/layout.tsx
-import '@aura/tokens/aura-fonts.css'; // Google Fonts (or use the <link> tags below instead)
+import '@aura/tokens/aura-fonts.local.css'; // fonts, self-hosted from the package: works under a font-src 'self' CSP
 import '@aura/tokens/aura.css'; // tokens
 import '@aura/react/styles.css'; // component styles (with @aura/react)
 ```
-```html
-<!-- Preferred: load the fonts from <head> instead of aura-fonts.css — faster, and a blocked host fails quietly -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap"
-/>
-```
+Next.js can load the same families with `next/font` instead, and a site with no CSP can use Google Fonts (`aura-fonts.css` or `<link>` tags). Both are under Fonts below.
 ### Fonts
@@ -52,7 +44,17 @@ Pick one of three ways to load Fraunces, Inter, JetBrains Mono and Noto Sans Tha
 | ------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Self-hosted (4.16) | Your CSP allows only `font-src 'self'`, or you want no third-party requests | `import '@jirawatpyk/aura-tokens/aura-fonts.local.css'` — woff2 files ship in the package (`fonts/`, OFL-1.1), split by unicode range so a page downloads only what it uses |
 | `next/font`        | Next.js apps that want preloading and zero layout shift                     | Load the families with `next/font` and point the AURA font variables at them (below)                                                                                        |
-| Google Fonts       | Anything else                                                               | The `<link>` tags below, or `aura-fonts.css`                                                                                                                                |
+| Google Fonts       | No CSP, or one that allows `fonts.googleapis.com` and `fonts.gstatic.com`   | `aura-fonts.css`, or the `<link>` tags below (faster; a blocked host fails quietly)                                                                                         |
+```html
+<!-- Google Fonts from <head> (only without a strict CSP) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&family=Noto+Sans+Thai:wght@400;500;600&display=swap"
+/>
+```
 ```tsx
 // app/layout.tsx — next/font (downloads at build time and self-hosts, so font-src 'self' is enough)

package/aura-tailwind.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* AURA v4.17.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
+/* AURA v4.18.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura-tailwind.prefixed.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* AURA v4.17.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
+/* AURA v4.18.0 — Tailwind v4 theme with aura- prefixed names. GENERATED by scripts/build-tokens.js. Do not edit by hand.
  * For apps that already have a Tailwind theme (shadcn): nothing here redefines an existing name.
  *   @layer aura-tokens, theme, base, aura, components, utilities;
  *   @import "tailwindcss";

package/aura.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* AURA v4.17.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.18.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 :root, [data-theme="light"] {

package/components/aura.bundle.js CHANGED Viewed

@@ -2901,8 +2901,8 @@ window.Aura = (() => {
               "data-autofocus": "",
               type: "text",
               role: "combobox",
-              "aria-expanded": true,
-              "aria-controls": listId,
+              "aria-expanded": flat.length > 0,
+              "aria-controls": flat.length ? listId : void 0,
               "aria-autocomplete": "list",
               "aria-activedescendant": active >= 0 ? optId(active) : void 0,
               "aria-label": props.label || t.commandMenu,
@@ -2918,17 +2918,15 @@ window.Aura = (() => {
               onKeyDown: onKey
             }
           ), /* @__PURE__ */ React25.createElement("kbd", { className: "aura-command__kbd" }, "Esc")),
-          /* @__PURE__ */ React25.createElement(
+          /* @__PURE__ */ React25.createElement("div", { className: "aura-command__list", "aria-busy": props.loading || void 0 }, props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null, !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : /* @__PURE__ */ React25.createElement(
             "div",
             {
-              className: "aura-command__list",
               id: listId,
               role: "listbox",
               "aria-label": props.label || t.commandMenu,
               "aria-busy": props.loading || void 0
             },
-            props.loading ? /* @__PURE__ */ React25.createElement("div", { className: "aura-command__loading", role: "presentation" }, /* @__PURE__ */ React25.createElement(Icon, { name: "loader-circle", className: "aura-spin" }), t.searching) : null,
-            !flat.length ? props.loading ? null : /* @__PURE__ */ React25.createElement("div", { className: "aura-command__empty", role: "presentation" }, props.empty != null ? props.empty : props.emptyText || t.noMatches) : groups.map(function(g, gi) {
+            groups.map(function(g, gi) {
               const gid = id + "-g" + gi;
               return /* @__PURE__ */ React25.createElement(
                 "div",
@@ -2950,7 +2948,11 @@ window.Aura = (() => {
                       role: "option",
                       "aria-selected": n2 === active,
                       "aria-disabled": it.disabled || void 0,
-                      className: cx("aura-command__item", n2 === active && "is-active", it.disabled && "is-disabled"),
+                      className: cx(
+                        "aura-command__item",
+                        n2 === active && "is-active",
+                        it.disabled && "is-disabled"
+                      ),
                       onPointerDown: function(e) {
                         e.preventDefault();
                       },
@@ -2968,8 +2970,8 @@ window.Aura = (() => {
                 })
               );
             })
-          ),
-          /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : props.loading === false && query ? t.results(flat.length) : ""),
+          )),
+          /* @__PURE__ */ React25.createElement("span", { className: "aura-sr-only", role: "status" }, props.loading ? t.searching : query && !flat.length ? t.noMatches : props.loading === false && query ? t.results(flat.length) : ""),
           /* @__PURE__ */ React25.createElement("div", { className: "aura-command__foot", "aria-hidden": true }, t.commandHint, /* @__PURE__ */ React25.createElement("span", { className: "aura-command__mod" }, isMac() ? "\u2318K" : "Ctrl K"))
         )
       ),

package/components/aura.components.css CHANGED Viewed

@@ -693,7 +693,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 .aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-combo__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
-.aura-combo__check { color: var(--aura-fg-accent) !important; }
+/* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
+.aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
 .aura-combo__note { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-3) var(--aura-space-2); font-size: 13px; color: var(--aura-fg-secondary); }
 /* ---------- DatePicker / Calendar ---------- */
@@ -1174,7 +1175,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
   .aura-stepper--horizontal .aura-stepper__compact { display: block; }
   .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
-  .aura-dialog { max-width: none !important; max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
+  /* The size classes set max-width; naming them here outranks them by specificity (4.18). */
+  .aura-dialog.aura-dialog--sm, .aura-dialog.aura-dialog--md, .aura-dialog.aura-dialog--lg { max-width: none; }
+  .aura-dialog { max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
   .aura-dialog__foot { flex-direction: column-reverse; }
   .aura-dialog__foot > * { width: 100%; }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/tokens.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "version": "4.17.0",
+  "version": "4.18.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",