@tmorrow/cre8-wc 1.1.6 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/card/card.d.ts.map +1 -1
- package/lib/components/card/card.js +1 -1
- package/lib/components/card/card.js.map +1 -1
- package/lib/components/card/card.styles.d.ts +1 -1
- package/lib/components/card/card.styles.d.ts.map +1 -1
- package/lib/components/card/card.styles.js +2 -2
- package/lib/components/card/card.styles.js.map +1 -1
- package/mcp-manifest.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAEpD;;;OAGG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { html, } from 'lit';
|
|
8
8
|
import { property } from 'lit/decorators.js';
|
|
9
9
|
import { Cre8Element } from '../cre8-element';
|
|
10
|
-
import styles from './card.styles.js';
|
|
10
|
+
import { styles } from './card.styles.js';
|
|
11
11
|
/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.
|
|
12
12
|
*
|
|
13
13
|
* # How to Use
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAClE,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YAClE,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;;;UAIrF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;KAE1F,CAAC;IACJ,CAAC;;AAtCM,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUzB;IADC,QAAQ,EAAE;yCACyC;AAOpD;IADC,QAAQ,EAAE;uCACM;AAwBnB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { styles } from './card.styles.js';\n\n/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.\n*\n* # How to Use\n* 1. Wrap the card component tags around any html template code which has been properly imported into the file.\n* 2. Decide the layout that best fits the designs assigned to your work.\n* Generally, we recommend visual elements appear in the `header` (optional slot),\n* while `body` remains reserved for custom html content that gives further context and meaning to the `header`.\n* 3. The card defaults to a column and includes a `horizontal` directional variant.\n* If you have a card where the layout of the content is more aligned horizontally,\n* using the `horizontal` variant will ease the construction of your component\n* 4. Finally, we typically recommend reserving the footer for any interactive elements\n* such as buttons for navigating to further information.\n*\n*\n* NOTE: Adjusting props not mentioned above may result in unpredictable states\n*\n* @slot body - The card's body content\n* @slot header - (Optional) Content in the card's header\n* @slot footer - (Optional) Content in the card's footer\n*/\nexport class Cre8Card extends Cre8Element {\n static styles = [styles];\n\n /**\n * Style variants\n * - **bare** renders a card without a border and without padding around the content\n * - **horizontal** renders a card with header, body, footer oriented in a row rather than a column\n * - **horizontal-bare** renders a card with header, body, footer oriented in a row rather than a column\n * without a border and without padding around the content\n */\n @property()\n variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n /**\n * Alignment variant\n * - **center** renders a card that has center aligned content/text\n */\n @property()\n align?: 'center';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-card', {\n 'cre8-c-card--bare': this.variant === 'bare',\n 'cre8-c-card--horizontal': this.variant === 'horizontal',\n 'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',\n 'cre8-c-card--align-center': this.align === 'center',\n });\n\n return html`\n <div class=\"${componentClassNames}\" part=\"card\">\n ${this.slotNotEmpty('header')\n && html`<div class=\"cre8-c-card__header\" part=\"header\"><slot name=\"header\"></slot></div>`}\n <div class=\"cre8-c-card__body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.slotNotEmpty('footer')\n && html`<div class=\"cre8-c-card__footer\" part=\"footer\"><slot name=\"footer\"></slot></div>`}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-card') === undefined) {\n customElements.define('cre8-card', Cre8Card);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-card': Cre8Card;\n }\n}\n\nexport default Cre8Card;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiVV,CAAC;AACH,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiVhB,CAAC;AACH,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n --rtlTranslateX: 50%;\n /* 1 */\n --rtlGradientToRight: 270deg;\n /* 2 */\n --rtlRotate45Inverse: -45deg;\n /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n display: block;\n}\n\n/**\n * 1) A card is an organized block that typically contains a title, image,\n * text, and/or calls to action. It is made up of an optional header slot, required\n * body slot, and optional footer slot to place other Components and content within.\n */\n.cre8-c-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5rem;\n gap: 1rem;\n border-color: var(--cre8-color-border-default);\n border-style: var(--cre8-border-style-default);\n border-width: var(--cre8-border-width-default);\n border-radius: var(--cre8-border-radius-container);\n background: var(--cre8-color-bg-default);\n}\n\n/**\n * Horizontal card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n */\n.cre8-c-card--horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n/**\n * Bare card\n * 1) Organized block without a border, background, or padding\n */\n.cre8-c-card--bare {\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n}\n\n/**\n * Horizontal-bare card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n */\n.cre8-c-card--horizontal-bare {\n flex-direction: row;\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n align-items: center;\n justify-content: center;\n}\n\n/**\n * Center aligned card\n * 1) Center content and text within the card\n */\n.cre8-c-card--align-center {\n text-align: center;\n /* 1 */\n align-items: center;\n /* 1 */\n justify-content: center;\n /* 1 */\n}\n\n/**\n * Slotted image within a card\n * 1) Make the image full width\n */\n::slotted(img) {\n width: 100%;\n}\n\n/**\n * Card header\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__header {\n display: block;\n flex: none;\n /* 1 */\n}\n\n/**\n * Card body\n * 1) Flex applied to always fill the remaining space of the card\n */\n.cre8-c-card__body {\n display: block;\n flex: 1 1 auto;\n /* 1 */\n}\n\n/**\n * Card footer\n * 1) Remove flex so that body always takes up remaining space\n */\n.cre8-c-card__footer {\n display: block;\n flex: none;\n /* 1 */\n}\n.cre8-c-card--bare .cre8-c-card__footer {\n padding: 0;\n}\n.cre8-c-card--horizontal-bare .cre8-c-card__footer {\n padding: 0;\n}`;\nexport { styles };\n"]}
|
package/mcp-manifest.json
CHANGED
package/package.json
CHANGED