@universityofmaryland/web-components-library 1.16.4 → 1.17.0-beta.1

package/dist/{sticky-columns-CRvJYWgm.js → index-BuxmclJv.js}

@@ -1,89 +1,81 @@
 import { layout as s } from "@universityofmaryland/web-elements-library/composite";
-import * as r from "@universityofmaryland/web-utilities-library/validation";
-import { Register as n, Attributes as e, Slots as a, Lifecycle as m } from "@universityofmaryland/web-model-library";
+import * as g from "@universityofmaryland/web-utilities-library/validation";
+import { Register as n, Attributes as e, Slots as a, Lifecycle as C } from "@universityofmaryland/web-model-library";
 import { createSlot as i } from "@universityofmaryland/web-utilities-library/elements";
-import { layout as d } from "@universityofmaryland/web-elements-library/atomic";
-const u = "umd-element-logo", p = {
+import { layout as h } from "@universityofmaryland/web-elements-library/atomic";
+const S = "umd-element-logo", T = {
   image: {
     required: !0
   }
-}, g = (t) => s.box.logo({
-  image: r.getValidatedSlotImage({
+}, k = (t) => s.box.logo({
+  image: g.getValidatedSlotImage({
     element: t,
     slotName: a.name.assets.image
   }),
   text: a.text.default({ element: t }),
   isThemeDark: e.isTheme.dark({ element: t }),
   isBordered: e.isVisual.bordered({ element: t })
-}), C = n.webComponent({
-  tagName: u,
-  slots: p,
-  createComponent: g
-});
-var R = C;
-const b = "umd-layout-image-expand", h = {
+}), c = n.webComponent({
+  tagName: S,
+  slots: T,
+  createComponent: k
+}), f = "umd-layout-image-expand", L = {
   content: {
     required: !0
   },
   image: {
     required: !0
   }
-}, f = (t) => s.image.expand({
+}, N = (t) => s.image.expand({
   content: i("content"),
-  image: r.getValidatedSlotImage({
+  image: g.getValidatedSlotImage({
     element: t,
     slotName: a.name.assets.image
   })
-}), v = n.webComponent({
-  tagName: b,
-  slots: h,
-  createComponent: f
-});
-var Y = v;
-const y = "umd-element-modal", $ = (t) => {
+}), r = n.webComponent({
+  tagName: f,
+  slots: L,
+  createComponent: N
+}), $ = "umd-element-modal", v = (t) => {
   const o = () => {
     t.setAttribute(
       e.names.layout.hidden,
       e.values.state.TRUE
     );
-  }, l = {
+  }, b = {
     content: a.content.default({ element: t, isDefaultStyling: !1 }),
     isHidden: e.isLayout.hidden({ element: t }),
     context: t,
     callback: o
   };
-  return d.overlay.modal(l);
-}, k = e.handler.common.visualShowHide({
+  return h.overlay.modal(b);
+}, I = e.handler.common.visualShowHide({
   onShow: (t) => t.events?.show(),
   onHide: (t) => t.events?.hide()
-});
-var E = n.webComponent({
-  tagName: y,
-  attributes: k,
-  createComponent: $
-});
-const N = "umd-element-scroll-top", _ = (t) => {
+}), m = n.webComponent({
+  tagName: $,
+  attributes: I,
+  createComponent: v
+}), x = "umd-element-scroll-top", A = (t) => {
   const o = {
     isFixed: t.hasAttribute(
       e.names.deprecated.layout.LAYOUT_FIXED
     )
   };
   return s.scrollTop(o);
-};
-var K = n.webComponent({
-  tagName: N,
-  createComponent: _,
-  afterConnect: m.hooks.loadOnConnect
-});
-const c = ({
+}, l = n.webComponent({
+  tagName: x,
+  createComponent: A,
+  afterConnect: C.hooks.loadOnConnect
+}), y = ({
   element: t,
   isThemeDark: o
 }) => ({
   headline: a.headline.default({ element: t }),
   actions: a.actions.default({ element: t }),
   isThemeDark: o
-}), T = "umd-element-section-intro", w = (t) => s.sectionIntro.small({
-  ...c({
+}), w = "umd-element-section-intro", O = (t) => s.sectionIntro.small({
+  ...y({
     element: t,
     isThemeDark: e.isTheme.dark({ element: t })
   }),
@@ -92,30 +84,26 @@ const c = ({
     e.names.deprecated.option.OPTIONAL_HAS_SEPARATOR
   ),
   includesAnimation: e.includesFeature.animation({ element: t })
-}), S = n.webComponent({
-  tagName: T,
-  createComponent: w,
-  afterConnect: m.hooks.loadAnimation
-});
-var M = S;
-const A = "umd-element-section-intro-wide", x = (t) => s.sectionIntro.wide(
-  c({
+}), u = n.webComponent({
+  tagName: w,
+  createComponent: O,
+  afterConnect: C.hooks.loadAnimation
+}), _ = "umd-element-section-intro-wide", P = (t) => s.sectionIntro.wide(
+  y({
     element: t,
     isThemeDark: e.isTheme.dark({ element: t })
   })
-), I = n.webComponent({
-  tagName: A,
-  createComponent: x
-});
-var B = I;
-const O = "umd-element-sticky-columns", P = {
+), d = n.webComponent({
+  tagName: _,
+  createComponent: P
+}), D = "umd-element-sticky-columns", q = {
   "sticky-column": {
     required: !0
   },
   "static-column": {
     required: !0
   }
-}, L = e.handler.combine(
+}, E = e.handler.combine(
   e.handler.observe.visuallyPosition({
     callback: (t, o) => t.events?.setPosition({ value: o })
   }),
@@ -124,25 +112,41 @@ const O = "umd-element-sticky-columns", P = {
     name: e.names.deprecated.layout.LAYOUT_STICKY_TOP,
     callback: (t, o) => t.events?.setPosition({ value: o })
   })
-), D = (t) => s.stickyColumns({
+), U = (t) => s.stickyColumns({
   stickyColumn: i(a.name.STICKY_COLUMN),
   staticColumn: i(a.name.STATIC_COLUMN),
   isStickyLast: !e.isVisual.stickyFirst({ element: t }),
   topPosition: e.getValue.topPosition({ element: t })
-}), q = n.webComponent({
-  tagName: O,
-  slots: P,
-  createComponent: D,
-  attributes: L
-});
-var X = q;
+}), p = n.webComponent({
+  tagName: D,
+  slots: q,
+  createComponent: U,
+  attributes: E
+}), R = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LayoutBoxLogo: c,
+  LayoutImageExpand: r,
+  LayoutModal: m,
+  LayoutScrollTop: l,
+  LayoutSectionIntroSmall: u,
+  LayoutSectionIntroWide: d,
+  LayoutStickyColumns: p,
+  boxLogo: c,
+  imageExpand: r,
+  modal: m,
+  scrollTop: l,
+  sectionIntroSmall: u,
+  sectionIntroWide: d,
+  stickyColumns: p
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  M as a,
-  R as b,
-  X as c,
-  Y as i,
-  E as m,
-  K as s,
-  B as w
+  c as L,
+  r as a,
+  m as b,
+  l as c,
+  u as d,
+  d as e,
+  p as f,
+  R as l
 };
-//# sourceMappingURL=sticky-columns-CRvJYWgm.js.map
+//# sourceMappingURL=index-BuxmclJv.js.map

package/dist/index-BuxmclJv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BuxmclJv.js","sources":["../source/web-components/layout/box-logo.ts","../source/web-components/layout/image-expand.ts","../source/web-components/layout/modal.ts","../source/web-components/layout/scroll-top.ts","../source/web-components/layout/section-intro/common.ts","../source/web-components/layout/section-intro/small.ts","../source/web-components/layout/section-intro/wide.ts","../source/web-components/layout/sticky-columns.ts"],"sourcesContent":["import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport * as validation from '@universityofmaryland/web-utilities-library/validation';\nimport { Attributes, Slots, Register } from '@universityofmaryland/web-model-library';\nimport {\n  CreateComponentFunction,\n  ComponentRegistration,\n  SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-logo';\n\nconst slots: SlotConfiguration = {\n  image: {\n    required: true,\n  },\n};\n\nconst createComponent: CreateComponentFunction = (element) =>\n  layout.box.logo({\n    image: validation.getValidatedSlotImage({\n      element,\n      slotName: Slots.name.assets.image,\n    }) as HTMLImageElement,\n    text: Slots.text.default({ element }),\n    isThemeDark: Attributes.isTheme.dark({ element }),\n    isBordered: Attributes.isVisual.bordered({ element }),\n  });\n\n/**\n * Box Logo\n *\n * A layout component that displays a logo image with optional text content in a boxed layout.\n * Commonly used for brand identity sections, partner logos, or featured organization displays.\n *\n * ## Custom Element\n * `<umd-element-logo>`\n *\n * ## Slots\n * - `image` - Logo image (required, accepts: img)\n * - Default slot - Optional text content to display alongside the logo\n *\n * ## Attributes\n * - `data-theme` - Theme options:\n *   - `dark` - Dark background with light text\n * - `data-visual` - Visual styling options:\n *   - `bordered` - Adds a border around the component\n *\n * @example\n * ```html\n * <!-- Basic logo display -->\n * <umd-element-logo>\n *   <img slot=\"image\" src=\"logo.png\" alt=\"Company Logo\" />\n * </umd-element-logo>\n * ```\n *\n * @example\n * ```html\n * <!-- Logo with text and dark theme -->\n * <umd-element-logo data-theme=\"dark\">\n *   <img slot=\"image\" src=\"partner-logo.png\" alt=\"Partner Logo\" />\n *   <p>Official University Partner</p>\n * </umd-element-logo>\n * ```\n *\n * @example\n * ```html\n * <!-- Bordered logo box -->\n * <umd-element-logo data-visual=\"bordered\">\n *   <img slot=\"image\" src=\"sponsor.png\" alt=\"Sponsor Logo\" />\n *   <span>Gold Sponsor</span>\n * </umd-element-logo>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutBoxLogo: ComponentRegistration = Register.webComponent({\n  tagName,\n  slots,\n  createComponent,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutBoxLogo as boxLogo };\n","import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport { createSlot } from '@universityofmaryland/web-utilities-library/elements';\nimport * as validation from '@universityofmaryland/web-utilities-library/validation';\nimport { Slots, Register } from '@universityofmaryland/web-model-library';\nimport {\n  CreateComponentFunction,\n  ComponentRegistration,\n  SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-layout-image-expand';\n\nconst slots: SlotConfiguration = {\n  content: {\n    required: true,\n  },\n  image: {\n    required: true,\n  },\n};\n\nconst createComponent: CreateComponentFunction = (element) =>\n  layout.image.expand({\n    content: createSlot('content'),\n    image: validation.getValidatedSlotImage({\n      element,\n      slotName: Slots.name.assets.image,\n    }) as HTMLImageElement,\n  });\n\n/**\n * Image Expand Layout\n *\n * A layout component that presents content alongside an expandable image. The image can extend\n * beyond the normal content boundaries to create visual impact. Ideal for showcasing featured\n * content, hero sections, or highlighting important information with striking visuals.\n *\n * ## Custom Element\n * `<umd-layout-image-expand>`\n *\n * ## Slots\n * - `content` - Main content area (required, accepts: any elements)\n * - `image` - Featured image that can expand (required, accepts: img)\n *\n * @example\n * ```html\n * <!-- Basic image expand layout -->\n * <umd-layout-image-expand>\n *   <div slot=\"content\">\n *     <h2>Featured Research</h2>\n *     <p>Breakthrough discoveries in quantum computing...</p>\n *   </div>\n *   <img slot=\"image\" src=\"research-lab.jpg\" alt=\"Quantum Lab\" />\n * </umd-layout-image-expand>\n * ```\n *\n * @example\n * ```html\n * <!-- With rich content -->\n * <umd-layout-image-expand>\n *   <article slot=\"content\">\n *     <h1>Campus Innovation Hub</h1>\n *     <p>The new Innovation Hub brings together students, faculty, and industry partners...</p>\n *     <a href=\"/innovation\">Learn More</a>\n *   </article>\n *   <img slot=\"image\" src=\"innovation-hub.jpg\" alt=\"Innovation Hub Interior\" />\n * </umd-layout-image-expand>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutImageExpand: ComponentRegistration = Register.webComponent({\n  tagName,\n  slots,\n  createComponent,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutImageExpand as imageExpand };\n","import { layout } from '@universityofmaryland/web-elements-library/atomic';\nimport { Attributes, Slots, Register } from '@universityofmaryland/web-model-library';\nimport { CreateComponentFunction, ComponentRegistration, LayoutProps } from '../../_types';\n\ninterface ModalProps extends LayoutProps {\n  content: HTMLElement | null;\n  context: HTMLElement;\n  callback: () => void;\n}\n\nconst tagName = 'umd-element-modal';\n\nconst createComponent: CreateComponentFunction = (element) => {\n  const callback = () => {\n    element.setAttribute(\n      Attributes.names.layout.hidden,\n      Attributes.values.state.TRUE,\n    );\n  };\n\n  const props: ModalProps = {\n    content: Slots.content.default({ element, isDefaultStyling: false }),\n    isHidden: Attributes.isLayout.hidden({ element }),\n    context: element,\n    callback,\n  };\n\n  return layout.overlay.modal(props);\n};\n\nconst attributes = Attributes.handler.common.visualShowHide({\n  onShow: (element) => element.events?.show(),\n  onHide: (element) => element.events?.hide(),\n});\n\n/**\n * Modal\n *\n * A modal overlay component that displays content in a focused dialog window.\n * Includes backdrop, close functionality, and proper focus management for accessibility.\n * The modal can be controlled programmatically through observed attributes.\n *\n * ## Custom Element\n * `<umd-element-modal>`\n *\n * ## Slots\n * - Default slot - Content to display inside the modal\n *\n * ## Attributes\n * - `data-layout-hidden` - Initial visibility state:\n *   - `true` - Modal starts hidden\n *   - Absence implies visible\n *\n * ## Observed Attributes\n * - `data-visual-open` - Shows the modal when set to \"true\"\n * - `data-visual-closed` - Hides the modal when set to \"true\"\n *\n * @example\n * ```html\n * <!-- Basic modal -->\n * <umd-element-modal data-layout-hidden=\"true\">\n *   <h2>Welcome</h2>\n *   <p>This is modal content.</p>\n *   <button>Close</button>\n * </umd-element-modal>\n * ```\n *\n * @example\n * ```html\n * <!-- Programmatic control -->\n * <button id=\"open-modal\">Open Modal</button>\n * <umd-element-modal id=\"my-modal\" data-layout-hidden=\"true\">\n *   <div class=\"modal-content\">\n *     <h2>Important Information</h2>\n *     <p>Please read this carefully...</p>\n *     <button id=\"close-modal\">I Understand</button>\n *   </div>\n * </umd-element-modal>\n *\n * <script>\n *   const modal = document.getElementById('my-modal');\n *   document.getElementById('open-modal').addEventListener('click', () => {\n *     modal.setAttribute('data-visual-open', 'true');\n *   });\n *   document.getElementById('close-modal').addEventListener('click', () => {\n *     modal.setAttribute('data-visual-closed', 'true');\n *   });\n * </script>\n * ```\n *\n * @example\n * ```html\n * <!-- Form modal -->\n * <umd-element-modal data-layout-hidden=\"true\">\n *   <form>\n *     <h2>Contact Us</h2>\n *     <label>\n *       Name:\n *       <input type=\"text\" name=\"name\" required>\n *     </label>\n *     <label>\n *       Email:\n *       <input type=\"email\" name=\"email\" required>\n *     </label>\n *     <textarea name=\"message\" placeholder=\"Your message\"></textarea>\n *     <button type=\"submit\">Send</button>\n *   </form>\n * </umd-element-modal>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutModal: ComponentRegistration = Register.webComponent({\n  tagName,\n  attributes,\n  createComponent,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutModal as modal };\n","import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport { Attributes, Register, Lifecycle } from '@universityofmaryland/web-model-library';\nimport { CreateComponentFunction, ComponentRegistration, LayoutProps } from '../../_types';\n\ninterface ScrollTopProps extends Pick<LayoutProps, 'isFixed'> {}\n\nconst tagName = 'umd-element-scroll-top';\n\nconst createComponent: CreateComponentFunction = (element) => {\n  const props: ScrollTopProps = {\n    isFixed: element.hasAttribute(\n      Attributes.names.deprecated.layout.LAYOUT_FIXED,\n    ),\n  };\n\n  return layout.scrollTop(props);\n};\n\n/**\n * Scroll to Top\n *\n * A utility component that provides a smooth scroll-to-top functionality.\n * Displays a button that appears after scrolling down and returns users to the top of the page.\n * Can be positioned fixed or absolute within its container.\n *\n * ## Custom Element\n * `<umd-element-scroll-top>`\n *\n * ## Attributes\n * - `data-layout-fixed` - Positioning mode:\n *   - When present - Fixed positioning relative to viewport\n *   - When absent - Absolute positioning within parent container\n *\n * @example\n * ```html\n * <!-- Basic scroll to top button -->\n * <umd-element-scroll-top></umd-element-scroll-top>\n * ```\n *\n * @example\n * ```html\n * <!-- Fixed position scroll to top -->\n * <umd-element-scroll-top data-layout-fixed></umd-element-scroll-top>\n * ```\n *\n * @example\n * ```html\n * <!-- Within a specific container -->\n * <div class=\"content-wrapper\" style=\"position: relative;\">\n *   <article>\n *     <!-- Long content here -->\n *   </article>\n *   <umd-element-scroll-top></umd-element-scroll-top>\n * </div>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutScrollTop: ComponentRegistration = Register.webComponent({\n  tagName,\n  createComponent,\n  afterConnect: Lifecycle.hooks.loadOnConnect,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutScrollTop as scrollTop };\n","import { Slots } from '@universityofmaryland/web-model-library';\n\nexport const CommonIntroData = ({\n  element,\n  isThemeDark,\n}: {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n}) => ({\n  headline: Slots.headline.default({ element }),\n  actions: Slots.actions.default({ element }),\n  isThemeDark,\n});\n","import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport { Attributes, Slots, Register, Lifecycle } from '@universityofmaryland/web-model-library';\nimport { CommonIntroData } from './common';\nimport {\n  CreateComponentFunction,\n  ComponentRegistration,\n} from '../../../_types';\n\nconst tagName = 'umd-element-section-intro';\n\nconst createComponent: CreateComponentFunction = (element) =>\n  layout.sectionIntro.small({\n    ...CommonIntroData({\n      element,\n      isThemeDark: Attributes.isTheme.dark({ element }),\n    }),\n    text: Slots.text.default({ element }),\n    hasSeparator: element.hasAttribute(\n      Attributes.names.deprecated.option.OPTIONAL_HAS_SEPARATOR,\n    ),\n    includesAnimation: Attributes.includesFeature.animation({ element }),\n  });\n\n/**\n * Section Introduction (Small)\n *\n * A compact section introduction component that provides a headline, descriptive text,\n * and optional action buttons. Designed for introducing content sections with minimal\n * space usage. Supports animation on scroll and optional visual separator.\n *\n * ## Custom Element\n * `<umd-element-section-intro>`\n *\n * ## Slots\n * - `headline` - Section headline/title\n * - `actions` - Call-to-action buttons or links\n * - Default slot - Descriptive text content\n *\n * ## Attributes\n * - `data-theme` - Theme options:\n *   - `dark` - Dark background with light text\n * - `data-has-separator` - Adds visual separator line\n * - `data-animation` - Enable scroll-triggered animations:\n *   - `true` - Enables entrance animations\n *\n * @example\n * ```html\n * <!-- Basic section intro -->\n * <umd-element-section-intro>\n *   <h2 slot=\"headline\">Our Mission</h2>\n *   <p>We are committed to excellence in education and research.</p>\n * </umd-element-section-intro>\n * ```\n *\n * @example\n * ```html\n * <!-- With actions and separator -->\n * <umd-element-section-intro data-has-separator>\n *   <h2 slot=\"headline\">Get Started</h2>\n *   <p>Join our community of innovators and leaders.</p>\n *   <div slot=\"actions\">\n *     <a href=\"/apply\">Apply Now</a>\n *     <a href=\"/info\">Learn More</a>\n *   </div>\n * </umd-element-section-intro>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme with animation -->\n * <umd-element-section-intro data-theme=\"dark\" data-animation=\"true\">\n *   <h2 slot=\"headline\">Research Excellence</h2>\n *   <p>Discover groundbreaking research across multiple disciplines.</p>\n *   <a slot=\"actions\" href=\"/research\">Explore Research</a>\n * </umd-element-section-intro>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutSectionIntroSmall: ComponentRegistration = Register.webComponent({\n  tagName,\n  createComponent,\n  afterConnect: Lifecycle.hooks.loadAnimation,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutSectionIntroSmall as sectionIntroSmall };\n","import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport { Attributes, Register } from '@universityofmaryland/web-model-library';\nimport { CommonIntroData } from './common';\nimport {\n  CreateComponentFunction,\n  ComponentRegistration,\n} from '../../../_types';\n\nconst tagName = 'umd-element-section-intro-wide';\n\nconst createComponent: CreateComponentFunction = (element) =>\n  layout.sectionIntro.wide(\n    CommonIntroData({\n      element,\n      isThemeDark: Attributes.isTheme.dark({ element }),\n    }),\n  );\n\n/**\n * Section Introduction (Wide)\n *\n * A full-width section introduction component that spans the entire container width.\n * Provides a bold headline and optional action buttons for high-impact section openings.\n * Ideal for major content divisions or landing page sections.\n *\n * ## Custom Element\n * `<umd-element-section-intro-wide>`\n *\n * ## Slots\n * - `headline` - Section headline/title\n * - `actions` - Call-to-action buttons or links\n *\n * ## Attributes\n * - `data-theme` - Theme options:\n *   - `dark` - Dark background with light text\n *\n * @example\n * ```html\n * <!-- Basic wide section intro -->\n * <umd-element-section-intro-wide>\n *   <h1 slot=\"headline\">Welcome to the University of Maryland</h1>\n * </umd-element-section-intro-wide>\n * ```\n *\n * @example\n * ```html\n * <!-- With call-to-action -->\n * <umd-element-section-intro-wide>\n *   <h2 slot=\"headline\">Discover Your Path</h2>\n *   <div slot=\"actions\">\n *     <a href=\"/programs\" class=\"button\">Explore Programs</a>\n *     <a href=\"/visit\" class=\"button-outline\">Plan a Visit</a>\n *   </div>\n * </umd-element-section-intro-wide>\n * ```\n *\n * @example\n * ```html\n * <!-- Dark theme variant -->\n * <umd-element-section-intro-wide data-theme=\"dark\">\n *   <h1 slot=\"headline\">Innovation Starts Here</h1>\n *   <a slot=\"actions\" href=\"/innovation\">Join the Movement</a>\n * </umd-element-section-intro-wide>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutSectionIntroWide: ComponentRegistration = Register.webComponent({\n  tagName,\n  createComponent,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutSectionIntroWide as sectionIntroWide };\n","import { layout } from '@universityofmaryland/web-elements-library/composite';\nimport { createSlot } from '@universityofmaryland/web-utilities-library/elements';\nimport { Attributes, Slots, Register } from '@universityofmaryland/web-model-library';\nimport {\n  CreateComponentFunction,\n  ComponentRegistration,\n  SlotConfiguration,\n} from '../../_types';\n\nconst tagName = 'umd-element-sticky-columns';\n\nconst slots: SlotConfiguration = {\n  [`sticky-column`]: {\n    required: true,\n  },\n  [`static-column`]: {\n    required: true,\n  },\n};\n\nconst attributes = Attributes.handler.combine(\n  Attributes.handler.observe.visuallyPosition({\n    callback: (element, topPosition) =>\n      element.events?.setPosition({ value: topPosition }),\n  }),\n  // Deprecated\n  Attributes.handler.observe.visuallyPosition({\n    name: Attributes.names.deprecated.layout.LAYOUT_STICKY_TOP,\n    callback: (element, topPosition) =>\n      element.events?.setPosition({ value: topPosition }),\n  }),\n);\n\nconst createComponent: CreateComponentFunction = (element) =>\n  layout.stickyColumns({\n    stickyColumn: createSlot(Slots.name.STICKY_COLUMN),\n    staticColumn: createSlot(Slots.name.STATIC_COLUMN),\n    isStickyLast: !Attributes.isVisual.stickyFirst({ element }),\n    topPosition: Attributes.getValue.topPosition({ element }),\n  });\n\n/**\n * Sticky Columns\n *\n * A two-column layout component where one column remains sticky during scroll while\n * the other scrolls normally. Useful for keeping navigation, table of contents, or\n * supplementary information visible while scrolling through main content.\n *\n * ## Custom Element\n * `<umd-element-sticky-columns>`\n *\n * ## Slots\n * - `sticky-column` - Content that remains fixed during scroll (required)\n * - `static-column` - Content that scrolls normally (required)\n *\n * ## Attributes\n * - `data-visual` - Column order options:\n *   - `sticky-first` - Sticky column appears first (left on desktop)\n *\n * ## Observed Attributes\n * - `data-visual-position` - Sets the top position offset for the sticky column (in pixels)\n *\n * @example\n * ```html\n * <!-- Basic sticky columns with navigation -->\n * <umd-element-sticky-columns>\n *   <nav slot=\"sticky-column\">\n *     <ul>\n *       <li><a href=\"#section1\">Section 1</a></li>\n *       <li><a href=\"#section2\">Section 2</a></li>\n *       <li><a href=\"#section3\">Section 3</a></li>\n *     </ul>\n *   </nav>\n *   <article slot=\"static-column\">\n *     <section id=\"section1\">...</section>\n *     <section id=\"section2\">...</section>\n *     <section id=\"section3\">...</section>\n *   </article>\n * </umd-element-sticky-columns>\n * ```\n *\n * @example\n * ```html\n * <!-- Sticky column first with custom offset -->\n * <umd-element-sticky-columns data-visual=\"sticky-first\" data-visual-position=\"100\">\n *   <aside slot=\"sticky-column\">\n *     <h3>Quick Facts</h3>\n *     <ul>\n *       <li>Founded: 1856</li>\n *       <li>Students: 40,000+</li>\n *       <li>Location: College Park, MD</li>\n *     </ul>\n *   </aside>\n *   <main slot=\"static-column\">\n *     <h1>About the University</h1>\n *     <p>Long content about the university...</p>\n *   </main>\n * </umd-element-sticky-columns>\n * ```\n *\n * @example\n * ```html\n * <!-- Dynamic sticky position adjustment -->\n * <umd-element-sticky-columns id=\"sticky-layout\">\n *   <div slot=\"sticky-column\">Sticky content</div>\n *   <div slot=\"static-column\">Scrollable content</div>\n * </umd-element-sticky-columns>\n *\n * <script>\n *   // Adjust sticky position based on header height\n *   const stickyLayout = document.getElementById('sticky-layout');\n *   const headerHeight = document.querySelector('header').offsetHeight;\n *   stickyLayout.setAttribute('data-visual-position', headerHeight + 20);\n * </script>\n * ```\n *\n * @category Components\n * @since 1.0.0\n */\nexport const LayoutStickyColumns: ComponentRegistration = Register.webComponent({\n  tagName,\n  slots,\n  createComponent,\n  attributes,\n});\n\n/** Backwards compatibility alias for grouped exports */\nexport { LayoutStickyColumns as stickyColumns };\n"],"names":["tagName","slots","createComponent","element","layout","validation","Slots","Attributes","LayoutBoxLogo","Register","createSlot","LayoutImageExpand","callback","props","attributes","LayoutModal","LayoutScrollTop","Lifecycle","CommonIntroData","isThemeDark","LayoutSectionIntroSmall","LayoutSectionIntroWide","topPosition","LayoutStickyColumns"],"mappings":"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"}