npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.3.1 → 2.4.0 - Mend

@adgytec/adgytec-web-ui-components 2.3.1 → 2.4.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 (557) hide show

package/dist/chunks/core6.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core6","names":["standard","styles","styles","styles","color_module_default","menuItemBaseColor","\"color\"","menuItemLabelColor","\"label\"","menuColorConfig","color","menuBaseColor","layout_module_default","MenuItemIconSize","MenuBaseLayout","\"layout\"","menuLayoutConfig","layout","menu_module_default","MenuStyles","\"menu\"","MenuSectionStyles","MenuSectionHeaderStyles","MenuItemStyles","MenuItemLeadingStyles","MenuItemTrailingStyles"],"sources":["../../src/components/Menu/core/color.module.css","../../src/components/Menu/core/color.ts","../../src/components/Menu/core/layout.module.css","../../src/components/Menu/core/layout.ts","../../src/components/Menu/core/menu.module.css","../../src/components/Menu/core/menu.ts"],"sourcesContent":["/* configurable tokens\n\n --md-menu-background\n* --md-menu-section-label-color\n\n --md-menu-item-background\n* --md-menu-item-selected-background\n\n --md-menu-item-color\n* --md-menu-item-selected-color\n\n --md-menu-item-label-color\n* --menu-item-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n / this is used by individual menu items /\n .color {\n / state layer /\n --_state-color: var(--_label-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / variables to use /\n --_background-color: var(--_md-menu-item-background);\n --_color: var(--_md-menu-item-color);\n --_label-color: var(--_md-menu-item-label-color);\n\n / styles /\n background-color: var(--_background-color);\n color: var(--_color);\n\n &[data-selected] {\n --_background-color: var(--_md-menu-item-selected-background);\n --_color: var(--_md-menu-item-selected-color);\n --_label-color: var(--_menu-item-selected-label-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-open] {\n --_state-layer-opacity: 0.08;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n --_label-color: rgb(\n from var(--_md-menu-item-label-color) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_color: var(--_label-color);\n\n &[data-selected] {\n --_background-color: rgb(\n from var(--_md-menu-item-selected-background) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--_menu-item-selected-label-color) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n / state layer /\n .color::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .color[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(1 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n z-index: 1;\n }\n\n /* menu label /\n .label {\n color: var(--_label-color);\n }\n\n .menu-color {\n --_md-menu-background: var(\n --md-menu-background,\n var(--_md-menu-background-default)\n );\n --_md-menu-section-label-color: var(\n --md-menu-section-label-color,\n var(--_md-menu-section-label-color-default)\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background: var(\n --md-menu-item-background,\n var(--_md-menu-item-background-default)\n );\n --_md-menu-item-selected-background: var(\n --md-menu-item-selected-background,\n var(--_md-menu-item-selected-background-default)\n );\n\n / color /\n --_md-menu-item-color: var(\n --md-menu-item-color,\n var(--_md-menu-item-color-default)\n );\n --_md-menu-item-selected-color: var(\n --md-menu-item-selected-color,\n var(--_md-menu-item-selected-color-default)\n );\n\n / label color /\n --_md-menu-item-label-color: var(\n --md-menu-item-label-color,\n var(--_md-menu-item-label-color-default)\n );\n --_menu-item-selected-label-color: var(\n --menu-item-selected-label-color,\n var(--_menu-item-selected-label-color-default)\n );\n\n --md-divider-color: var(--_md-menu-item-color);\n }\n\n .standard {\n --_md-menu-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-menu-section-label-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-menu-item-selected-background-default: var(\n --md-sys-color-tertiary-container\n );\n\n / color /\n --_md-menu-item-color-default: var(--md-sys-color-on-surface-variant);\n --_md-menu-item-selected-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n\n / label color /\n --_md-menu-item-label-color-default: var(--md-sys-color-on-surface);\n --_menu-item-selected-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n }\n\n .vibrant {\n --_md-menu-background-default: var(--md-sys-color-tertiary-container);\n --_md-menu-section-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background-default: var(\n --md-sys-color-tertiary-container\n );\n --_md-menu-item-selected-background-default: var(\n --md-sys-color-tertiary\n );\n\n / color /\n --_md-menu-item-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n --_md-menu-item-selected-color-default: var(--md-sys-color-on-tertiary);\n\n / label color /\n --_md-menu-item-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n --_menu-item-selected-label-color-default: var(\n --md-sys-color-on-tertiary\n );\n }\n}\n","import styles from \"./color.module.css\";\n\n/\n Color scheme variants for the menu system:\n * - `\"standard\"`: Neutral container surface with on-surface text and secondary container selection.\n * - `\"vibrant\"`: Tertiary container surface with high-contrast tertiary accents.\n /\nexport type MenuColor = \"standard\" \| \"vibrant\";\n\n/\n CSS class applying the base icon and supporting text color to menu items.\n /\nexport const menuItemBaseColor = styles[\"color\"];\n\n/\n CSS class applying the primary label text color to menu items.\n /\nexport const menuItemLabelColor = styles[\"label\"];\n\n/\n Resolves the CSS class corresponding to a given [`MenuColor`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Menu/core/color.ts#L8) variant.\n \n @param color - The selected color variant.\n * @returns The CSS class name.\n /\nexport const menuColorConfig = (color: MenuColor) => {\n return styles[color];\n};\n\n/\n CSS class applying base surface coloring to the menu container.\n /\nexport const menuBaseColor = styles[\"menu-color\"];\n","@layer adgytec.comps {\n / core menu tokens /\n .layout {\n / tokens used either by menu or menu section based on layout value /\n --_md-menu-elevation: var(--md-sys-elevation-shadow-3);\n --_md-menu-gap: calc(2 var(--dp, 1px));\n --_md-menu-padding: var(--md-sys-layout-space-4);\n\n /* shape /\n --_md-menu-shape: var(--md-sys-shape-corner-radius-small);\n --_md-menu-section-shape: var(--md-sys-shape-corner-radius-small);\n\n / menu item /\n\n --_md-menu-item-shape: var(--md-sys-shape-corner-radius-extra-small);\n --_md-menu-item-outer-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-menu-item-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n / Vertical padding when item contains only a single-line label /\n / Centers 20px label within 44px container /\n --_md-menu-item-padding-block-single-line: var(\n --md-sys-layout-space-12\n );\n\n / Vertical padding when item contains label + supporting text /\n / Reduced padding to fit two text lines (20px + 16px) with 2px gap inside 44px container /\n --_md-menu-item-padding-block-multi-line: calc(3 var(--dp, 1px));\n\n /* Horizontal padding inside each menu item (excluding outer menu padding) /\n / Total visual inset = menu container padding (4) + this value (12) /\n --_md-menu-item-padding-inline-content: var(--md-sys-layout-space-12);\n\n / Spacing between elements inside a menu item (icon, text, trailing, etc.) /\n --_md-menu-item-content-gap: var(--md-sys-layout-space-8);\n\n &:focus-within {\n --_md-menu-shape: var(--md-sys-shape-corner-radius-large);\n }\n }\n\n .standard {\n --_menu-elevation: var(--_md-menu-elevation);\n --_menu-padding: var(--_md-menu-padding);\n --_menu-shape: var(--_md-menu-shape);\n --_menu-background: var(--_md-menu-background);\n\n --_menu-section-elevation: none;\n --_menu-section-padding: 0;\n --_menu-section-shape: 0;\n --_menu-section-outer-shape: 0;\n --_menu-section-background: transparent;\n\n --_menu-item-elevation: none;\n }\n\n .grouped {\n --_menu-elevation: none;\n --_menu-padding: 0;\n --_menu-shape: var(--_md-menu-shape);\n --_menu-background: transparent;\n\n --_menu-section-elevation: var(--_md-menu-elevation);\n --_menu-section-padding: var(--_md-menu-padding);\n --_menu-section-outer-shape: var(--_md-menu-shape);\n --_menu-section-shape: var(--_md-menu-section-shape);\n --_menu-section-background: var(--_md-menu-background);\n\n --_menu-item-elevation: var(--_md-menu-elevation);\n }\n}\n","import styles from \"./layout.module.css\";\n\n/\n Layout density variants for the menu:\n * - `\"standard\"`: Default density with standard item heights and padding.\n * - `\"grouped\"`: Grouped layout with compact spacing for nested or sectioned menus.\n /\nexport type MenuLayout = \"standard\" \| \"grouped\";\n\n/\n Standard dimension (20px) for leading and trailing icons in menu items.\n /\nexport const MenuItemIconSize = 20;\n\n/\n CSS class applying the base flex layout to the menu list.\n /\nexport const MenuBaseLayout = styles[\"layout\"];\n\n/\n Resolves the CSS class corresponding to a given [`MenuLayout`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Menu/core/layout.ts#L8) variant.\n \n @param layout - The layout density variant.\n * @returns The CSS class name.\n /\nexport const menuLayoutConfig = (layout: MenuLayout) => {\n return styles[layout];\n};\n","@layer adgytec.comps {\n .menu {\n background-color: var(--_menu-background);\n box-shadow: var(--_menu-elevation);\n border-radius: var(--_menu-shape);\n padding: var(--_menu-padding);\n\n outline: none;\n\n display: grid;\n gap: var(--_md-menu-gap);\n\n min-inline-size: min(100svi, calc(160 var(--dp, 1px)));\n\n overflow: auto;\n scrollbar-width: thin;\n\n transition: border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .menu-section {\n background-color: var(--_menu-section-background);\n box-shadow: var(--_menu-section-elevation);\n border-radius: var(--_menu-section-shape);\n padding: var(--_menu-section-padding);\n\n display: grid;\n gap: var(--_md-menu-gap);\n\n transition: border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .menu-section-header {\n padding-inline: var(--_md-menu-item-padding-inline-content);\n padding-block: var(--md-sys-layout-space-8);\n color: var(--_md-menu-section-label-color);\n }\n\n .menu-item {\n --_menu-item-padding-block: var(\n --_md-menu-item-padding-block-single-line\n );\n\n position: relative;\n outline: none;\n overflow: clip;\n\n display: flex;\n gap: var(--_md-menu-item-content-gap);\n align-items: center;\n justify-content: space-between;\n\n padding-inline: var(--_md-menu-item-padding-inline-content);\n padding-block: var(--_menu-item-padding-block);\n\n border-radius: var(--_md-menu-item-shape);\n\n transition:\n border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-multi-line] {\n --_menu-item-padding-block: var(\n --_md-menu-item-padding-block-multi-line\n );\n }\n\n &[data-selected] {\n border-radius: var(--_md-menu-item-selected-shape);\n }\n }\n\n .menu-item-leading,\n .menu-item-trailing {\n display: flex;\n gap: var(--_md-menu-item-content-gap);\n align-items: center;\n }\n\n /* menu -> menu item elevation /\n .menu > .menu-item {\n box-shadow: var(--_menu-item-elevation);\n }\n\n / menu -> menu section shape /\n .menu > .menu-section:first-child {\n border-start-start-radius: var(--_menu-section-outer-shape);\n border-start-end-radius: var(--_menu-section-outer-shape);\n }\n\n .menu > .menu-section:last-child {\n border-end-start-radius: var(--_menu-section-outer-shape);\n border-end-end-radius: var(--_menu-section-outer-shape);\n }\n\n / menu -> menu item shape (only if NOT selected) /\n .menu > .menu-item:not([data-selected]):first-child {\n border-start-start-radius: var(--_md-menu-shape);\n border-start-end-radius: var(--_md-menu-shape);\n }\n\n .menu > .menu-item:not([data-selected]):last-child {\n border-end-start-radius: var(--_md-menu-shape);\n border-end-end-radius: var(--_md-menu-shape);\n }\n\n / menu section -> menu item shape (only if NOT selected) /\n .menu\n > .menu-section:first-child\n > .menu-item:not([data-selected]):first-child {\n border-start-start-radius: var(--_md-menu-shape);\n border-start-end-radius: var(--_md-menu-shape);\n }\n\n .menu\n > .menu-section:last-child\n > .menu-item:not([data-selected]):last-child {\n border-end-start-radius: var(--_md-menu-shape);\n border-end-end-radius: var(--_md-menu-shape);\n }\n}\n","import styles from \"./menu.module.css\";\n\n/\n CSS class for the root menu list element.\n /\nexport const MenuStyles = styles[\"menu\"];\n\n/\n CSS class for a menu section grouping element.\n /\nexport const MenuSectionStyles = styles[\"menu-section\"];\n\n/\n CSS class for a menu section header text element.\n /\nexport const MenuSectionHeaderStyles = styles[\"menu-section-header\"];\n\n/\n CSS class for an individual interactive menu item container.\n /\nexport const MenuItemStyles = styles[\"menu-item\"];\n\n/\n CSS class for the leading content wrapper (icon, label, supporting text) of a menu item.\n /\nexport const MenuItemLeadingStyles = styles[\"menu-item-leading\"];\n\n/\n CSS class for the trailing content wrapper (trailing text, shortcut, chevron) of a menu item.\n */\nexport const MenuItemTrailingStyles = styles[\"menu-item-trailing\"];\n"],"mappings":";;;;;;GCYaK,IAAoBJ,EAAOK,OAK3BC,IAAqBN,EAAOO,OAQ5BC,KAAmB,MACrBR,EAAOS,IAMLC,IAAgBV,EAAO;;;;GEpBvBY,IAAmB,IAKnBC,IAAiBZ,EAAOa,QAQxBC,KAAoB,MACtBd,EAAOe;;;;;;;GErBLE,IAAahB,EAAOiB,MAKpBC,IAAoBlB,EAAO,iBAK3BmB,IAA0BnB,EAAO,wBAKjCoB,IAAiBpB,EAAO,cAKxBqB,IAAwBrB,EAAO,sBAK/BsB,IAAyBtB,EAAO"}
1	+ {"version":3,"file":"core6","names":["standard","styles","styles","styles","color_module_default","menuItemBaseColor","\"color\"","menuItemLabelColor","\"label\"","menuColorConfig","color","menuBaseColor","layout_module_default","MenuItemIconSize","MenuBaseLayout","\"layout\"","menuLayoutConfig","layout","menu_module_default","MenuStyles","\"menu\"","MenuSectionStyles","MenuSectionHeaderStyles","MenuItemStyles","MenuItemLeadingStyles","MenuItemTrailingStyles"],"sources":["../../src/components/Menu/core/color.module.css","../../src/components/Menu/core/color.ts","../../src/components/Menu/core/layout.module.css","../../src/components/Menu/core/layout.ts","../../src/components/Menu/core/menu.module.css","../../src/components/Menu/core/menu.ts"],"sourcesContent":["/* configurable tokens\n\n --md-menu-background\n* --md-menu-section-label-color\n\n --md-menu-item-background\n* --md-menu-item-selected-background\n\n --md-menu-item-color\n* --md-menu-item-selected-color\n\n --md-menu-item-label-color\n* --menu-item-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n / this is used by individual menu items /\n .color {\n / state layer /\n --_state-color: var(--_label-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / variables to use /\n --_background-color: var(--_md-menu-item-background);\n --_color: var(--_md-menu-item-color);\n --_label-color: var(--_md-menu-item-label-color);\n\n / styles /\n background-color: var(--_background-color);\n color: var(--_color);\n\n &[data-selected] {\n --_background-color: var(--_md-menu-item-selected-background);\n --_color: var(--_md-menu-item-selected-color);\n --_label-color: var(--_menu-item-selected-label-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-open] {\n --_state-layer-opacity: 0.08;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n --_label-color: rgb(\n from var(--_md-menu-item-label-color) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_color: var(--_label-color);\n\n &[data-selected] {\n --_background-color: rgb(\n from var(--_md-menu-item-selected-background) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--_menu-item-selected-label-color) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n\n / state layer /\n .color::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .color[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(1 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n z-index: 1;\n }\n\n /* menu label /\n .label {\n color: var(--_label-color);\n }\n\n .menu-color {\n --_md-menu-background: var(\n --md-menu-background,\n var(--_md-menu-background-default)\n );\n --_md-menu-section-label-color: var(\n --md-menu-section-label-color,\n var(--_md-menu-section-label-color-default)\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background: var(\n --md-menu-item-background,\n var(--_md-menu-item-background-default)\n );\n --_md-menu-item-selected-background: var(\n --md-menu-item-selected-background,\n var(--_md-menu-item-selected-background-default)\n );\n\n / color /\n --_md-menu-item-color: var(\n --md-menu-item-color,\n var(--_md-menu-item-color-default)\n );\n --_md-menu-item-selected-color: var(\n --md-menu-item-selected-color,\n var(--_md-menu-item-selected-color-default)\n );\n\n / label color /\n --_md-menu-item-label-color: var(\n --md-menu-item-label-color,\n var(--_md-menu-item-label-color-default)\n );\n --_menu-item-selected-label-color: var(\n --menu-item-selected-label-color,\n var(--_menu-item-selected-label-color-default)\n );\n\n --md-divider-color: var(--_md-menu-item-color);\n }\n\n .standard {\n --_md-menu-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-menu-section-label-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-menu-item-selected-background-default: var(\n --md-sys-color-tertiary-container\n );\n\n / color /\n --_md-menu-item-color-default: var(--md-sys-color-on-surface-variant);\n --_md-menu-item-selected-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n\n / label color /\n --_md-menu-item-label-color-default: var(--md-sys-color-on-surface);\n --_menu-item-selected-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n }\n\n .vibrant {\n --_md-menu-background-default: var(--md-sys-color-tertiary-container);\n --_md-menu-section-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n\n / menu item /\n\n / background /\n --_md-menu-item-background-default: var(\n --md-sys-color-tertiary-container\n );\n --_md-menu-item-selected-background-default: var(\n --md-sys-color-tertiary\n );\n\n / color /\n --_md-menu-item-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n --_md-menu-item-selected-color-default: var(--md-sys-color-on-tertiary);\n\n / label color /\n --_md-menu-item-label-color-default: var(\n --md-sys-color-on-tertiary-container\n );\n --_menu-item-selected-label-color-default: var(\n --md-sys-color-on-tertiary\n );\n }\n}\n","import styles from \"./color.module.css\";\n\n/\n Color scheme variants for the menu system:\n * - `\"standard\"`: Neutral container surface with on-surface text and secondary container selection.\n * - `\"vibrant\"`: Tertiary container surface with high-contrast tertiary accents.\n /\nexport type MenuColor = \"standard\" \| \"vibrant\";\n\n/\n CSS class applying the base icon and supporting text color to menu items.\n /\nexport const menuItemBaseColor = styles[\"color\"];\n\n/\n CSS class applying the primary label text color to menu items.\n /\nexport const menuItemLabelColor = styles[\"label\"];\n\n/\n Resolves the CSS class corresponding to a given [`MenuColor`](src/components/Menu/core/color.ts#L8) variant.\n \n @param color - The selected color variant.\n * @returns The CSS class name.\n /\nexport const menuColorConfig = (color: MenuColor) => {\n return styles[color];\n};\n\n/\n CSS class applying base surface coloring to the menu container.\n /\nexport const menuBaseColor = styles[\"menu-color\"];\n","@layer adgytec.comps {\n / core menu tokens /\n .layout {\n / tokens used either by menu or menu section based on layout value /\n --_md-menu-elevation: var(--md-sys-elevation-shadow-3);\n --_md-menu-gap: calc(2 var(--dp, 1px));\n --_md-menu-padding: var(--md-sys-layout-space-4);\n\n /* shape /\n --_md-menu-shape: var(--md-sys-shape-corner-radius-small);\n --_md-menu-section-shape: var(--md-sys-shape-corner-radius-small);\n\n / menu item /\n\n --_md-menu-item-shape: var(--md-sys-shape-corner-radius-extra-small);\n --_md-menu-item-outer-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-menu-item-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n / Vertical padding when item contains only a single-line label /\n / Centers 20px label within 44px container /\n --_md-menu-item-padding-block-single-line: var(\n --md-sys-layout-space-12\n );\n\n / Vertical padding when item contains label + supporting text /\n / Reduced padding to fit two text lines (20px + 16px) with 2px gap inside 44px container /\n --_md-menu-item-padding-block-multi-line: calc(3 var(--dp, 1px));\n\n /* Horizontal padding inside each menu item (excluding outer menu padding) /\n / Total visual inset = menu container padding (4) + this value (12) /\n --_md-menu-item-padding-inline-content: var(--md-sys-layout-space-12);\n\n / Spacing between elements inside a menu item (icon, text, trailing, etc.) /\n --_md-menu-item-content-gap: var(--md-sys-layout-space-8);\n\n &:focus-within {\n --_md-menu-shape: var(--md-sys-shape-corner-radius-large);\n }\n }\n\n .standard {\n --_menu-elevation: var(--_md-menu-elevation);\n --_menu-padding: var(--_md-menu-padding);\n --_menu-shape: var(--_md-menu-shape);\n --_menu-background: var(--_md-menu-background);\n\n --_menu-section-elevation: none;\n --_menu-section-padding: 0;\n --_menu-section-shape: 0;\n --_menu-section-outer-shape: 0;\n --_menu-section-background: transparent;\n\n --_menu-item-elevation: none;\n }\n\n .grouped {\n --_md-menu-elevation: var(--md-sys-elevation-shadow-2);\n\n --_menu-elevation: none;\n --_menu-padding: 0;\n --_menu-shape: var(--_md-menu-shape);\n --_menu-background: transparent;\n\n --_menu-section-elevation: var(--_md-menu-elevation);\n --_menu-section-padding: var(--_md-menu-padding);\n --_menu-section-outer-shape: var(--_md-menu-shape);\n --_menu-section-shape: var(--_md-menu-section-shape);\n --_menu-section-background: var(--_md-menu-background);\n\n --_menu-item-elevation: var(--_md-menu-elevation);\n }\n}\n","import styles from \"./layout.module.css\";\n\n/\n Layout density variants for the menu:\n * - `\"standard\"`: Default density with standard item heights and padding.\n * - `\"grouped\"`: Grouped layout with compact spacing for nested or sectioned menus.\n /\nexport type MenuLayout = \"standard\" \| \"grouped\";\n\n/\n Standard dimension (20px) for leading and trailing icons in menu items.\n /\nexport const MenuItemIconSize = 20;\n\n/\n CSS class applying the base flex layout to the menu list.\n /\nexport const MenuBaseLayout = styles[\"layout\"];\n\n/\n Resolves the CSS class corresponding to a given [`MenuLayout`](src/components/Menu/core/layout.ts#L8) variant.\n \n @param layout - The layout density variant.\n * @returns The CSS class name.\n /\nexport const menuLayoutConfig = (layout: MenuLayout) => {\n return styles[layout];\n};\n","@layer adgytec.comps {\n .menu {\n background-color: var(--_menu-background);\n box-shadow: var(--_menu-elevation);\n border-radius: var(--_menu-shape);\n padding: var(--_menu-padding);\n\n outline: none;\n\n display: grid;\n gap: var(--_md-menu-gap);\n\n min-inline-size: min(100svi, calc(160 var(--dp, 1px)));\n\n transition: border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .menu-section {\n background-color: var(--_menu-section-background);\n box-shadow: var(--_menu-section-elevation);\n border-radius: var(--_menu-section-shape);\n padding: var(--_menu-section-padding);\n\n display: grid;\n gap: var(--_md-menu-gap);\n\n transition: border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .menu-section-header {\n padding-inline: var(--_md-menu-item-padding-inline-content);\n padding-block: var(--md-sys-layout-space-8);\n color: var(--_md-menu-section-label-color);\n }\n\n .menu-item {\n --_menu-item-padding-block: var(\n --_md-menu-item-padding-block-single-line\n );\n\n position: relative;\n outline: none;\n overflow: clip;\n\n display: flex;\n gap: var(--_md-menu-item-content-gap);\n align-items: center;\n justify-content: space-between;\n\n padding-inline: var(--_md-menu-item-padding-inline-content);\n padding-block: var(--_menu-item-padding-block);\n\n border-radius: var(--_md-menu-item-shape);\n\n transition:\n border-radius var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-multi-line] {\n --_menu-item-padding-block: var(\n --_md-menu-item-padding-block-multi-line\n );\n }\n\n &[data-selected] {\n border-radius: var(--_md-menu-item-selected-shape);\n }\n }\n\n .menu-item-leading,\n .menu-item-trailing {\n display: flex;\n gap: var(--_md-menu-item-content-gap);\n align-items: center;\n }\n\n /* menu -> menu item elevation /\n .menu > .menu-item {\n box-shadow: var(--_menu-item-elevation);\n }\n\n / menu -> menu section shape /\n .menu > .menu-section:first-child {\n border-start-start-radius: var(--_menu-section-outer-shape);\n border-start-end-radius: var(--_menu-section-outer-shape);\n }\n\n .menu > .menu-section:last-child {\n border-end-start-radius: var(--_menu-section-outer-shape);\n border-end-end-radius: var(--_menu-section-outer-shape);\n }\n\n / menu -> menu item shape (only if NOT selected) /\n .menu > .menu-item:not([data-selected]):first-child {\n border-start-start-radius: var(--_md-menu-shape);\n border-start-end-radius: var(--_md-menu-shape);\n }\n\n .menu > .menu-item:not([data-selected]):last-child {\n border-end-start-radius: var(--_md-menu-shape);\n border-end-end-radius: var(--_md-menu-shape);\n }\n\n / menu section -> menu item shape (only if NOT selected) /\n .menu\n > .menu-section:first-child\n > .menu-item:not([data-selected]):first-child {\n border-start-start-radius: var(--_md-menu-shape);\n border-start-end-radius: var(--_md-menu-shape);\n }\n\n .menu\n > .menu-section:last-child\n > .menu-item:not([data-selected]):last-child {\n border-end-start-radius: var(--_md-menu-shape);\n border-end-end-radius: var(--_md-menu-shape);\n }\n}\n","import styles from \"./menu.module.css\";\n\n/\n CSS class for the root menu list element.\n /\nexport const MenuStyles = styles[\"menu\"];\n\n/\n CSS class for a menu section grouping element.\n /\nexport const MenuSectionStyles = styles[\"menu-section\"];\n\n/\n CSS class for a menu section header text element.\n /\nexport const MenuSectionHeaderStyles = styles[\"menu-section-header\"];\n\n/\n CSS class for an individual interactive menu item container.\n /\nexport const MenuItemStyles = styles[\"menu-item\"];\n\n/\n CSS class for the leading content wrapper (icon, label, supporting text) of a menu item.\n /\nexport const MenuItemLeadingStyles = styles[\"menu-item-leading\"];\n\n/\n CSS class for the trailing content wrapper (trailing text, shortcut, chevron) of a menu item.\n */\nexport const MenuItemTrailingStyles = styles[\"menu-item-trailing\"];\n"],"mappings":";;;;;;A,GCYaK,IAAoBJ,EAAOK,OAK3BC,IAAqBN,EAAOO,OAQ5BC,KAAmB,MACrBR,EAAOS,IAMLC,IAAgBV,EAAO,e;;;;A,GEpBvBY,IAAmB,IAKnBC,IAAiBZ,EAAOa,QAQxBC,KAAoB,MACtBd,EAAOe,I;;;;;;;A,GErBLE,IAAahB,EAAOiB,MAKpBC,IAAoBlB,EAAO,iBAK3BmB,IAA0BnB,EAAO,wBAKjCoB,IAAiBpB,EAAO,cAKxBqB,IAAwBrB,EAAO,sBAK/BsB,IAAyBtB,EAAO"}

package/dist/chunks/core7 CHANGED Viewed

@@ -1,5 +1,4 @@
-import '../assets/core8.css';//#endregion
-//#region src/components/Input/Slider/core/color.ts
+import '../assets/core8.css';// src/components/Input/Slider/core/color.ts
 var e = { colors: "_colors_19hg3_20" }.colors, t = {
 	slider: "_slider_adt2x_2",
 	"track-container": "_track-container_adt2x_13",
@@ -13,14 +12,12 @@ var e = { colors: "_colors_19hg3_20" }.colors, t = {
 function a(e) {
 	return t[e];
 }
-//#endregion
-//#region src/components/Input/Slider/core/variant.module.css
+// src/components/Input/Slider/core/variant.module.css
 var o = {
 	"visual-track": "_visual-track_tf6eb_2",
 	"active-track": "_active-track_tf6eb_24",
 	"inactive-track": "_inactive-track_tf6eb_61"
 }, s = o["visual-track"], c = o["active-track"], l = o["inactive-track"];
-//#endregion
 export { n as a, e as c, a as i, l as n, r as o, s as r, i as s, c as t };
 //# sourceMappingURL=core7.map

package/dist/chunks/core7.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core7","names":["styles","styles","styles","SliderColors","\"colors\"","size_module_default","SliderStyles","\"slider\"","TrackContainerStyles","TrackStyles","\"track\"","SliderSizeStyles","size","variant_module_default","VisualTrackStyles","ActiveTrackStyles","InactiveTrackStyles"],"sources":["../../src/components/Input/Slider/core/color.module.css","../../src/components/Input/Slider/core/color.ts","../../src/components/Input/Slider/core/size.module.css","../../src/components/Input/Slider/core/size.ts","../../src/components/Input/Slider/core/variant.module.css","../../src/components/Input/Slider/core/variant.ts"],"sourcesContent":["/* configurable tokens\n\n --md-slider-active-track-color\n* --md-slider-inactive-track-color\n\n --md-slider-thumb-color\n\n --md-slider-active-stop-color\n* --md-slider-inactive-stop-color\n\n --md-slider-output-background\n* --md-slider-output-color\n\n --md-slider-icon-color\n* --md-slider-minimum-value-icon-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .colors {\n --_md-slider-active-track-color: var(\n --md-slider-active-track-color,\n var(--md-sys-color-primary)\n );\n --_md-slider-inactive-track-color: var(\n --md-slider-inactive-track-color,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-slider-thumb-color: var(\n --md-slider-thumb-color,\n var(--_md-slider-active-track-color)\n );\n\n --_md-slider-active-stop-color: var(\n --md-slider-active-stop-color,\n var(--md-sys-color-on-primary)\n );\n --_md-slider-inactive-stop-color: var(\n --md-slider-inactive-stop-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-slider-output-background: var(\n --md-slider-output-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-slider-output-color: var(\n --md-slider-output-color,\n var(--md-sys-color-inverse-on-surface)\n );\n\n --_md-slider-icon-color: var(\n --md-slider-icon-color,\n var(--md-sys-color-on-primary)\n );\n --_md-slider-minimum-value-icon-color: var(\n --md-slider-minimum-value-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n }\n}\n","import styles from \"./color.module.css\";\n\n/* CSS class providing theme color tokens for sliders. /\nexport const SliderColors = styles[\"colors\"];\n","@layer adgytec.comps {\n .slider {\n --_track-gap: var(--md-sys-layout-space-16);\n --_orientation-inset: calc(-1 calc(var(--_track-gap) / 2));\n\n display: flex;\n flex-direction: column;\n gap: var(--md-sys-layout-space-4);\n\n block-size: 100%;\n }\n\n .track-container {\n flex: 1;\n padding: calc(-1 * var(--_orientation-inset));\n\n &[data-orientation=\"vertical\"] {\n align-self: center;\n }\n }\n\n .track {\n --_md-slider-track-inner-shape: calc(2 * var(--dp, 1px));\n\n --_active-track-color: var(--_md-slider-active-track-color);\n --_inactive-track-color: var(--_md-slider-inactive-track-color);\n\n &[data-orientation=\"horizontal\"] {\n inline-size: 100%;\n block-size: var(--_md-slider-track-size);\n }\n\n &[data-orientation=\"vertical\"] {\n block-size: 100%;\n inline-size: var(--_md-slider-track-size);\n }\n\n &[data-disabled] {\n --_active-track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_inactive-track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .extra-small {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-small);\n --_md-slider-track-size: var(--md-sys-layout-space-16);\n }\n\n .small {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-small);\n --_md-slider-track-size: var(--md-sys-layout-space-24);\n }\n\n .medium {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-slider-track-size: var(--md-sys-layout-space-40);\n }\n\n .large {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-large);\n --_md-slider-track-size: var(--md-sys-layout-space-56);\n }\n\n .extra-large {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-slider-track-size: var(--md-sys-layout-space-96);\n }\n}\n","import styles from \"./size.module.css\";\n\n/*\n Size presets for slider track height and thumb diameter.\n /\nexport type SliderSize =\n \| \"extra-small\"\n \| \"small\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\n/* Base CSS class for the slider container. /\nexport const SliderStyles = styles[\"slider\"];\n\n/* CSS class for the track wrapper container. /\nexport const TrackContainerStyles = styles[\"track-container\"];\n\n/* CSS class for the interactive slider track. /\nexport const TrackStyles = styles[\"track\"];\n\n/\n Resolves the CSS module class for a given slider size preset.\n \n @param size - The desired slider size preset.\n * @returns The corresponding CSS class name.\n /\nexport function SliderSizeStyles(size: SliderSize) {\n return styles[size];\n}\n","@layer adgytec.comps {\n .visual-track {\n --_range-gap: calc(var(--_track-gap) / 2);\n --_range-gap-half: calc(var(--_range-gap) / 2);\n\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n display: flex;\n gap: var(--_range-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n display: grid;\n\n > div {\n border-radius: var(--_md-slider-track-inner-shape);\n background-color: var(--_active-track-color);\n }\n\n &[data-orientation=\"horizontal\"] {\n > div {\n margin-inline: var(--_range-gap);\n\n &[data-direction=\"start\"] {\n margin-inline-end: var(--_range-gap-half);\n }\n\n &[data-direction=\"end\"] {\n margin-inline-start: var(--_range-gap-half);\n }\n }\n }\n\n &[data-orientation=\"vertical\"] {\n > div {\n margin-block: var(--_range-gap);\n\n &[data-direction=\"start\"] {\n margin-block-start: var(--_range-gap-half);\n }\n\n &[data-direction=\"end\"] {\n margin-block-end: var(--_range-gap-half);\n }\n }\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n &[data-track=\"start\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-track=\"end\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n &[data-track=\"start\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-track=\"end\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n }\n}\n","import styles from \"./variant.module.css\";\n\n/\n Functional slider track variants.\n \n - `\"standard\"`: Single thumb sliding from minimum to maximum.\n * - `\"centered\"`: Single thumb sliding bidirectional deviations from center (zero/neutral point).\n * - `\"range\"`: Two thumbs selecting a range interval between lower and upper bounds.\n /\nexport type SliderVariant = \"standard\" \| \"centered\" \| \"range\";\n\n/* CSS class for visual track background. /\nexport const VisualTrackStyles = styles[\"visual-track\"];\n\n/* CSS class for the active/highlighted portion of the slider track. /\nexport const ActiveTrackStyles = styles[\"active-track\"];\n\n/* CSS class for the inactive/unselected portion of the slider track. */\nexport const InactiveTrackStyles = styles[\"inactive-track\"];\n"],"mappings":";;ACGA,IAAaG,IAAeH,~~6BAAAA~~,EAAOI;;;;;;;;;GEUtBE,IAAeL,EAAOM,QAGtBC,IAAuBP,EAAO,oBAG9BQ,IAAcR,EAAOS;AAQlC,SAAgBC,EAAiB,GAAkB;CAC/C,OAAOV,EAAOW;AAClB~~;;;;;;;~~GEjBaE,IAAoBZ,EAAO,iBAG3Ba,IAAoBb,EAAO,iBAG3Bc,IAAsBd,EAAO"}
1	+ {"version":3,"file":"core7","names":["styles","styles","styles","SliderColors","\"colors\"","size_module_default","SliderStyles","\"slider\"","TrackContainerStyles","TrackStyles","\"track\"","SliderSizeStyles","size","variant_module_default","VisualTrackStyles","ActiveTrackStyles","InactiveTrackStyles"],"sources":["../../src/components/Input/Slider/core/color.module.css","../../src/components/Input/Slider/core/color.ts","../../src/components/Input/Slider/core/size.module.css","../../src/components/Input/Slider/core/size.ts","../../src/components/Input/Slider/core/variant.module.css","../../src/components/Input/Slider/core/variant.ts"],"sourcesContent":["/* configurable tokens\n\n --md-slider-active-track-color\n* --md-slider-inactive-track-color\n\n --md-slider-thumb-color\n\n --md-slider-active-stop-color\n* --md-slider-inactive-stop-color\n\n --md-slider-output-background\n* --md-slider-output-color\n\n --md-slider-icon-color\n* --md-slider-minimum-value-icon-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .colors {\n --_md-slider-active-track-color: var(\n --md-slider-active-track-color,\n var(--md-sys-color-primary)\n );\n --_md-slider-inactive-track-color: var(\n --md-slider-inactive-track-color,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-slider-thumb-color: var(\n --md-slider-thumb-color,\n var(--_md-slider-active-track-color)\n );\n\n --_md-slider-active-stop-color: var(\n --md-slider-active-stop-color,\n var(--md-sys-color-on-primary)\n );\n --_md-slider-inactive-stop-color: var(\n --md-slider-inactive-stop-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-slider-output-background: var(\n --md-slider-output-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-slider-output-color: var(\n --md-slider-output-color,\n var(--md-sys-color-inverse-on-surface)\n );\n\n --_md-slider-icon-color: var(\n --md-slider-icon-color,\n var(--md-sys-color-on-primary)\n );\n --_md-slider-minimum-value-icon-color: var(\n --md-slider-minimum-value-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n }\n}\n","import styles from \"./color.module.css\";\n\n/* CSS class providing theme color tokens for sliders. /\nexport const SliderColors = styles[\"colors\"];\n","@layer adgytec.comps {\n .slider {\n --_track-gap: var(--md-sys-layout-space-16);\n --_orientation-inset: calc(-1 calc(var(--_track-gap) / 2));\n\n display: flex;\n flex-direction: column;\n gap: var(--md-sys-layout-space-4);\n\n block-size: 100%;\n }\n\n .track-container {\n flex: 1;\n padding: calc(-1 * var(--_orientation-inset));\n\n &[data-orientation=\"vertical\"] {\n align-self: center;\n }\n }\n\n .track {\n --_md-slider-track-inner-shape: calc(2 * var(--dp, 1px));\n\n --_active-track-color: var(--_md-slider-active-track-color);\n --_inactive-track-color: var(--_md-slider-inactive-track-color);\n\n &[data-orientation=\"horizontal\"] {\n inline-size: 100%;\n block-size: var(--_md-slider-track-size);\n }\n\n &[data-orientation=\"vertical\"] {\n block-size: 100%;\n inline-size: var(--_md-slider-track-size);\n }\n\n &[data-disabled] {\n --_active-track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_inactive-track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .extra-small {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-small);\n --_md-slider-track-size: var(--md-sys-layout-space-16);\n }\n\n .small {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-small);\n --_md-slider-track-size: var(--md-sys-layout-space-24);\n }\n\n .medium {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-slider-track-size: var(--md-sys-layout-space-40);\n }\n\n .large {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-large);\n --_md-slider-track-size: var(--md-sys-layout-space-56);\n }\n\n .extra-large {\n --_md-slider-track-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-slider-track-size: var(--md-sys-layout-space-96);\n }\n}\n","import styles from \"./size.module.css\";\n\n/*\n Size presets for slider track height and thumb diameter.\n /\nexport type SliderSize =\n \| \"extra-small\"\n \| \"small\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\n/* Base CSS class for the slider container. /\nexport const SliderStyles = styles[\"slider\"];\n\n/* CSS class for the track wrapper container. /\nexport const TrackContainerStyles = styles[\"track-container\"];\n\n/* CSS class for the interactive slider track. /\nexport const TrackStyles = styles[\"track\"];\n\n/\n Resolves the CSS module class for a given slider size preset.\n \n @param size - The desired slider size preset.\n * @returns The corresponding CSS class name.\n /\nexport function SliderSizeStyles(size: SliderSize) {\n return styles[size];\n}\n","@layer adgytec.comps {\n .visual-track {\n --_range-gap: calc(var(--_track-gap) / 2);\n --_range-gap-half: calc(var(--_range-gap) / 2);\n\n position: absolute;\n inset: 0;\n z-index: 0;\n\n border-radius: var(--_md-slider-track-shape);\n display: flex;\n gap: var(--_range-gap);\n\n &[data-orientation=\"horizontal\"] {\n inset-inline: var(--_orientation-inset);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column-reverse;\n inset-block: var(--_orientation-inset);\n }\n }\n\n .active-track {\n display: grid;\n\n > div {\n border-radius: var(--_md-slider-track-inner-shape);\n background-color: var(--_active-track-color);\n }\n\n &[data-orientation=\"horizontal\"] {\n > div {\n margin-inline: var(--_range-gap);\n\n &[data-direction=\"start\"] {\n margin-inline-end: var(--_range-gap-half);\n }\n\n &[data-direction=\"end\"] {\n margin-inline-start: var(--_range-gap-half);\n }\n }\n }\n\n &[data-orientation=\"vertical\"] {\n > div {\n margin-block: var(--_range-gap);\n\n &[data-direction=\"start\"] {\n margin-block-start: var(--_range-gap-half);\n }\n\n &[data-direction=\"end\"] {\n margin-block-end: var(--_range-gap-half);\n }\n }\n }\n }\n\n .inactive-track {\n background-color: var(--_inactive-track-color);\n border-radius: var(--_md-slider-track-shape);\n\n &[data-orientation=\"horizontal\"] {\n &[data-track=\"start\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-track=\"end\"] {\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n\n &[data-orientation=\"vertical\"] {\n &[data-track=\"start\"] {\n border-start-end-radius: var(--_md-slider-track-inner-shape);\n border-start-start-radius: var(--_md-slider-track-inner-shape);\n }\n\n &[data-track=\"end\"] {\n border-end-end-radius: var(--_md-slider-track-inner-shape);\n border-end-start-radius: var(--_md-slider-track-inner-shape);\n }\n }\n }\n}\n","import styles from \"./variant.module.css\";\n\n/\n Functional slider track variants.\n \n - `\"standard\"`: Single thumb sliding from minimum to maximum.\n * - `\"centered\"`: Single thumb sliding bidirectional deviations from center (zero/neutral point).\n * - `\"range\"`: Two thumbs selecting a range interval between lower and upper bounds.\n /\nexport type SliderVariant = \"standard\" \| \"centered\" \| \"range\";\n\n/* CSS class for visual track background. /\nexport const VisualTrackStyles = styles[\"visual-track\"];\n\n/* CSS class for the active/highlighted portion of the slider track. /\nexport const ActiveTrackStyles = styles[\"active-track\"];\n\n/* CSS class for the inactive/unselected portion of the slider track. */\nexport const InactiveTrackStyles = styles[\"inactive-track\"];\n"],"mappings":";ACGA,IAAaG,IAAeH,E,2BAAAA,EAAOI,Q;;;;;;;;;A,GEUtBE,IAAeL,EAAOM,QAGtBC,IAAuBP,EAAO,oBAG9BQ,IAAcR,EAAOS;AAQlC,SAAgBC,EAAiB,GAAkB;CAC/C,OAAOV,EAAOW;AAClB;;;;;;A,GEjBaE,IAAoBZ,EAAO,iBAG3Ba,IAAoBb,EAAO,iBAG3Bc,IAAsBd,EAAO"}

package/dist/chunks/core8 CHANGED Viewed

@@ -9,10 +9,8 @@ function s() {
 	if (e == null) throw Error("Missing navigation information. Ensure this component is rendered within a Navigation or SubNavigation component.");
 	return e;
 }
-//#endregion
-//#region src/components/Navigation/core/navLabelContext.ts
+// src/components/Navigation/core/navLabelContext.ts
 var c = e(void 0);
-//#endregion
 export { r as a, i, o as n, a as o, s as r, c as t };
 //# sourceMappingURL=core8.map

package/dist/chunks/core8.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core8","names":["styles","navigation_module_default","NavigationStyles","\"navigation\"","NavigationHeaderStyles","SubNavigationHeaderStyles","NavigationInfoContext","createContext","useNavigationInfo","ctx","useContext","NavLabelContext"],"sources":["../../src/components/Navigation/core/navigation.module.css","../../src/components/Navigation/core/navigation.ts","../../src/components/Navigation/core/navigationInfo.ts","../../src/components/Navigation/core/navLabelContext.ts"],"sourcesContent":["/* configurable tokens\n\n --md-navigation-background\n* --md-navigation-drawer-background\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .navigation {\n --_md-navigation-background: var(\n --md-navigation-background,\n var(--md-sys-color-surface)\n );\n --_md-navigation-drawer-background: var(\n --md-navigation-drawer-background,\n var(--md-sys-color-surface-container)\n );\n\n --_background: var(--_md-navigation-background);\n\n background-color: var(--_background);\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n display: grid;\n grid-template-rows: 1fr;\n gap: calc(10 var(--dp, 1px));\n\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-modal] {\n --_background: var(--_md-navigation-drawer-background);\n }\n\n &[data-header] {\n grid-template-rows: auto 1fr;\n }\n }\n\n .navigation[data-sub-nav] {\n opacity: 0;\n translate: -100%;\n\n transition:\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n translate var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-status=\"entered\"] {\n opacity: 1;\n translate: 0;\n }\n }\n\n .nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-32);\n padding-inline-end: var(--md-sys-layout-space-24);\n\n > [data-close-button] {\n margin-inline-start: auto;\n }\n }\n\n .sub-nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-24);\n padding-inline-end: var(--md-sys-layout-space-32);\n }\n}\n","import styles from \"./navigation.module.css\";\n\n/*\n CSS class for the root navigation container layout and surface styling.\n /\nexport const NavigationStyles = styles[\"navigation\"];\n\n/\n CSS class for the header area of a root [`Navigation`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/Navigation/Navigation.tsx) container.\n /\nexport const NavigationHeaderStyles = styles[\"nav-header\"];\n\n/\n CSS class for the header area of a sliding [`SubNavigation`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.\n /\nexport const SubNavigationHeaderStyles = styles[\"sub-nav-header\"];\n","import { createContext, useContext } from \"react\";\n\n/\n Identifier and nesting depth information for the current navigation level.\n /\nexport type NavigationInfoContextType = {\n /\n Unique identifier for this navigation level/panel.\n /\n id: string;\n /\n Current nesting hierarchy depth (root is 0, sub-navigations increment from 1).\n /\n depth: number;\n};\n\n/\n React context providing the current navigation level's ID and hierarchy depth.\n /\nexport const NavigationInfoContext =\n createContext<NavigationInfoContextType \| null>(null);\n\n/\n Hook to access the current navigation level's unique ID and nesting depth.\n \n @throws If rendered outside of a [`Navigation`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/Navigation/Navigation.tsx)\n * or [`SubNavigation`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) component.\n * @returns The current {@link NavigationInfoContextType}.\n /\nexport function useNavigationInfo() {\n const ctx = useContext(NavigationInfoContext);\n if (ctx == null) {\n throw new Error(\n \"Missing navigation information. Ensure this component is rendered within a Navigation or SubNavigation component.\"\n );\n }\n\n return ctx;\n}\n","import { createContext, type ReactNode } from \"react\";\n\n/\n Context value representing the label inherited from a parent navigation trigger.\n /\nexport type NavLabelContextType = ReactNode;\n\n/\n React context providing the trigger label to descendant navigation items or sub-navigation panels.\n */\nexport const NavLabelContext = createContext<NavLabelContextType>(undefined);\n"],"mappings":";;;;;GCKaE,IAAmBF,EAAOG,YAK1BC,IAAyBJ,EAAO,eAKhCK,IAA4BL,EAAO,mBCInCM,IACTC,EAAgD,IAAI;AASxD,SAAOC,IAAA;CACH,IAAAC,IAAYC,EAAWJ,CAAqB;CAC5C,IAAIG,KAAO,MACP,MAAU,MACN,mHACJ;CACH,OAEMA;AAAG~~;;;~~AC3Bd,IAAaE,IAAkBJ,EAAmC,KAAA,CAAS"}
1	+ {"version":3,"file":"core8","names":["styles","navigation_module_default","NavigationStyles","\"navigation\"","NavigationHeaderStyles","SubNavigationHeaderStyles","NavigationInfoContext","createContext","useNavigationInfo","ctx","useContext","NavLabelContext"],"sources":["../../src/components/Navigation/core/navigation.module.css","../../src/components/Navigation/core/navigation.ts","../../src/components/Navigation/core/navigationInfo.ts","../../src/components/Navigation/core/navLabelContext.ts"],"sourcesContent":["/* configurable tokens\n\n --md-navigation-background\n* --md-navigation-drawer-background\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .navigation {\n --_md-navigation-background: var(\n --md-navigation-background,\n var(--md-sys-color-surface)\n );\n --_md-navigation-drawer-background: var(\n --md-navigation-drawer-background,\n var(--md-sys-color-surface-container)\n );\n\n --_background: var(--_md-navigation-background);\n\n background-color: var(--_background);\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n display: grid;\n grid-template-rows: 1fr;\n gap: calc(10 var(--dp, 1px));\n\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-modal] {\n --_background: var(--_md-navigation-drawer-background);\n }\n\n &[data-header] {\n grid-template-rows: auto 1fr;\n }\n }\n\n .navigation[data-sub-nav] {\n opacity: 0;\n translate: -100%;\n\n transition:\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n translate var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-status=\"entered\"] {\n opacity: 1;\n translate: 0;\n }\n }\n\n .nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-32);\n padding-inline-end: var(--md-sys-layout-space-24);\n\n > [data-close-button] {\n margin-inline-start: auto;\n }\n }\n\n .sub-nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-24);\n padding-inline-end: var(--md-sys-layout-space-32);\n }\n}\n","import styles from \"./navigation.module.css\";\n\n/*\n CSS class for the root navigation container layout and surface styling.\n /\nexport const NavigationStyles = styles[\"navigation\"];\n\n/\n CSS class for the header area of a root [`Navigation`](src/components/Navigation/Navigation/Navigation.tsx) container.\n /\nexport const NavigationHeaderStyles = styles[\"nav-header\"];\n\n/\n CSS class for the header area of a sliding [`SubNavigation`](src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) panel.\n /\nexport const SubNavigationHeaderStyles = styles[\"sub-nav-header\"];\n","import { createContext, useContext } from \"react\";\n\n/\n Identifier and nesting depth information for the current navigation level.\n /\nexport type NavigationInfoContextType = {\n /\n Unique identifier for this navigation level/panel.\n /\n id: string;\n /\n Current nesting hierarchy depth (root is 0, sub-navigations increment from 1).\n /\n depth: number;\n};\n\n/\n React context providing the current navigation level's ID and hierarchy depth.\n /\nexport const NavigationInfoContext =\n createContext<NavigationInfoContextType \| null>(null);\n\n/\n Hook to access the current navigation level's unique ID and nesting depth.\n \n @throws If rendered outside of a [`Navigation`](src/components/Navigation/Navigation/Navigation.tsx)\n * or [`SubNavigation`](src/components/Navigation/SubNavigation/SubNavigation/SubNavigation.tsx) component.\n * @returns The current {@link NavigationInfoContextType}.\n /\nexport function useNavigationInfo() {\n const ctx = useContext(NavigationInfoContext);\n if (ctx == null) {\n throw new Error(\n \"Missing navigation information. Ensure this component is rendered within a Navigation or SubNavigation component.\"\n );\n }\n\n return ctx;\n}\n","import { createContext, type ReactNode } from \"react\";\n\n/\n Context value representing the label inherited from a parent navigation trigger.\n /\nexport type NavLabelContextType = ReactNode;\n\n/\n React context providing the trigger label to descendant navigation items or sub-navigation panels.\n */\nexport const NavLabelContext = createContext<NavLabelContextType>(undefined);\n"],"mappings":";;;;;A,GCKaE,IAAmBF,EAAOG,YAK1BC,IAAyBJ,EAAO,eAKhCK,IAA4BL,EAAO,mBCInCM,IACTC,EAAgD,IAAI;AASxD,SAAOC,IAAA;CACH,IAAAC,IAAYC,EAAWJ,CAAqB;CAC5C,IAAIG,KAAO,MACP,MAAU,MACN,mHACJ;CACH,OAEMA;AAAG;;AC3Bd,IAAaE,IAAkBJ,EAAmC,KAAA,CAAS"}

package/dist/chunks/core9 CHANGED Viewed

@@ -1,6 +1,5 @@
 import { t as e } from "./base";
 import '../assets/core10.css';var t = { item: "_item_1jlhw_16" }, n = e.titleSmall, r = t.item;
-//#endregion
 export { r as n, n as t };
 //# sourceMappingURL=core9.map

package/dist/chunks/core9.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core9","names":["styles","typography","navigationItem_module_default","NavigationItemLabelTypography","NavigationItemStyles","\"item\""],"sources":["../../src/components/Navigation/NavigationItem/core/navigationItem.module.css","../../src/components/Navigation/NavigationItem/core/navigationItem.ts"],"sourcesContent":["/* configurable tokens\n\n --md-navigation-item-active-background\n\n --md-navigation-item-label-color\n* --md-navigation-item-icon-color\n\n --md-navigation-item-active-label-color\n* --md-navigation-item-active-icon-color\n\n --md-navigation-item-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .item {\n --_md-navigation-item-active-background: var(\n --md-navigation-item-active-background,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-navigation-item-label-color: var(\n --md-navigation-item-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-navigation-item-icon-color: var(\n --md-navigation-item-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n --_md-navigation-item-active-label-color: var(\n --md-navigation-item-active-label-color,\n var(--md-sys-color-secondary)\n );\n --_md-navigation-item-active-icon-color: var(\n --md-navigation-item-active-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-state-layer-color: var(\n --md-navigation-item-state-layer-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-padding-block: var(--md-sys-layout-space-16);\n --_md-navigation-item-padding-inline: var(--md-sys-layout-space-16);\n --_md-navigation-item-gap: var(--md-sys-layout-space-8);\n\n --_background: transparent;\n --_icon-color: var(--_md-navigation-item-icon-color);\n --_label-color: var(--_md-navigation-item-label-color);\n\n --_state-color: var(--_md-navigation-item-state-layer-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n all: unset;\n\n position: relative;\n\n background-color: var(--_background);\n color: var(--_label-color);\n\n padding-inline: var(--_md-navigation-item-padding-inline);\n padding-block: var(--_md-navigation-item-padding-block);\n\n display: flex;\n align-items: center;\n gap: var(--_md-navigation-item-gap);\n\n cursor: pointer;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-active] {\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n\n [data-nav-icon] {\n color: var(--_icon-color);\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n }\n\n / state layer /\n .item::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .item[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationItem.module.css\";\n\n/*\n Common configuration properties shared across navigation items ([`NavigationLink`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/NavigationItem/NavigationLink/NavigationLink.tsx)\n * and [`NavigationButton`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/NavigationItem/NavigationButton/NavigationButton.tsx)).\n /\nexport interface NavigationItemProps {\n /\n Primary label content for the navigation item.\n /\n label: ReactNode;\n\n /\n Optional icon displayed when the navigation item is in its inactive state.\n /\n icon?: LucideIcon;\n\n /\n Optional alternate icon displayed when the navigation item is in its active state.\n /\n activeIcon?: LucideIcon;\n\n /\n Override flag or predicate function evaluating whether the item is currently active.\n /\n isActive?: boolean \| ((value?: string) => boolean);\n}\n\n/\n Standard typography style (`titleSmall`) for navigation item label text.\n /\nexport const NavigationItemLabelTypography = typography.titleSmall;\n\n/\n CSS class for individual navigation item styling, interactive state layers, and padding.\n */\nexport const NavigationItemStyles = styles[\"item\"];\n"],"mappings":";oCCkCaG,IAAgCF,EAAW,YAK3CG,IAAuBJ,EAAOK"}
1	+ {"version":3,"file":"core9","names":["styles","typography","navigationItem_module_default","NavigationItemLabelTypography","NavigationItemStyles","\"item\""],"sources":["../../src/components/Navigation/NavigationItem/core/navigationItem.module.css","../../src/components/Navigation/NavigationItem/core/navigationItem.ts"],"sourcesContent":["/* configurable tokens\n\n --md-navigation-item-active-background\n\n --md-navigation-item-label-color\n* --md-navigation-item-icon-color\n\n --md-navigation-item-active-label-color\n* --md-navigation-item-active-icon-color\n\n --md-navigation-item-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .item {\n --_md-navigation-item-active-background: var(\n --md-navigation-item-active-background,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-navigation-item-label-color: var(\n --md-navigation-item-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-navigation-item-icon-color: var(\n --md-navigation-item-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n --_md-navigation-item-active-label-color: var(\n --md-navigation-item-active-label-color,\n var(--md-sys-color-secondary)\n );\n --_md-navigation-item-active-icon-color: var(\n --md-navigation-item-active-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-state-layer-color: var(\n --md-navigation-item-state-layer-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-padding-block: var(--md-sys-layout-space-16);\n --_md-navigation-item-padding-inline: var(--md-sys-layout-space-16);\n --_md-navigation-item-gap: var(--md-sys-layout-space-8);\n\n --_background: transparent;\n --_icon-color: var(--_md-navigation-item-icon-color);\n --_label-color: var(--_md-navigation-item-label-color);\n\n --_state-color: var(--_md-navigation-item-state-layer-color);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n all: unset;\n\n position: relative;\n\n background-color: var(--_background);\n color: var(--_label-color);\n\n padding-inline: var(--_md-navigation-item-padding-inline);\n padding-block: var(--_md-navigation-item-padding-block);\n\n display: flex;\n align-items: center;\n gap: var(--_md-navigation-item-gap);\n\n cursor: pointer;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-active] {\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n\n [data-nav-icon] {\n color: var(--_icon-color);\n }\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n }\n\n / state layer /\n .item::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .item[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationItem.module.css\";\n\n/*\n Common configuration properties shared across navigation items ([`NavigationLink`](src/components/Navigation/NavigationItem/NavigationLink/NavigationLink.tsx)\n * and [`NavigationButton`](src/components/Navigation/NavigationItem/NavigationButton/NavigationButton.tsx)).\n /\nexport interface NavigationItemProps {\n /\n Primary label content for the navigation item.\n /\n label: ReactNode;\n\n /\n Optional icon displayed when the navigation item is in its inactive state.\n /\n icon?: LucideIcon;\n\n /\n Optional alternate icon displayed when the navigation item is in its active state.\n /\n activeIcon?: LucideIcon;\n\n /\n Override flag or predicate function evaluating whether the item is currently active.\n /\n isActive?: boolean \| ((value?: string) => boolean);\n}\n\n/\n Standard typography style (`titleSmall`) for navigation item label text.\n /\nexport const NavigationItemLabelTypography = typography.titleSmall;\n\n/\n CSS class for individual navigation item styling, interactive state layers, and padding.\n */\nexport const NavigationItemStyles = styles[\"item\"];\n"],"mappings":";A,oCCkCaG,IAAgCF,EAAW,YAK3CG,IAAuBJ,EAAOK"}

package/dist/chunks/navContext CHANGED Viewed

@@ -1,12 +1,11 @@
 import { createContext as e, useContext as t } from "react";
-//#region src/components/Navigation/Navigation/navContext.ts
+// src/components/Navigation/Navigation/navContext.ts
 var n = e(null);
 function r() {
 	let e = t(n);
 	if (e === null) throw Error("Missing navigation state. Ensure this component is rendered within Navigation component.");
 	return e;
 }
-//#endregion
 export { r as n, n as t };
 //# sourceMappingURL=navContext.map

package/dist/chunks/navContext.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navContext","names":["NavigationContext","createContext","useNavigationContext","ctx","useContext"],"sources":["../../src/components/Navigation/Navigation/navContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { IsButtonActive, IsLinkActive } from \"./types\";\n\n/*\n Context value carrying active predicate functions for child navigation items.\n /\nexport type NavigationContextType = {\n /\n Active predicate function for links.\n /\n isLinkActive?: IsLinkActive;\n /\n Active predicate function for buttons.\n /\n isButtonActive?: IsButtonActive;\n};\n\n/\n React context providing link and button active state predicates to descendant navigation items.\n /\nexport const NavigationContext = createContext<NavigationContextType \| null>(\n null\n);\n\n/\n Hook to access active state predicates (`isLinkActive` and `isButtonActive`) from the parent\n * [`Navigation`](~~file:///home/rohan/work/adgytec/adgytec-web-ui-components/~~src/components/Navigation/Navigation/Navigation.tsx) container.\n \n @throws If called outside of a `Navigation` component.\n * @returns The current {@link NavigationContextType}.\n */\nexport function useNavigationContext() {\n const ctx = useContext(NavigationContext);\n if (ctx === null) {\n throw new Error(\n \"Missing navigation state. Ensure this component is rendered within Navigation component.\"\n );\n }\n\n return ctx;\n}\n"],"mappings":";;AAoBA,IAAaA,IAAoBC,EAC7B,IACJ;AASA,SAAOC,IAAA;CACH,IAAAC,IAAYC,EAAWJ,CAAiB;CACxC,IAAIG,MAAQ,MACR,MAAU,MACN,0FACJ;CACH,OAEMA;AAAG"}
1	+ {"version":3,"file":"navContext","names":["NavigationContext","createContext","useNavigationContext","ctx","useContext"],"sources":["../../src/components/Navigation/Navigation/navContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { IsButtonActive, IsLinkActive } from \"./types\";\n\n/*\n Context value carrying active predicate functions for child navigation items.\n /\nexport type NavigationContextType = {\n /\n Active predicate function for links.\n /\n isLinkActive?: IsLinkActive;\n /\n Active predicate function for buttons.\n /\n isButtonActive?: IsButtonActive;\n};\n\n/\n React context providing link and button active state predicates to descendant navigation items.\n /\nexport const NavigationContext = createContext<NavigationContextType \| null>(\n null\n);\n\n/\n Hook to access active state predicates (`isLinkActive` and `isButtonActive`) from the parent\n * [`Navigation`](src/components/Navigation/Navigation/Navigation.tsx) container.\n \n @throws If called outside of a `Navigation` component.\n * @returns The current {@link NavigationContextType}.\n */\nexport function useNavigationContext() {\n const ctx = useContext(NavigationContext);\n if (ctx === null) {\n throw new Error(\n \"Missing navigation state. Ensure this component is rendered within Navigation component.\"\n );\n }\n\n return ctx;\n}\n"],"mappings":";;AAoBA,IAAaA,IAAoBC,EAC7B,IACJ;AASA,SAAOC,IAAA;CACH,IAAAC,IAAYC,EAAWJ,CAAiB;CACxC,IAAIG,MAAQ,MACR,MAAU,MACN,0FACJ;CACH,OAEMA;AAAG"}

package/dist/chunks/tapTarget CHANGED Viewed

@@ -2,7 +2,6 @@ import '../assets/tapTarget.css';var e = {
 	after: "_after_1r9l4_1",
 	before: "_before_1r9l4_2"
 }, t = e.after, n = e.before;
-//#endregion
 export { n, t };
 //# sourceMappingURL=tapTarget.map

package/dist/chunks/tapTarget.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tapTarget","names":["styles","tapTarget_module_default","TapTarget","\"after\"","TapTargetBefore","\"before\""],"sources":["../../src/utils/tapTarget/tapTarget.module.css","../../src/utils/tapTarget/tapTarget.ts"],"sourcesContent":[".after,\n.before {\n --min-tap-target-size: calc(48 * var(--dp, 1px));\n --tap-target-default-size: 100%;\n\n position: var(--position, relative);\n\n &[data-disabled] {\n --min-tap-target-size: 0;\n --tap-target-default-size: 0px;\n }\n}\n\n.after::after,\n.before::before {\n content: \"\";\n position: absolute;\n\n min-inline-size: var(--min-tap-target-size);\n min-block-size: var(--min-tap-target-size);\n\n inline-size: var(--tap-target-default-size);\n block-size: var(--tap-target-default-size);\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n}\n","import styles from \"./tapTarget.module.css\";\n\n/*\n CSS class name that ensures an element meets the minimum accessible touch target size (48x48px / 48dp)\n * using an invisible centered `::after` pseudo-element.\n \n Implements WCAG Target Size recommendations (48x48px minimum touch area) for small or compact\n * interactive elements without affecting the visual layout or dimensions of the element itself.\n \n Automatically collapses to `0px` when the element has the `[data-disabled]` attribute.\n \n Extensively used across interactive controls including buttons, icon buttons, checkboxes,\n * radio buttons, switches, and avatar triggers.\n \n @remarks\n * If the element or an ancestor container applies `overflow: hidden` or `contain: paint`,\n * the pseudo-element's expanded hit area will be clipped to that boundary.\n \n @example\n * ```tsx\n * import { TapTarget } from \"@/utils\";\n * import clsx from \"clsx\";\n \n function CustomIconButton({ icon: Icon, onClick }) {\n * return (\n * <button type=\"button\" className={clsx(\"icon-button\", TapTarget)} onClick={onClick}>\n * <Icon />\n * </button>\n * );\n * }\n * ```\n /\nexport const TapTarget = styles[\"after\"];\n\n/\n CSS class name that ensures an element meets the minimum accessible touch target size (48x48px / 48dp)\n * using an invisible centered `::before` pseudo-element.\n \n Alternative to {@link TapTarget} for components where the `::after` pseudo-element is already reserved\n * or in use (such as for focus rings, badges, or ripples).\n \n Automatically collapses to `0px` when the element has the `[data-disabled]` attribute.\n \n @remarks\n * If the element or an ancestor container applies `overflow: hidden` or `contain: paint`,\n * the pseudo-element's expanded hit area will be clipped to that boundary.\n \n @example\n * ```tsx\n * import { TapTargetBefore } from \"@/utils\";\n * import clsx from \"clsx\";\n \n function CustomAction({ onClick, children }) {\n * return (\n * <button type=\"button\" className={clsx(\"custom-action\", TapTargetBefore)} onClick={onClick}>\n * {children}\n * </button>\n * );\n * }\n * ```\n */\nexport const TapTargetBefore = styles[\"before\"];\n"],"mappings":";;;GCgCaE,IAAYF,EAAOG,OA6BnBC,IAAkBJ,EAAOK"}
1	+ {"version":3,"file":"tapTarget","names":["styles","tapTarget_module_default","TapTarget","\"after\"","TapTargetBefore","\"before\""],"sources":["../../src/utils/tapTarget/tapTarget.module.css","../../src/utils/tapTarget/tapTarget.ts"],"sourcesContent":[".after,\n.before {\n --min-tap-target-size: calc(48 * var(--dp, 1px));\n --tap-target-default-size: 100%;\n\n position: var(--position, relative);\n\n &[data-disabled] {\n --min-tap-target-size: 0;\n --tap-target-default-size: 0px;\n }\n}\n\n.after::after,\n.before::before {\n content: \"\";\n position: absolute;\n\n min-inline-size: var(--min-tap-target-size);\n min-block-size: var(--min-tap-target-size);\n\n inline-size: var(--tap-target-default-size);\n block-size: var(--tap-target-default-size);\n\n inset-inline-start: 50%;\n inset-block-start: 50%;\n translate: -50% -50%;\n}\n","import styles from \"./tapTarget.module.css\";\n\n/*\n CSS class name that ensures an element meets the minimum accessible touch target size (48x48px / 48dp)\n * using an invisible centered `::after` pseudo-element.\n \n Implements WCAG Target Size recommendations (48x48px minimum touch area) for small or compact\n * interactive elements without affecting the visual layout or dimensions of the element itself.\n \n Automatically collapses to `0px` when the element has the `[data-disabled]` attribute.\n \n Extensively used across interactive controls including buttons, icon buttons, checkboxes,\n * radio buttons, switches, and avatar triggers.\n \n @remarks\n * If the element or an ancestor container applies `overflow: hidden` or `contain: paint`,\n * the pseudo-element's expanded hit area will be clipped to that boundary.\n \n @example\n * ```tsx\n * import { TapTarget } from \"@/utils\";\n * import clsx from \"clsx\";\n \n function CustomIconButton({ icon: Icon, onClick }) {\n * return (\n * <button type=\"button\" className={clsx(\"icon-button\", TapTarget)} onClick={onClick}>\n * <Icon />\n * </button>\n * );\n * }\n * ```\n /\nexport const TapTarget = styles[\"after\"];\n\n/\n CSS class name that ensures an element meets the minimum accessible touch target size (48x48px / 48dp)\n * using an invisible centered `::before` pseudo-element.\n \n Alternative to {@link TapTarget} for components where the `::after` pseudo-element is already reserved\n * or in use (such as for focus rings, badges, or ripples).\n \n Automatically collapses to `0px` when the element has the `[data-disabled]` attribute.\n \n @remarks\n * If the element or an ancestor container applies `overflow: hidden` or `contain: paint`,\n * the pseudo-element's expanded hit area will be clipped to that boundary.\n \n @example\n * ```tsx\n * import { TapTargetBefore } from \"@/utils\";\n * import clsx from \"clsx\";\n \n function CustomAction({ onClick, children }) {\n * return (\n * <button type=\"button\" className={clsx(\"custom-action\", TapTargetBefore)} onClick={onClick}>\n * {children}\n * </button>\n * );\n * }\n * ```\n */\nexport const TapTargetBefore = styles[\"before\"];\n"],"mappings":";;;A,GCgCaE,IAAYF,EAAOG,OA6BnBC,IAAkBJ,EAAOK"}

package/dist/chunks/types CHANGED Viewed

@@ -1,6 +1,5 @@
-//#region src/components/Card/Card/types.ts
+// src/components/Card/Card/types.ts
 var e = 12, t = 24;
-//#endregion
 export { e as n, t };
 //# sourceMappingURL=types.map