@dataworkz/crystal 0.1.0-beta.10 → 0.1.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataworkz/crystal",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "description": "Dataworkz core UI for Angular: dw-* components, icons, toasts, design tokens, theme CSS and bundled fonts.",
   "license": "MIT",
   "author": "Dataworkz",

package/primeng/index.d.ts

@@ -1,663 +1 @@
-import * as _primeuix_themes_types from '@primeuix/themes/types';
-import * as _primeuix_themes_aura_base from '@primeuix/themes/aura/base';
-import { EnvironmentProviders } from '@angular/core';
-import { PrimeNGConfigType } from 'primeng/config';
-
-/**
- * Azure Electric primary ramp. Same hex values as `--dw-primary-*` in
- * tokens/primitives.css — PrimeNG needs literal hex for the
- * primitive ramp because it derives other tokens from it at build time.
- */
-declare const AZURE_PRIMARY_RAMP: {
-    readonly 50: "#ecf3ff";
-    readonly 100: "#d6e5ff";
-    readonly 200: "#b0ccff";
-    readonly 300: "#82abff";
-    readonly 400: "#4d84ff";
-    readonly 500: "#2463f5";
-    readonly 600: "#144ce6";
-    readonly 700: "#113dc2";
-    readonly 800: "#16359b";
-    readonly 900: "#19327b";
-    readonly 950: "#101d49";
-};
-/**
- * PrimeNG color scheme, used for both light and dark. Every value points at a
- * design-system CSS variable, so PrimeNG follows the semantic tokens (tokens/semantic.css
- * and semantic-dark.css): switching theme re-points the variables, the preset
- * never changes. (The surface ramp is the raw neutral scale, light → dark,
- * which is the order Aura's own light and dark schemes expect.)
- */
-declare const DW_COLOR_SCHEME: {
-    surface: {
-        0: string;
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-        950: string;
-    };
-    primary: {
-        color: string;
-        contrastColor: string;
-        hoverColor: string;
-        activeColor: string;
-    };
-    highlight: {
-        background: string;
-        focusBackground: string;
-        color: string;
-        focusColor: string;
-    };
-    mask: {
-        background: string;
-        color: string;
-    };
-    formField: {
-        background: string;
-        disabledBackground: string;
-        filledBackground: string;
-        filledHoverBackground: string;
-        filledFocusBackground: string;
-        borderColor: string;
-        hoverBorderColor: string;
-        focusBorderColor: string;
-        invalidBorderColor: string;
-        color: string;
-        disabledColor: string;
-        placeholderColor: string;
-        invalidPlaceholderColor: string;
-        floatLabelColor: string;
-        floatLabelFocusColor: string;
-        floatLabelActiveColor: string;
-        floatLabelInvalidColor: string;
-        iconColor: string;
-        shadow: string;
-    };
-    text: {
-        color: string;
-        hoverColor: string;
-        mutedColor: string;
-        hoverMutedColor: string;
-    };
-    content: {
-        background: string;
-        hoverBackground: string;
-        borderColor: string;
-        color: string;
-        hoverColor: string;
-    };
-    overlay: {
-        select: {
-            background: string;
-            borderColor: string;
-            color: string;
-        };
-        popover: {
-            background: string;
-            borderColor: string;
-            color: string;
-        };
-        modal: {
-            background: string;
-            borderColor: string;
-            color: string;
-        };
-    };
-    list: {
-        option: {
-            focusBackground: string;
-            selectedBackground: string;
-            selectedFocusBackground: string;
-            color: string;
-            focusColor: string;
-            selectedColor: string;
-            selectedFocusColor: string;
-            icon: {
-                color: string;
-                focusColor: string;
-            };
-        };
-        optionGroup: {
-            background: string;
-            color: string;
-        };
-    };
-    navigation: {
-        item: {
-            focusBackground: string;
-            activeBackground: string;
-            color: string;
-            focusColor: string;
-            activeColor: string;
-            icon: {
-                color: string;
-                focusColor: string;
-                activeColor: string;
-            };
-        };
-        submenuLabel: {
-            background: string;
-            color: string;
-        };
-        submenuIcon: {
-            color: string;
-            focusColor: string;
-            activeColor: string;
-        };
-    };
-};
-/**
- * Overrides layered on top of Aura. Aura's `blue` primitive is replaced with
- * the Azure ramp so every `{primary.*}` resolves to Azure; semantic and
- * component tokens are bound to the `--dw-*` CSS variables.
- */
-declare const DW_PRESET_OVERRIDES: {
-    primitive: {
-        blue: {
-            50: "#ecf3ff";
-            100: "#d6e5ff";
-            200: "#b0ccff";
-            300: "#82abff";
-            400: "#4d84ff";
-            500: "#2463f5";
-            600: "#144ce6";
-            700: "#113dc2";
-            800: "#16359b";
-            900: "#19327b";
-            950: "#101d49";
-        };
-    };
-    semantic: {
-        primary: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950, string>;
-        transitionDuration: string;
-        disabledOpacity: string;
-        focusRing: {
-            width: string;
-            style: string;
-            color: string;
-            offset: string;
-            shadow: string;
-        };
-        formField: {
-            paddingX: string;
-            paddingY: string;
-            sm: {
-                fontSize: string;
-                paddingX: string;
-                paddingY: string;
-            };
-            borderRadius: string;
-            focusRing: {
-                width: string;
-                style: string;
-                color: string;
-                offset: string;
-                shadow: string;
-            };
-        };
-        list: {
-            option: {
-                borderRadius: string;
-            };
-        };
-        content: {
-            borderRadius: string;
-        };
-        navigation: {
-            item: {
-                borderRadius: string;
-            };
-        };
-        overlay: {
-            select: {
-                borderRadius: string;
-                shadow: string;
-            };
-            popover: {
-                borderRadius: string;
-                padding: string;
-                shadow: string;
-            };
-            modal: {
-                borderRadius: string;
-                padding: string;
-                shadow: string;
-            };
-            navigation: {
-                shadow: string;
-            };
-        };
-        colorScheme: {
-            light: {
-                surface: {
-                    0: string;
-                    50: string;
-                    100: string;
-                    200: string;
-                    300: string;
-                    400: string;
-                    500: string;
-                    600: string;
-                    700: string;
-                    800: string;
-                    900: string;
-                    950: string;
-                };
-                primary: {
-                    color: string;
-                    contrastColor: string;
-                    hoverColor: string;
-                    activeColor: string;
-                };
-                highlight: {
-                    background: string;
-                    focusBackground: string;
-                    color: string;
-                    focusColor: string;
-                };
-                mask: {
-                    background: string;
-                    color: string;
-                };
-                formField: {
-                    background: string;
-                    disabledBackground: string;
-                    filledBackground: string;
-                    filledHoverBackground: string;
-                    filledFocusBackground: string;
-                    borderColor: string;
-                    hoverBorderColor: string;
-                    focusBorderColor: string;
-                    invalidBorderColor: string;
-                    color: string;
-                    disabledColor: string;
-                    placeholderColor: string;
-                    invalidPlaceholderColor: string;
-                    floatLabelColor: string;
-                    floatLabelFocusColor: string;
-                    floatLabelActiveColor: string;
-                    floatLabelInvalidColor: string;
-                    iconColor: string;
-                    shadow: string;
-                };
-                text: {
-                    color: string;
-                    hoverColor: string;
-                    mutedColor: string;
-                    hoverMutedColor: string;
-                };
-                content: {
-                    background: string;
-                    hoverBackground: string;
-                    borderColor: string;
-                    color: string;
-                    hoverColor: string;
-                };
-                overlay: {
-                    select: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                    popover: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                    modal: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                };
-                list: {
-                    option: {
-                        focusBackground: string;
-                        selectedBackground: string;
-                        selectedFocusBackground: string;
-                        color: string;
-                        focusColor: string;
-                        selectedColor: string;
-                        selectedFocusColor: string;
-                        icon: {
-                            color: string;
-                            focusColor: string;
-                        };
-                    };
-                    optionGroup: {
-                        background: string;
-                        color: string;
-                    };
-                };
-                navigation: {
-                    item: {
-                        focusBackground: string;
-                        activeBackground: string;
-                        color: string;
-                        focusColor: string;
-                        activeColor: string;
-                        icon: {
-                            color: string;
-                            focusColor: string;
-                            activeColor: string;
-                        };
-                    };
-                    submenuLabel: {
-                        background: string;
-                        color: string;
-                    };
-                    submenuIcon: {
-                        color: string;
-                        focusColor: string;
-                        activeColor: string;
-                    };
-                };
-            };
-            dark: {
-                surface: {
-                    0: string;
-                    50: string;
-                    100: string;
-                    200: string;
-                    300: string;
-                    400: string;
-                    500: string;
-                    600: string;
-                    700: string;
-                    800: string;
-                    900: string;
-                    950: string;
-                };
-                primary: {
-                    color: string;
-                    contrastColor: string;
-                    hoverColor: string;
-                    activeColor: string;
-                };
-                highlight: {
-                    background: string;
-                    focusBackground: string;
-                    color: string;
-                    focusColor: string;
-                };
-                mask: {
-                    background: string;
-                    color: string;
-                };
-                formField: {
-                    background: string;
-                    disabledBackground: string;
-                    filledBackground: string;
-                    filledHoverBackground: string;
-                    filledFocusBackground: string;
-                    borderColor: string;
-                    hoverBorderColor: string;
-                    focusBorderColor: string;
-                    invalidBorderColor: string;
-                    color: string;
-                    disabledColor: string;
-                    placeholderColor: string;
-                    invalidPlaceholderColor: string;
-                    floatLabelColor: string;
-                    floatLabelFocusColor: string;
-                    floatLabelActiveColor: string;
-                    floatLabelInvalidColor: string;
-                    iconColor: string;
-                    shadow: string;
-                };
-                text: {
-                    color: string;
-                    hoverColor: string;
-                    mutedColor: string;
-                    hoverMutedColor: string;
-                };
-                content: {
-                    background: string;
-                    hoverBackground: string;
-                    borderColor: string;
-                    color: string;
-                    hoverColor: string;
-                };
-                overlay: {
-                    select: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                    popover: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                    modal: {
-                        background: string;
-                        borderColor: string;
-                        color: string;
-                    };
-                };
-                list: {
-                    option: {
-                        focusBackground: string;
-                        selectedBackground: string;
-                        selectedFocusBackground: string;
-                        color: string;
-                        focusColor: string;
-                        selectedColor: string;
-                        selectedFocusColor: string;
-                        icon: {
-                            color: string;
-                            focusColor: string;
-                        };
-                    };
-                    optionGroup: {
-                        background: string;
-                        color: string;
-                    };
-                };
-                navigation: {
-                    item: {
-                        focusBackground: string;
-                        activeBackground: string;
-                        color: string;
-                        focusColor: string;
-                        activeColor: string;
-                        icon: {
-                            color: string;
-                            focusColor: string;
-                            activeColor: string;
-                        };
-                    };
-                    submenuLabel: {
-                        background: string;
-                        color: string;
-                    };
-                    submenuIcon: {
-                        color: string;
-                        focusColor: string;
-                        activeColor: string;
-                    };
-                };
-            };
-        };
-    };
-    components: {
-        button: {
-            root: {
-                borderRadius: string;
-                label: {
-                    fontWeight: string;
-                };
-            };
-        };
-        datatable: {
-            headerCell: {
-                padding: string;
-                background: string;
-                color: string;
-                selectedBackground: string;
-                selectedColor: string;
-            };
-            bodyCell: {
-                padding: string;
-            };
-            colorScheme: {
-                light: {
-                    root: {
-                        borderColor: string;
-                    };
-                    row: {
-                        stripedBackground: string;
-                    };
-                };
-                dark: {
-                    root: {
-                        borderColor: string;
-                    };
-                    row: {
-                        stripedBackground: string;
-                    };
-                };
-            };
-        };
-        paginator: {
-            root: {
-                padding: string;
-                gap: string;
-            };
-            navButton: {
-                width: string;
-                height: string;
-                borderRadius: string;
-            };
-        };
-        dialog: {
-            title: {
-                fontSize: string;
-                fontWeight: string;
-            };
-        };
-        drawer: {
-            title: {
-                fontSize: string;
-                fontWeight: string;
-            };
-        };
-        tooltip: {
-            colorScheme: {
-                light: {
-                    root: {
-                        background: string;
-                        color: string;
-                    };
-                };
-                dark: {
-                    root: {
-                        background: string;
-                        color: string;
-                    };
-                };
-            };
-        };
-        tabs: {
-            tab: {
-                padding: string;
-                fontWeight: string;
-            };
-        };
-        toggleswitch: {
-            colorScheme: {
-                light: {
-                    root: {
-                        checkedBackground: string;
-                        checkedHoverBackground: string;
-                    };
-                };
-                dark: {
-                    root: {
-                        checkedBackground: string;
-                        checkedHoverBackground: string;
-                    };
-                };
-            };
-        };
-        skeleton: {
-            colorScheme: {
-                light: {
-                    root: {
-                        background: string;
-                        animationBackground: string;
-                    };
-                };
-                dark: {
-                    root: {
-                        background: string;
-                        animationBackground: string;
-                    };
-                };
-            };
-        };
-    };
-};
-/** Dataworkz PrimeNG preset: Aura retargeted to the design system. */
-declare const DwPreset: _primeuix_themes_types.Preset<_primeuix_themes_aura_base.AuraBaseDesignTokens>;
-
-/** PrimeNG's dark mode follows the attribute ThemeService (and provideCrystal()) put on `<html>`. */
-declare const DW_DARK_MODE_SELECTOR = "[data-theme=\"dark\"]";
-/** Panel class that sizes a select's option list for a small trigger (components/form.css). */
-declare const DW_SELECT_PANEL_SM = "dw-select-panel--sm";
-type SizedInstance = {
-    size?: () => string | null | undefined;
-};
-/**
- * Crystal's pass-through defaults: a small `p-select` / `p-multiselect` gets small options even when its list is
- * appended to `<body>` (where CSS can't see the trigger).
- */
-declare const DW_PRIMENG_PT: {
-    readonly select: {
-        readonly overlay: ({ instance }: {
-            instance?: SizedInstance;
-        }) => {
-            class: string;
-        } | {
-            class?: undefined;
-        };
-    };
-    readonly multiselect: {
-        readonly overlay: ({ instance }: {
-            instance?: SizedInstance;
-        }) => {
-            class: string;
-        } | {
-            class?: undefined;
-        };
-    };
-};
-/**
- * PrimeNG's z-index bases, with tooltips raised to 5000: PrimeNG already stacks a tooltip above the overlays it manages
- * (dialogs, drawers, popovers), and the higher base keeps it above layers that set their own z-index too (a panel or
- * page chrome with `z-index` in CSS), so a tooltip is never hidden under what it describes.
- */
-declare const DW_PRIMENG_Z_INDEX: {
-    readonly modal: 1100;
-    readonly overlay: 1000;
-    readonly menu: 1000;
-    readonly tooltip: 5000;
-};
-/**
- * PrimeNG with the Dataworkz preset, dark mode on `[data-theme="dark"]`. Pass app-specific PrimeNG settings
- * (ripple, zIndex, translation…) as `config`; its `theme.options` are merged over crystal's.
- *
- * ```ts
- * providers: [provideCrystal(), provideCrystalPrimeNG({ ripple: false })]
- * ```
- */
-declare function provideCrystalPrimeNG(config?: PrimeNGConfigType): EnvironmentProviders;
-
-export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG };
+export { AZURE_PRIMARY_RAMP, DW_COLOR_SCHEME, DW_DARK_MODE_SELECTOR, DW_PRESET_OVERRIDES, DW_PRIMENG_PT, DW_PRIMENG_Z_INDEX, DW_SELECT_PANEL_SM, DwPreset, provideCrystalPrimeNG } from '@dataworkz/crystal';

package/styles/components/form.css

@@ -694,6 +694,18 @@ body .dw-var-field .p-textarea {
   display: flex;
   width: 100%;
 }
+/* --plain: reads as text where it sits — no border, fill or shadow until hovered, no start padding; the focus ring
+   stays, so a keyboard user still sees where they are. */
+.dw-select.dw-select--plain > p-select,
+.dw-multiselect.dw-multiselect--plain > p-multiselect {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+.dw-select.dw-select--plain > p-select .p-select-label,
+.dw-multiselect.dw-multiselect--plain > p-multiselect .p-multiselect-label { padding-inline-start: 0; }
+.dw-select.dw-select--plain > p-select.p-focus,
+.dw-multiselect.dw-multiselect--plain > p-multiselect.p-focus { box-shadow: var(--dw-focus-ring); }
 
 /* ── dw-checkbox / dw-radio / dw-switch (components): the control and its label on one line (dw-check) ── */
 .dw-checkbox__label--empty:empty,

package/styles/components/navigation.css

@@ -486,6 +486,10 @@ dw-nav-list.dw-nav-list--minimizable { overflow: hidden; padding-bottom: 0; }
   border-bottom: 1px solid var(--dw-border);
 }
 .dw-menu-host { display: inline-flex; }
+/* The PrimeNG element inside a dw-menu / dw-popover is an empty host once its panel goes to <body>: keep it out of
+   the layout, so a menu or popover in a flex row (a header, a toolbar) adds no gap of its own. */
+.dw-menu-host > :is(p-menu, p-tieredmenu),
+dw-popover > p-popover { display: contents; }
 .dw-breadcrumb__img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
 .dw-nav-item--parent { justify-content: flex-start; }
 /* Rows with actions (dwNavItemActions): the item's button, its actions, then the accordion