@byline/ui 1.7.6 → 1.8.0

package/dist/widgets/datepicker/datepicker_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.container-u5_VUp, .infonomic-datepicker-container) {
@@ -186,5 +186,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/widgets/drawer/drawer_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.backdrop-Ga1s55, .infonomic-drawer-backdrop) {
@@ -127,5 +127,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/widgets/image-lightbox/image-lightbox_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   .container-E7tMnX {
@@ -80,5 +80,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/widgets/modal/modal_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.backdrop-BgKon2, .infonomic-modal-backdrop) {
@@ -116,5 +116,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/dist/widgets/timeline/timeline_module.css

@@ -1,4 +1,4 @@
-@layer base, byline-base, theme, byline-theme, byline-functional, components;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components;
 
 @layer byline-components {
   :is(.timeline-qJOU85, .infonomic-timeline) {
@@ -81,5 +81,5 @@
   }
 }
 
-@layer utilities, byline-utilities, byline-typography;
+@layer utilities, byline-utilities;
 

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.7.6",
+  "version": "1.8.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/core": "1.7.6",
-    "@byline/admin": "1.7.6",
-    "@byline/client": "1.7.6"
+    "@byline/client": "1.8.0",
+    "@byline/admin": "1.8.0",
+    "@byline/core": "1.8.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/accordion/accordion.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .item,
   :global(.infonomic-accordion-item) {

package/src/components/avatar/avatar.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   /* relative inline-flex h-10 w-10 rounded-full */

package/src/components/badge/badge.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .badge,

package/src/components/button/button-group.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .button-group,
   :global(.infonomic-button-group) {

package/src/components/button/button.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .button,

package/src/components/button/combo-button.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {

package/src/components/button/control-buttons.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .stop-button,
   .play-button,

package/src/components/button/copy-button.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .copy-button-container,

package/src/components/card/card.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .card,

package/src/components/chips/chip.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .chip,

package/src/components/container/container.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .container,

package/src/components/dropdown/dropdown.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .dropdown-content,

package/src/components/hamburger/hamburger.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .hamburger,

package/src/components/inputs/autocomplete.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   /* ── Wrapper ── */

package/src/components/inputs/calendar.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .day-picker {

package/src/components/inputs/checkbox-group.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   :global(.infonomic-checkbox-group),

package/src/components/inputs/checkbox.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .container,

package/src/components/inputs/error-text.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .text,

package/src/components/inputs/help-text.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .text,

package/src/components/inputs/input-adornment.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .adornment,

package/src/components/inputs/input.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .input-wrapper,

package/src/components/inputs/label.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .label,

package/src/components/inputs/radio-group.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/inputs/select.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .positioner,

package/src/components/inputs/text-area.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .text-area,

package/src/components/notifications/alert.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .alert,

package/src/components/notifications/toast.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   /* ============================================

package/src/components/pager/pagination.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .pagination-root,

package/src/components/scroll-area/scroll-area.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .root,

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .scroll-to-top,
   :global(.infonomic-scroll-to-top) {

package/src/components/section/section.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .section,

package/src/components/shimmer/shimmer.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/table/table.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer byline-components {

package/src/components/tabs/tabs.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .tabs-root,

package/src/components/tooltip/tooltip.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .tooltip,

package/src/forms/form-renderer.tsx

@@ -721,6 +721,7 @@ const FormContent = ({
                 useAsPath={useAsPath}
                 collectionPath={collectionPath ?? ''}
                 defaultLocale={defaultLocale}
+                activeLocale={contentLocale}
                 mode={mode}
               />
             )}

package/src/forms/path-widget.tsx

@@ -35,6 +35,15 @@ export interface PathWidgetProps {
   collectionPath: string
   /** Default content locale, forwarded to the slugifier as context. */
   defaultLocale: string
+  /**
+   * The locale currently being edited in the form. When this differs
+   * from `defaultLocale` (i.e. the editor is editing a translation),
+   * the widget renders read-only — phase 1 paths are default-locale
+   * territory, and the lifecycle drops translation-locale path changes
+   * with a warn. Locking the input prevents the warn path being hit
+   * through the admin form and gives editors a clear cue.
+   */
+  activeLocale: string
   /** `'create'` shows the live derived preview as placeholder text. */
   mode: 'create' | 'edit'
 }
@@ -53,11 +62,23 @@ export interface PathWidgetProps {
  * Stable override handles: `.byline-form-path`, `.byline-form-path-header`,
  * `.byline-form-path-regenerate`.
  */
-export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: PathWidgetProps) => {
+export const PathWidget = ({
+  useAsPath,
+  collectionPath,
+  defaultLocale,
+  activeLocale,
+  mode,
+}: PathWidgetProps) => {
   const { setSystemPath } = useFormContext()
   const systemPath = useSystemPath()
   const sourceValue = useFieldValue<unknown>(useAsPath ?? '')
 
+  // Phase 1: paths are written/edited only under the default content
+  // locale. When editing a translation, the widget locks down — the
+  // input is read-only, the Regenerate action is suppressed, and a
+  // helpText line explains why.
+  const isReadOnly = activeLocale !== defaultLocale
+
   // Live preview — what the server would derive from the current source
   // field value if no override were set. Used as placeholder in create
   // mode and as the target of the "Regenerate" action.
@@ -93,26 +114,40 @@ export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: P
     return slugify(inputValue, { locale: defaultLocale, collectionPath })
   }, [inputValue, defaultLocale, collectionPath])
 
-  const hint =
+  const validationHint =
     inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : undefined
 
+  // When read-only, replace the live validation hint with a fixed
+  // explanatory line so editors understand why the field is locked.
+  const readOnlyHint = isReadOnly
+    ? `Path is set in the default locale ("${defaultLocale}") and applies across translations.`
+    : undefined
+
+  const hint = readOnlyHint ?? validationHint
+
   const placeholder =
-    mode === 'create' && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : undefined
+    !isReadOnly && mode === 'create' && livePreview.length > 0
+      ? `Will be saved as "${livePreview}"`
+      : undefined
 
   // Screen-reader description. The input's base purpose ("System-managed
   // URL path") plus whichever of the visible hints (placeholder preview
-  // in create mode, "Suggested" validation hint) currently applies. The
-  // visible helpText/placeholder cover sighted users; this element makes
-  // the same information addressable via aria-describedby for AT.
+  // in create mode, "Suggested" validation hint, or read-only explainer)
+  // currently applies. The visible helpText/placeholder cover sighted
+  // users; this element makes the same information addressable via
+  // aria-describedby for AT.
   const srDescription = ['System-managed URL path for this document.', placeholder, hint]
     .filter(Boolean)
     .join(' ')
 
+  const showRegenerate =
+    !isReadOnly && useAsPath && livePreview.length > 0 && livePreview !== systemPath
+
   return (
     <div className="byline-form-path">
       <div className={cx('byline-form-path-header', styles.header)}>
         <Label id="system-path-label" htmlFor="system-path" label="Path" />
-        {useAsPath && livePreview.length > 0 && livePreview !== systemPath && (
+        {showRegenerate && (
           <button
             type="button"
             onClick={handleRegenerate}
@@ -130,6 +165,7 @@ export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: P
         placeholder={placeholder}
         onChange={(e) => handleChange(e.target.value)}
         helpText={hint}
+        readOnly={isReadOnly}
         aria-describedby="system-path-description"
       />
       <span

package/src/icons/icons.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 @layer byline-components {
   .element-root {
     width: 1.375rem;

package/src/loaders/ellipses.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .loader-ellipsis,

package/src/loaders/ring.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .loader-ring,

package/src/loaders/spinner.module.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .loader-spinner,

package/src/styles/components/hamburger.css

@@ -1,8 +1,8 @@
 /* No longer used in our actual hamburger React and Astro components
 but left here as a reference. */
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-components {
   .component--hamburger {

package/src/styles/reset.css

@@ -23,8 +23,8 @@
  * Hosts using Tailwind don't need to declare layer order themselves.
 */
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @layer byline-base {
   @scope (.byline-ui) {

package/src/styles/styles.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @import "./base/base.css";
 @import "./functional/functional.css";

package/src/styles/typography.css

@@ -1,6 +1,6 @@
 @layer base, byline-base, theme, byline-theme,
-  byline-functional, components, byline-components,
-  utilities, byline-utilities, byline-typography;
+  byline-functional, byline-typography, components, byline-components,
+  utilities, byline-utilities;
 
 @import "./typography/fonts.css";
 @import "./typography/prose.css";