@limetech/lime-elements 37.62.3 → 37.63.1

package/dist/cjs/limel-popover_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement,\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--popover-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{ 'z-index': popoverZIndex }}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.target as HTMLElement;\n        const clickedInside = portalContains(this.host, element);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--shadow-depth-16);\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.75;\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"version":3}
+{"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param element - the parent element\n * @param child - the child element to check\n * @returns `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n    element: HTMLElement,\n    child: HTMLElement,\n): boolean {\n    if (element.contains(child) || element.shadowRoot?.contains(child)) {\n        return true;\n    }\n\n    const parent = findParent(child);\n    if (!parent) {\n        return false;\n    }\n\n    return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n    const portal: any = element.closest('.limel-portal--container');\n    if (portal) {\n        return portal.portalSource;\n    }\n\n    const rootNode = element.getRootNode() as ShadowRoot;\n\n    return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n    display: inline-block;\n    position: relative;\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../menu/menu.types';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover-basic\n * @exampleComponent limel-example-popover-trigger-interaction\n */\n@Component({\n    tag: 'limel-popover',\n    shadow: true,\n    styleUrl: 'popover.scss',\n})\nexport class Popover {\n    /**\n     * True if the content within the popover should be visible\n     */\n    @Prop()\n    public open = false;\n\n    /**\n     * Decides the popover's location in relation to its trigger\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Emits an event when the component is closing\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelPopoverElement;\n\n    private portalId: string;\n\n    constructor() {\n        this.portalId = createRandomString();\n        this.globalClickListener = this.globalClickListener.bind(this);\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentWillLoad() {\n        this.setupGlobalHandlers();\n    }\n\n    public componentDidRender() {\n        const slotElement = this.host.shadowRoot.querySelector('slot');\n        slotElement.assignedElements().forEach(this.setTriggerAttributes);\n    }\n\n    private setupGlobalHandlers() {\n        if (this.open) {\n            document.addEventListener('click', this.globalClickListener, {\n                capture: true,\n            });\n            document.addEventListener('keyup', this.handleGlobalKeyPress);\n        } else {\n            document.removeEventListener('click', this.globalClickListener);\n            document.removeEventListener('keyup', this.handleGlobalKeyPress);\n        }\n    }\n\n    public render() {\n        const cssProperties = this.getCssProperties();\n        const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--popover-z-index',\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <slot name=\"trigger\" />\n                <limel-portal\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{ 'z-index': popoverZIndex }}\n                    openDirection={this.openDirection}\n                >\n                    <limel-popover-surface\n                        contentCollection={this.host.children}\n                        style={cssProperties}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private globalClickListener(event: MouseEvent) {\n        const element: HTMLElement = event.target as HTMLElement;\n        const clickedInside = portalContains(this.host, element);\n        if (this.open && !clickedInside) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.close.emit();\n        }\n    }\n\n    private getCssProperties() {\n        const propertyNames = [\n            '--popover-surface-width',\n            '--popover-body-background-color',\n            '--popover-border-radius',\n        ];\n        const style = getComputedStyle(this.host);\n        const values = propertyNames.map((property) => {\n            return style.getPropertyValue(property);\n        });\n\n        return zipObject(propertyNames, values);\n    }\n\n    private handleGlobalKeyPress = (event: KeyboardEvent) => {\n        if (event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.close.emit();\n    };\n\n    private setTriggerAttributes = (element: HTMLElement) => {\n        const attributes = {\n            'aria-haspopup': true,\n            'aria-expanded': this.open,\n            'aria-controls': this.portalId,\n            role: 'button',\n        };\n\n        for (const [key, value] of Object.entries(attributes)) {\n            if (!value) {\n                element.removeAttribute(key);\n            } else {\n                element.setAttribute(key, String(value));\n            }\n        }\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n    isolation: isolate;\n\n    position: relative;\n    display: flex;\n\n    width: var(--popover-surface-width, auto);\n    max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n    max-width: calc(100vw - 2rem);\n    margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    border-radius: var(--popover-border-radius, functions.pxToRem(12));\n    box-shadow: var(--shadow-depth-16);\n\n    backdrop-filter: blur(functions.pxToRem(5));\n    -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n    &:after {\n        // allows using `--popover-body-background-color` while\n        // getting the blurred backdrop effect\n        transition: opacity 0.4s ease;\n        pointer-events: none;\n\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        z-index: -1;\n\n        opacity: 0.95; //temperary change due to not supporting `backdrop-filter` in Chromium browsers\n\n        border-radius: var(--popover-border-radius, functions.pxToRem(12));\n        background-color: var(\n            --popover-body-background-color,\n            var(--lime-elevated-surface-background-color)\n        );\n    }\n\n    @include mixins.visualize-keyboard-focus;\n\n    &:focus,\n    &:focus-within {\n        &:after {\n            opacity: 1;\n        }\n    }\n\n    & > * {\n        // this fixes some unwanted layout issues\n        // which might be very hard for consumers to realize\n        // and fix by themselves. Without this code,\n        // if the consumer sets for example paddings in\n        // what they send to the popover, their element\n        // can grow larger than the popover surface\n        box-sizing: border-box;\n    }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n    tag: 'limel-popover-surface',\n    shadow: true,\n    styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n    /**\n     * Content to render\n     */\n    @Prop()\n    public contentCollection: HTMLCollection;\n\n    @Element()\n    private host: HTMLLimelPopoverSurfaceElement;\n\n    public componentDidLoad() {\n        this.appendElement();\n    }\n\n    public render() {\n        return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n    }\n\n    private appendElement() {\n        const portalContainer = this.host.shadowRoot.querySelector(\n            '.limel-popover-surface',\n        );\n\n        Array.from(this.contentCollection).forEach((child) => {\n            if (child.slot === 'trigger') {\n                return;\n            }\n\n            portalContainer.appendChild(child);\n        });\n    }\n}\n"],"version":3}

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/badge/badge.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --badge-background-color: badge background color
  * @prop --badge-text-color: badge text color

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -53,6 +53,11 @@
 * in the `<style>` tag of `index.html`.
 */
 /**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
 * @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.
 * @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.
 */

package/dist/collection/components/button/button.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/button-group/button-group.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .mdc-touch-target-wrapper {
   display: inline;
 }

package/dist/collection/components/checkbox/checkbox.css

@@ -872,6 +872,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),

package/dist/collection/components/chip/chip.css

@@ -53,6 +53,11 @@
 * in the `<style>` tag of `index.html`.
 */
 /**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
 * @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.
 * @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.
 */

package/dist/collection/components/chip-set/chip-set.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .mdc-notched-outline {
   display: flex;
   position: absolute;
@@ -2183,6 +2188,11 @@ limel-chip.can-be-removed {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-chip-set:focus),
 :host(limel-chip-set:focus-visible),
 :host(limel-chip-set:focus-within),

package/dist/collection/components/circular-progress/circular-progress.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/code-editor/code-editor.css

@@ -498,6 +498,11 @@ span.CodeMirror-selectedtext { background: none; }
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
  * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.8125rem`.

package/dist/collection/components/collapsible-section/collapsible-section.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --closed-header-background-color: background color for header when closed
  * @prop --open-header-background-color: background color for header when open
@@ -189,11 +194,11 @@ header {
   height: auto;
   max-height: 3rem;
   line-height: 1.2rem;
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .divider-line {

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -604,6 +604,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -657,6 +662,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/color-picker/color-picker.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :root {
   --mdc-theme-primary: #26a69a;
   --mdc-theme-secondary: #575756;

package/dist/collection/components/dialog/dialog.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/dock/dock.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/dynamic-label/dynamic-label.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 * {
   box-sizing: border-box;
   min-width: 0;

package/dist/collection/components/file/file.css

@@ -1,3 +1,62 @@
+@charset "UTF-8";
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.
  * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.
@@ -32,9 +91,9 @@
   height: auto;
   max-height: 3rem;
   line-height: 1;
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
   overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }

package/dist/collection/components/file-viewer/file-viewer.css

@@ -124,6 +124,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host {
   isolation: isolate;
   position: relative;

package/dist/collection/components/form/form.css

@@ -697,6 +697,11 @@ limel-code-editor {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .limel-form-row--layout {
   --limel-form-row-border-radius: 0.375rem;
   --limel-form-row-icon-size: 1.75rem;

package/dist/collection/components/header/header.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component!
  *

package/dist/collection/components/help/help.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 limel-popover {
   display: flex;
   --popover-surface-width: min(calc(100vw - 4rem), 22rem);

package/dist/collection/components/help/limel-help-content.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-help-content) {
   display: flex;
   box-sizing: border-box;

package/dist/collection/components/icon-button/icon-button.css

@@ -52,6 +52,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /**
  * @prop --icon-background-color: Background color of the button.
  */

package/dist/collection/components/info-tile/info-tile.css

@@ -53,6 +53,11 @@
 * in the `<style>` tag of `index.html`.
 */
 /**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
 * @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`
 * @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`
 * @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`

package/dist/collection/components/input-field/input-field.css

@@ -118,6 +118,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 .mdc-notched-outline {
   display: flex;
   position: absolute;

package/dist/collection/components/list/list.css

@@ -58,6 +58,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 /*
  * This file is imported into every component that uses MDC!
  *
@@ -925,6 +930,11 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5374,6 +5384,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(limel-checkbox:focus),
 :host(limel-checkbox:focus-visible),
 :host(limel-checkbox:focus-within),
@@ -5885,6 +5900,11 @@ a.mdc-list-item {
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host(.has-striped-rows) .mdc-deprecated-list {
   border: 1px solid rgb(var(--contrast-400));
 }
@@ -5917,6 +5937,64 @@ a.mdc-list-item {
   z-index: 1;
 }
 
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
 :host {
   --line-height-of-secondary-text: 1rem;
 }
@@ -5925,11 +6003,12 @@ a.mdc-list-item {
   height: auto !important;
 }
 .mdc-deprecated-list-item .mdc-deprecated-list-item__secondary-text {
-  line-height: var(--line-height-of-secondary-text);
-  white-space: normal;
   display: -webkit-box;
-  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  overflow: hidden;
+  white-space: normal;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--maxLinesSecondaryText);
+  line-height: var(--line-height-of-secondary-text);
 }
 
 :host(.has-grid-layout) {