kemet-ui 3.1.0 → 4.0.1

package/dist/elements/rotator.js

@@ -0,0 +1,226 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/rotator.ts
+var rotator_exports = {};
+__export(rotator_exports, {
+  EnumEffects: () => EnumEffects,
+  default: () => KemetRotator,
+  effects: () => effects
+});
+module.exports = __toCommonJS(rotator_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var import_unsafe_html = require("lit/directives/unsafe-html.js");
+
+// src/styles/elements/rotator.ts
+var import_lit = require("lit");
+var stylesRotator = import_lit.css`
+  :host {
+    --kemet-rotator-transition-speed: 500ms;
+
+    display: flex;
+  }
+
+  .rotator__slide {
+    pointer-events: none;
+  }
+
+  .rotator__slide--active {
+    pointer-events: auto;
+  }
+
+  /* fade effect */
+  :host([effect="fade"]) .rotator {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+
+  :host([effect="fade"]) .rotator__slide {
+    width: 100%;
+    flex: none;
+    opacity: 0;
+    box-sizing: border-box;
+    transition: all var(--kemet-rotator-transition-speed) ease;
+  }
+
+  :host([effect="fade"]) .rotator__slide:not(:first-child) {
+    margin-left: -100%; /* this is the bulk of the overlay trick */
+  }
+
+  :host([effect="fade"]) .rotator__slide--active {
+    opacity: 1;
+  }
+
+  /* flip effect */
+  :host([effect="flip"]) .rotator {
+    display: flex;
+    position: relative;
+
+    perspective: 500;
+  }
+
+  :host([effect="flip"]) .rotator__slide {
+    display: block;
+    width: auto;
+    position: absolute;
+    top: -20px;
+    left: 0;
+
+    opacity: 0;
+
+    transform: rotateX(90deg);
+    transform-origin: 0% 0%;
+    transition: all var(--kemet-rotator-transition-speed) ease;
+  }
+
+  :host([effect="flip"]) .rotator__slide--active {
+    top: 0;
+    opacity: 1;
+
+    transform: rotateX(0deg);
+  }
+
+  :host([effect="flip"]) .rotator__slide--prev {
+    top: 40px;;
+    transform: rotateX(-90deg);
+  }
+`;
+
+// src/elements/rotator.ts
+var effects = ["fade", "flip"];
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["Fade"] = "fade";
+  EnumEffects2["Flip"] = "flip";
+  return EnumEffects2;
+})(EnumEffects || {});
+var KemetRotator = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.activeSlide = 0;
+    this.width = "auto";
+    this.height = "auto";
+    this.messages = [];
+    this.effect = "fade" /* Fade */;
+    this.rotationSpeed = 3;
+  }
+  firstUpdated() {
+    this.prevSlide = null;
+    window.addEventListener("resize", this.setDimensions.bind(this));
+  }
+  updated(changed) {
+    const widthHasChanged = !!changed.get("width");
+    const heightHasChanged = !!changed.get("height");
+    this.setDimensions();
+    if (!widthHasChanged && !heightHasChanged) {
+      setTimeout(() => {
+        if (this.rotationSpeed > 0) {
+          this.nextSlide();
+        }
+      }, this.rotationSpeed * 1e3);
+    }
+  }
+  render() {
+    const setWidth = this.effect === "flip" ? `width:${this.width};` : "";
+    const setHeight = this.effect === "flip" ? `height:${this.height};` : "";
+    return import_lit2.html`
+      <span class="rotator" style="${setWidth} ${setHeight}">
+        ${this.makeMessages()}
+      </span>
+    `;
+  }
+  makeMessages() {
+    return this.messages.map((message, index) => {
+      const setActiveClass = this.activeSlide === index ? "rotator__slide--active" : "";
+      const setPrevClass = this.prevSlide === index ? "rotator__slide--prev" : "";
+      return import_lit2.html`
+        <span class="rotator__slide ${setActiveClass} ${setPrevClass}">
+          ${(0, import_unsafe_html.unsafeHTML)(message)}
+        </span>
+      `;
+    });
+  }
+  setDimensions() {
+    if (this.effect === "flip") {
+      this.width = `${this.offsetWidth}px`;
+      const slides = this.shadowRoot.querySelectorAll(".rotator__slide");
+      let tallest = 0;
+      slides.forEach((slide) => {
+        if (slide.offsetHeight > tallest) {
+          tallest = slide.offsetHeight;
+        }
+      });
+      this.height = `${tallest}px`;
+    }
+  }
+  /**
+   * Rotates to the next slide.
+   * @public
+   * @method nextSlide
+   * @returns {void}
+   */
+  nextSlide() {
+    if (this.activeSlide < this.messages.length - 1) {
+      this.activeSlide += 1;
+      this.prevSlide = this.activeSlide - 1;
+    } else {
+      this.activeSlide = 0;
+      this.prevSlide = this.messages.length - 1;
+    }
+  }
+};
+KemetRotator.styles = [stylesRotator];
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetRotator.prototype, "activeSlide", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetRotator.prototype, "width", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetRotator.prototype, "height", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Array })
+], KemetRotator.prototype, "messages", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetRotator.prototype, "effect", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number, attribute: "rotation-speed" })
+], KemetRotator.prototype, "rotationSpeed", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetRotator.prototype, "prevSlide", 2);
+KemetRotator = __decorateClass([
+  (0, import_decorators.customElement)("kemet-rotator")
+], KemetRotator);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumEffects,
+  effects
+});
+//# sourceMappingURL=rotator.js.map

package/dist/elements/rotator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/rotator.ts","../../src/styles/elements/rotator.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { stylesRotator } from '../styles/elements/rotator';\n\nexport const effects = ['fade', 'flip'] as const;\nexport enum EnumEffects {\n  Fade = 'fade',\n  Flip = 'flip',\n}\nexport type TypeEffects = typeof effects[number];\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-rotator\n * @summary A component that rotates through an array of text.\n *\n * @prop {number} activeSlide - The index number for the current slide.\n * @prop {string} width - The width of the rotator block.\n * @prop {string} height - The height of the rotator block.\n * @prop {array} messages - Text in the rotator. Supports HTML.\n * @prop {TypeEffects} effect - The transition effect type.\n * @prop {number} rotationSpeed - How fast, in seconds, each slide lasts. Stop the rotator with 0.\n *\n * @cssproperty --kemet-rotator-transition-speed - How long, in css time units, the transition effect lasts.\n *\n */\n\n@customElement('kemet-rotator')\nexport default class KemetRotator extends LitElement {\n  static styles = [stylesRotator];\n\n  @property({ type: Number })\n  activeSlide: number = 0;\n\n  @property({ type: String })\n  width: string = 'auto';\n\n  @property({ type: String })\n  height: string = 'auto';\n\n  @property({ type: Array })\n  messages: string[] = [];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Fade;\n\n  @property({ type: Number, attribute: 'rotation-speed' })\n  rotationSpeed: number = 3;\n\n  @state()\n  prevSlide: number | null;\n\n  firstUpdated() {\n    // standard properties\n    this.prevSlide = null;\n\n    window.addEventListener('resize', this.setDimensions.bind(this));\n  }\n\n  updated(changed: Map<string, never>) {\n    const widthHasChanged = !!changed.get('width');\n    const heightHasChanged = !!changed.get('height');\n\n    this.setDimensions();\n\n    // only trigger slide updates when width and height has not changed\n    if (!widthHasChanged && !heightHasChanged) {\n      setTimeout(() => {\n        if (this.rotationSpeed > 0) {\n          this.nextSlide();\n        }\n      }, this.rotationSpeed * 1000);\n    }\n  }\n\n  render() {\n    const setWidth = this.effect === 'flip' ? `width:${this.width};` : '';\n    const setHeight = this.effect === 'flip' ? `height:${this.height};` : '';\n\n    return html`\n      <span class=\"rotator\" style=\"${setWidth} ${setHeight}\">\n        ${this.makeMessages()}\n      </span>\n    `;\n  }\n\n  makeMessages() {\n    return this.messages.map((message, index) => {\n      const setActiveClass = this.activeSlide === index ? 'rotator__slide--active' : '';\n      const setPrevClass = this.prevSlide === index ? 'rotator__slide--prev' : '';\n\n      return html`\n        <span class=\"rotator__slide ${setActiveClass} ${setPrevClass}\">\n          ${unsafeHTML(message)}\n        </span>\n      `;\n    });\n  }\n\n  setDimensions() {\n    if (this.effect === 'flip') {\n      this.width = `${this.offsetWidth}px`;\n\n      const slides = this.shadowRoot.querySelectorAll('.rotator__slide');\n      let tallest = 0;\n\n      slides.forEach((slide: HTMLElement) => {\n        if (slide.offsetHeight > tallest) {\n          tallest = slide.offsetHeight;\n        }\n      });\n\n      this.height = `${tallest}px`;\n    }\n  }\n\n  /**\n   * Rotates to the next slide.\n   * @public\n   * @method nextSlide\n   * @returns {void}\n   */\n  nextSlide() {\n    if (this.activeSlide < this.messages.length - 1) {\n      this.activeSlide += 1;\n      this.prevSlide = this.activeSlide - 1;\n    } else {\n      this.activeSlide = 0;\n      this.prevSlide = this.messages.length - 1;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-rotator': KemetRotator\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesRotator = css`\n  :host {\n    --kemet-rotator-transition-speed: 500ms;\n\n    display: flex;\n  }\n\n  .rotator__slide {\n    pointer-events: none;\n  }\n\n  .rotator__slide--active {\n    pointer-events: auto;\n  }\n\n  /* fade effect */\n  :host([effect=\"fade\"]) .rotator {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide {\n    width: 100%;\n    flex: none;\n    opacity: 0;\n    box-sizing: border-box;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide:not(:first-child) {\n    margin-left: -100%; /* this is the bulk of the overlay trick */\n  }\n\n  :host([effect=\"fade\"]) .rotator__slide--active {\n    opacity: 1;\n  }\n\n  /* flip effect */\n  :host([effect=\"flip\"]) .rotator {\n    display: flex;\n    position: relative;\n\n    perspective: 500;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide {\n    display: block;\n    width: auto;\n    position: absolute;\n    top: -20px;\n    left: 0;\n\n    opacity: 0;\n\n    transform: rotateX(90deg);\n    transform-origin: 0% 0%;\n    transition: all var(--kemet-rotator-transition-speed) ease;\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--active {\n    top: 0;\n    opacity: 1;\n\n    transform: rotateX(0deg);\n  }\n\n  :host([effect=\"flip\"]) .rotator__slide--prev {\n    top: 40px;;\n    transform: rotateX(-90deg);\n  }\n`;\n"],"mappings":"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","names":["import_lit","EnumEffects"]}

package/dist/elements/rotator.mjs

@@ -0,0 +1,12 @@
+import {
+  EnumEffects,
+  KemetRotator,
+  effects
+} from "../chunk-AEOXLPN2.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumEffects,
+  KemetRotator as default,
+  effects
+};
+//# sourceMappingURL=rotator.mjs.map

package/dist/elements/rotator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/scroll-nav.d.mts

@@ -0,0 +1,44 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare const effects: readonly ["sticky", "resize"];
+declare enum EnumEffects {
+    Sticky = "sticky",
+    Resize = "resize"
+}
+type TypeEffects = typeof effects[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {TypeEffect} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.
+ *
+ */
+declare class KemetScrollNav extends LitElement {
+    static styles: lit.CSSResult[];
+    effect: TypeEffects;
+    transform: boolean;
+    offset: number;
+    render(): lit_html.TemplateResult<1>;
+    firstUpdated(): void;
+    handleScroll(stickPoint: number, elementHeight: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-nav': KemetScrollNav;
+    }
+}
+
+export { EnumEffects, type TypeEffects, KemetScrollNav as default, effects };

package/dist/elements/scroll-nav.d.ts

@@ -0,0 +1,44 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+declare const effects: readonly ["sticky", "resize"];
+declare enum EnumEffects {
+    Sticky = "sticky",
+    Resize = "resize"
+}
+type TypeEffects = typeof effects[number];
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {TypeEffect} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.
+ *
+ */
+declare class KemetScrollNav extends LitElement {
+    static styles: lit.CSSResult[];
+    effect: TypeEffects;
+    transform: boolean;
+    offset: number;
+    render(): lit_html.TemplateResult<1>;
+    firstUpdated(): void;
+    handleScroll(stickPoint: number, elementHeight: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-nav': KemetScrollNav;
+    }
+}
+
+export { EnumEffects, type TypeEffects, KemetScrollNav as default, effects };

package/dist/elements/scroll-nav.js

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/scroll-nav.ts
+var scroll_nav_exports = {};
+__export(scroll_nav_exports, {
+  EnumEffects: () => EnumEffects,
+  default: () => KemetScrollNav,
+  effects: () => effects
+});
+module.exports = __toCommonJS(scroll_nav_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/scroll-nav.ts
+var import_lit = require("lit");
+var stylesScrollNav = import_lit.css`
+  :host {
+    --kemet-scroll-nav-padding: 1rem 2rem;
+    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));
+    --kemet-scroll-nav-transition: 300ms;
+    --kemet-scroll-nav-resize-height: 400px;
+    --kemet-scroll-nav-resize-height-transformed: 100px;
+
+    display: block;
+    box-sizing: border-box;
+    padding: var(--kemet-scroll-nav-padding);
+    background-color: var(--kemet-scroll-nav-background);
+    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
+  }
+
+  :host([transform]),
+  :host([effect="resize"]) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  :host([effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height);
+  }
+
+  :host([transform][effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height-transformed);
+  }
+`;
+
+// src/elements/scroll-nav.ts
+var effects = ["sticky", "resize"];
+var EnumEffects = /* @__PURE__ */ ((EnumEffects2) => {
+  EnumEffects2["Sticky"] = "sticky";
+  EnumEffects2["Resize"] = "resize";
+  return EnumEffects2;
+})(EnumEffects || {});
+var KemetScrollNav = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.effect = "sticky" /* Sticky */;
+    this.transform = false;
+    this.offset = 0;
+  }
+  render() {
+    return import_lit2.html`
+      <slot></slot>
+    `;
+  }
+  firstUpdated() {
+    const stickPoint = this.offsetTop;
+    const elementHeight = this.offsetHeight;
+    window.addEventListener("scroll", () => {
+      this.handleScroll(stickPoint, elementHeight);
+    });
+  }
+  handleScroll(stickPoint, elementHeight) {
+    const transformPoint = this.effect === "sticky" ? stickPoint + this.offset : elementHeight + this.offset;
+    this.transform = window.pageYOffset >= transformPoint;
+  }
+};
+KemetScrollNav.styles = [stylesScrollNav];
+__decorateClass([
+  (0, import_decorators.property)({ type: String, reflect: true })
+], KemetScrollNav.prototype, "effect", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetScrollNav.prototype, "transform", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetScrollNav.prototype, "offset", 2);
+KemetScrollNav = __decorateClass([
+  (0, import_decorators.customElement)("kemet-scroll-nav")
+], KemetScrollNav);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnumEffects,
+  effects
+});
+//# sourceMappingURL=scroll-nav.js.map

package/dist/elements/scroll-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/scroll-nav.ts","../../src/styles/elements/scroll-nav.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesScrollNav } from '../styles/elements/scroll-nav';\n\nexport const effects = ['sticky', 'resize'] as const;\nexport enum EnumEffects {\n  Sticky = 'sticky',\n  Resize = 'resize'\n}\nexport type TypeEffects = typeof effects[number];\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-nav\n * @summary An element that transforms at a scroll point.\n *\n * @prop {TypeEffect} effect - Determines where the transform point is activated. Values include: (sticky | resize)\n * @prop {boolean} transform - Whether the nav has shifted into a new state.\n * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.\n *\n * @cssproperty --kemet-scroll-nav-padding - The padding of the nav.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav.\n *\n */\n\n@customElement('kemet-scroll-nav')\nexport default class KemetScrollNav extends LitElement {\n  static styles = [stylesScrollNav];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffects = EnumEffects.Sticky;\n\n  @property({ type: Boolean, reflect: true })\n  transform: boolean = false;\n\n  @property({ type: Number })\n  offset: number = 0;\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  firstUpdated() {\n    const stickPoint = this.offsetTop;\n    const elementHeight = this.offsetHeight;\n\n    window.addEventListener('scroll', () => {\n      // we pass stickPoint and elementHeight as recorded constants\n      // so that it does not update for each call to handleScroll\n      this.handleScroll(stickPoint, elementHeight);\n    });\n  }\n\n  handleScroll(stickPoint: number, elementHeight: number) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    this.transform = window.pageYOffset >= transformPoint;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesScrollNav = css`\n  :host {\n    --kemet-scroll-nav-padding: 1rem 2rem;\n    --kemet-scroll-nav-background: rgb(var(--kemet-color-gray-50));\n    --kemet-scroll-nav-transition: 300ms;\n    --kemet-scroll-nav-resize-height: 400px;\n    --kemet-scroll-nav-resize-height-transformed: 100px;\n\n    display: block;\n    box-sizing: border-box;\n    padding: var(--kemet-scroll-nav-padding);\n    background-color: var(--kemet-scroll-nav-background);\n    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;\n  }\n\n  :host([transform]),\n  :host([effect=\"resize\"]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n\n  :host([effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height);\n  }\n\n  :host([transform][effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height-transformed);\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAAwC;;;ACDxC,iBAAoB;AAEb,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADExB,IAAM,UAAU,CAAC,UAAU,QAAQ;AACnC,IAAK,cAAL,kBAAKC,iBAAL;AACL,EAAAA,aAAA,YAAS;AACT,EAAAA,aAAA,YAAS;AAFC,SAAAA;AAAA,GAAA;AA2BZ,IAAqB,iBAArB,cAA4C,uBAAW;AAAA,EAAvD;AAAA;AAIE,kBAAsB;AAGtB,qBAAqB;AAGrB,kBAAiB;AAAA;AAAA,EAEjB,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,eAAe;AACb,UAAM,aAAa,KAAK;AACxB,UAAM,gBAAgB,KAAK;AAE3B,WAAO,iBAAiB,UAAU,MAAM;AAGtC,WAAK,aAAa,YAAY,aAAa;AAAA,IAC7C,CAAC;AAAA,EACH;AAAA,EAEA,aAAa,YAAoB,eAAuB;AACtD,UAAM,iBAAkB,KAAK,WAAW,WACpC,aAAa,KAAK,SAClB,gBAAgB,KAAK;AAEzB,SAAK,YAAY,OAAO,eAAe;AAAA,EACzC;AACF;AApCqB,eACZ,SAAS,CAAC,eAAe;AAGhC;AAAA,MADC,4BAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAHtB,eAInB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,eAOnB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,eAUnB;AAVmB,iBAArB;AAAA,MADC,iCAAc,kBAAkB;AAAA,GACZ;","names":["import_lit","EnumEffects"]}

package/dist/elements/scroll-nav.mjs

@@ -0,0 +1,12 @@
+import {
+  EnumEffects,
+  KemetScrollNav,
+  effects
+} from "../chunk-P7GREIMJ.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  EnumEffects,
+  KemetScrollNav as default,
+  effects
+};
+//# sourceMappingURL=scroll-nav.mjs.map

package/dist/elements/scroll-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/scroll-snap-paginator.d.mts

@@ -0,0 +1,50 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetScrollSnapSlide from './scroll-snap-slide.mjs';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-snap-paginator
+ * @summary The scroll snap's pagination.
+ *
+ * @prop {array} slides - Information about each slide.
+ * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.
+ * @prop {number} size - The size in pixels of the icons.
+ * @prop {boolean} center - Determines whether to center the pagination items.
+ * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.
+ * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.
+ * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.
+ *
+ * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.
+ *
+ * @event kemet-focus - Fires when a set of slides are focused on.
+ *
+ */
+declare class KemetScrollSnapPaginator extends LitElement {
+    static styles: lit.CSSResult[];
+    slides: KemetScrollSnapSlide[];
+    icon: string;
+    size: number;
+    center: boolean;
+    hideFocusedLinks: boolean;
+    useNumberPages: boolean;
+    useLabelPages: boolean;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makePagination(): lit_html.TemplateResult<1>[];
+    pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number): string | number | lit_html.TemplateResult<1>;
+    slideLink(index: string): void;
+    handleKeyboardInput(event: KeyboardEvent, id: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap-paginator': KemetScrollSnapPaginator;
+    }
+}
+
+export { KemetScrollSnapPaginator as default };

package/dist/elements/scroll-snap-paginator.d.ts

@@ -0,0 +1,50 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetScrollSnapSlide from './scroll-snap-slide.js';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-snap-paginator
+ * @summary The scroll snap's pagination.
+ *
+ * @prop {array} slides - Information about each slide.
+ * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.
+ * @prop {number} size - The size in pixels of the icons.
+ * @prop {boolean} center - Determines whether to center the pagination items.
+ * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.
+ * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.
+ * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.
+ *
+ * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.
+ *
+ * @event kemet-focus - Fires when a set of slides are focused on.
+ *
+ */
+declare class KemetScrollSnapPaginator extends LitElement {
+    static styles: lit.CSSResult[];
+    slides: KemetScrollSnapSlide[];
+    icon: string;
+    size: number;
+    center: boolean;
+    hideFocusedLinks: boolean;
+    useNumberPages: boolean;
+    useLabelPages: boolean;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    makePagination(): lit_html.TemplateResult<1>[];
+    pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number): string | number | lit_html.TemplateResult<1>;
+    slideLink(index: string): void;
+    handleKeyboardInput(event: KeyboardEvent, id: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap-paginator': KemetScrollSnapPaginator;
+    }
+}
+
+export { KemetScrollSnapPaginator as default };