kemet-ui 4.0.2 → 5.0.0

package/dist/elements/rotator.js

@@ -1,226 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,50 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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 };