@infonomic/uikit 5.43.1 → 5.44.0

package/dist/components/hamburger/hamburger.astro

@@ -1,30 +1,38 @@
 ---
-// SEE: uikit/src/styles/components/hamburger.css
+// NOTE: In Astro, open/closed state is managed externally
+// (e.g. via nanostores). Toggle the 'infonomic-hamburger-open'
+// class on the button and update aria-expanded from client JS.
 
-// NOTE: we don't use open or color props in Astro.
-// Instead we set open / closed state via nanostores.
-// and then apply global classes according.
-// Class overrides for inner span colors are set in
-// Astro app.css
-
-interface HamburgerProps {
+interface Props {
   class?: string
+  colorScheme?: 'auto' | 'onDark' | 'onLight'
   ariaLabel?: string
   ariaControls?: string
 }
 
-const { class: className, ariaLabel, ariaControls } = Astro.props as HamburgerProps
+import styles from './hamburger.module.css'
+
+const {
+  class: className,
+  colorScheme = 'auto',
+  ariaLabel = 'Toggle menu',
+  ariaControls,
+  ...rest
+} = Astro.props as Props
+
+const colorSchemeClass =
+  colorScheme === 'onDark' ? styles.onDark : colorScheme === 'onLight' ? styles.onLight : undefined
 ---
 
 <button
-  id="component--hamburger"
-  class:list={['component--hamburger', className]}
-  tabindex="0"
+  type="button"
+  class:list={['infonomic-hamburger', styles.hamburger, colorSchemeClass, className]}
   aria-label={ariaLabel}
   aria-controls={ariaControls}
-  aria-haspopup="true"
+  aria-expanded="false"
+  {...rest}
 >
-  <span class="box" aria-hidden="true">
-    <span class="inner"></span>
+  <span class:list={['infonomic-hamburger-box', styles.box]} aria-hidden="true">
+    <span class:list={['infonomic-hamburger-inner', styles.inner]}></span>
   </span>
 </button>

package/dist/components/hamburger/hamburger.d.ts

@@ -1,11 +1,13 @@
 import type React from 'react';
-interface HamburgerProps {
+type ColorScheme = 'auto' | 'onDark' | 'onLight';
+export interface HamburgerProps {
     className?: string;
-    color?: string;
-    activeBorderColor?: string;
-    open: boolean;
-    onChange: (event: React.MouseEvent<HTMLButtonElement> | null) => void;
+    colorScheme?: ColorScheme;
+    open?: boolean;
+    onChange?: (open: boolean) => void;
+    ariaLabel?: string;
+    ariaControls?: string;
 }
-export declare function Hamburger({ className, color, activeBorderColor, open, onChange, ...other }: HamburgerProps): React.JSX.Element;
+export declare function Hamburger({ className, colorScheme, open, onChange, ariaLabel, ariaControls, ...other }: HamburgerProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=hamburger.d.ts.map

package/dist/components/hamburger/hamburger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hamburger.d.ts","sourceRoot":"","sources":["../../../src/components/hamburger/hamburger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;CACtE;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAiD,EACjD,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CpC"}
+{"version":3,"file":"hamburger.d.ts","sourceRoot":"","sources":["../../../src/components/hamburger/hamburger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEhD,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,WAAoB,EACpB,IAAY,EACZ,QAAQ,EACR,SAAyB,EACzB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6CpC"}

package/dist/components/hamburger/hamburger.js

@@ -1,47 +1,43 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import classnames from "classnames";
-function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white', activeBorderColor, open, onChange, ...other }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const handleClick = (event)=>{
-        setIsOpen(!isOpen);
-        onChange(event);
+import hamburger_module from "./hamburger.module.js";
+function Hamburger({ className, colorScheme = 'auto', open = false, onChange, ariaLabel = 'Toggle menu', ariaControls, ...other }) {
+    const handleClick = ()=>{
+        onChange?.(!open);
     };
     const handleEscapeKey = useCallback((event)=>{
-        if ('Escape' === event.key) {
-            if (isOpen) {
-                setIsOpen(false);
-                onChange(null);
-            }
-        }
+        if ('Escape' === event.key && open) onChange?.(false);
     }, [
-        isOpen,
+        open,
         onChange
     ]);
     useEffect(()=>{
-        setIsOpen(open);
         document.addEventListener('keydown', handleEscapeKey, false);
         return ()=>{
             document.removeEventListener('keydown', handleEscapeKey, false);
         };
     }, [
-        open,
         handleEscapeKey
     ]);
     return /*#__PURE__*/ jsx("button", {
+        type: "button",
         onClick: handleClick,
-        className: classnames(`component--hamburger ${isOpen ? 'is_active' : ''}`, className),
-        tabIndex: 0,
-        "aria-label": "Open main menu",
-        "aria-controls": "main-menu",
-        "aria-haspopup": "true",
+        className: classnames('infonomic-hamburger', hamburger_module.hamburger, {
+            [hamburger_module.open]: open,
+            [hamburger_module.onDark]: 'onDark' === colorScheme,
+            [hamburger_module.onLight]: 'onLight' === colorScheme
+        }, className),
+        "aria-label": ariaLabel,
+        "aria-controls": ariaControls,
+        "aria-expanded": open,
         ...other,
         children: /*#__PURE__*/ jsx("span", {
-            className: "box",
+            className: classnames('infonomic-hamburger-box', hamburger_module.box),
             "aria-hidden": "true",
             children: /*#__PURE__*/ jsx("span", {
-                className: classnames('inner', color)
+                className: classnames('infonomic-hamburger-inner', hamburger_module.inner)
             })
         })
     });

package/dist/components/hamburger/hamburger.module.css

@@ -0,0 +1,142 @@
+@layer infonomic-base,
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
+
+@layer infonomic-components {
+
+  .hamburger,
+  :global(.infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    z-index: 200;
+    width: 42px;
+    height: 34px;
+    overflow: hidden;
+    cursor: pointer;
+    transition-property: opacity, filter;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    border-radius: var(--border-radius-sm);
+  }
+
+  .hamburger:focus-visible,
+  :global(.infonomic-hamburger):focus-visible {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  /* Box container for the bars */
+  .box,
+  :global(.infonomic-hamburger-box) {
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+    pointer-events: none;
+  }
+
+  /* Inner bar + ::before/::after pseudo-elements form the 3 lines */
+  .inner,
+  :global(.infonomic-hamburger-inner) {
+    display: block;
+    top: 50%;
+    margin-top: -1px;
+    transition-duration: 0.075s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  .inner,
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner),
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    position: absolute;
+    width: 24px;
+    height: 2px;
+    border-radius: 0;
+    background-color: var(--hamburger-color);
+    transition-property: transform;
+    transition-duration: 0.15s;
+    transition-timing-function: ease;
+  }
+
+  .inner::before,
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::before,
+  :global(.infonomic-hamburger-inner)::after {
+    content: "";
+    display: block;
+  }
+
+  .inner::before,
+  :global(.infonomic-hamburger-inner)::before {
+    top: -8px;
+    transition:
+      top 0.075s 0.12s ease,
+      opacity 0.075s ease;
+  }
+
+  .inner::after,
+  :global(.infonomic-hamburger-inner)::after {
+    bottom: -8px;
+    transition:
+      bottom 0.075s 0.12s ease,
+      transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  /* Open state */
+  .open .inner,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner) {
+    transform: rotate(45deg);
+    transition-delay: 0.12s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .open .inner::before,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::before {
+    top: 0;
+    opacity: 0;
+    transition:
+      top 0.075s ease,
+      opacity 0.075s 0.12s ease;
+  }
+
+  .open .inner::after,
+  :global(.infonomic-hamburger-open) :global(.infonomic-hamburger-inner)::after {
+    bottom: 0;
+    transform: rotate(-90deg);
+    transition:
+      bottom 0.075s ease,
+      transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  /* Color scheme: onDark (white bars for dark backgrounds) */
+  .onDark,
+  :global(.infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Color scheme: onLight (dark bars for light backgrounds) */
+  .onLight,
+  :global(.infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}

package/dist/components/hamburger/hamburger.module.js

@@ -0,0 +1,10 @@
+import "./hamburger_module.css";
+const hamburger_module = {
+    hamburger: "hamburger-CFjgP7",
+    box: "box-E9EZxm",
+    inner: "inner-G4BGMv",
+    open: "open-OQO244",
+    onDark: "onDark-ZAa2Qt",
+    onLight: "onLight-s1LZFP"
+};
+export default hamburger_module;

package/dist/components/hamburger/hamburger_module.css

@@ -0,0 +1,169 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  :is(.hamburger-CFjgP7, .infonomic-hamburger) {
+    --hamburger-color: currentColor;
+    --hamburger-focus-ring-color: currentColor;
+    z-index: 200;
+    cursor: pointer;
+    width: 42px;
+    height: 34px;
+    font: inherit;
+    color: inherit;
+    text-transform: none;
+    border-radius: var(--border-radius-sm);
+    background-color: #0000;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  :is(.hamburger-CFjgP7:focus-visible, .infonomic-hamburger:focus-visible) {
+    outline: 2px solid var(--hamburger-focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  :is(.box-E9EZxm, .infonomic-hamburger-box) {
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+    display: block;
+    position: relative;
+  }
+
+  :is(.inner-G4BGMv, .infonomic-hamburger-inner) {
+    margin-top: -1px;
+    transition-duration: 75ms;
+    transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+    display: block;
+    top: 50%;
+  }
+
+  .inner-G4BGMv, .inner-G4BGMv:before, .inner-G4BGMv:after {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner:before {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .infonomic-hamburger-inner:after {
+    background-color: var(--hamburger-color);
+    border-radius: 0;
+    width: 24px;
+    height: 2px;
+    transition-property: transform;
+    transition-duration: .15s;
+    transition-timing-function: ease;
+    position: absolute;
+  }
+
+  .inner-G4BGMv:before, .inner-G4BGMv:after {
+    content: "";
+    display: block;
+  }
+
+  .infonomic-hamburger-inner:before {
+    content: "";
+    display: block;
+  }
+
+  .infonomic-hamburger-inner:after {
+    content: "";
+    display: block;
+  }
+
+  .inner-G4BGMv:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .infonomic-hamburger-inner:before {
+    transition: top 75ms .12s, opacity 75ms;
+    top: -8px;
+  }
+
+  .inner-G4BGMv:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  .infonomic-hamburger-inner:after {
+    transition: bottom 75ms .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
+    bottom: -8px;
+  }
+
+  :is(.open-OQO244 .inner-G4BGMv, .infonomic-hamburger-open .infonomic-hamburger-inner) {
+    transition-delay: .12s;
+    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+    transform: rotate(45deg);
+  }
+
+  .open-OQO244 .inner-G4BGMv:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .infonomic-hamburger-open .infonomic-hamburger-inner:before {
+    opacity: 0;
+    transition: top 75ms, opacity 75ms .12s;
+    top: 0;
+  }
+
+  .open-OQO244 .inner-G4BGMv:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+
+  .infonomic-hamburger-open .infonomic-hamburger-inner:after {
+    transition: bottom 75ms, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
+    bottom: 0;
+    transform: rotate(-90deg);
+  }
+
+  :is(.onDark-ZAa2Qt, .infonomic-hamburger-on-dark) {
+    --hamburger-color: white;
+    --hamburger-focus-ring-color: #ffffffb3;
+  }
+
+  :is(.onLight-s1LZFP, .infonomic-hamburger-on-light) {
+    --hamburger-color: var(--foreground, #1a1a1a);
+    --hamburger-focus-ring-color: var(--foreground, #1a1a1a);
+  }
+}
+

package/dist/components/tabs/tabs_module.css

@@ -45,11 +45,7 @@
     display: none;
   }
 
-  :is(.tabs-content-d2NTGs, .infonomic-tabs-content):focus {
-    outline: none;
-  }
-
-  :is(.tabs-content-d2NTGs, .infonomic-tabs-content):focus-visible {
+  :is(.tabs-content-d2NTGs, .infonomic-tabs-content):focus, :is(.tabs-content-d2NTGs, .infonomic-tabs-content):focus-visible {
     outline: none;
   }
 }

package/dist/loaders/@types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/loaders/@types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA"}

package/dist/loaders/ellipses.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-import type { LoaderProps } from './types/index.js';
+import type { LoaderProps } from './@types/index.js';
 export declare function LoaderEllipsis({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
 //# sourceMappingURL=ellipses.d.ts.map

package/dist/loaders/ellipses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ellipses.d.ts","sourceRoot":"","sources":["../../src/loaders/ellipses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBjC"}
+{"version":3,"file":"ellipses.d.ts","sourceRoot":"","sources":["../../src/loaders/ellipses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBjC"}

package/dist/loaders/ring.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
-import type { LoaderProps } from './types/index.js';
+import type { LoaderProps } from './@types/index.js';
 export declare function LoaderRing({ color, size, className, style }: LoaderProps): React.JSX.Element;
 //# sourceMappingURL=ring.d.ts.map

package/dist/loaders/ring.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/loaders/ring.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBjG"}
+{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/loaders/ring.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBjG"}

package/dist/loaders/spinner.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { LoaderProps } from './types/index.js';
+import type { LoaderProps } from './@types/index.js';
 type SpinnerProps = Omit<LoaderProps, 'size'>;
 export declare function LoaderSpinner({ color, className, style }: SpinnerProps): React.JSX.Element;
 export {};

package/dist/loaders/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,KAAK,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB1F"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,KAAK,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB1F"}