kritzel-stencil 0.4.19 → 0.4.21

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.css

@@ -1,98 +1,98 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-width-small: 380px;
-}
-
-.login-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.login-subtitle {
-  font-size: 13px;
-  color: var(--kritzel-login-dialog-subtitle-color, #666666);
-  margin: 0;
-  line-height: 1.5;
-  text-align: center;
-}
-
-.login-providers {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-/* Provider Button */
-.provider-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);
-  border-radius: 8px;
-  background: var(--kritzel-login-dialog-button-background, #ffffff);
-  color: var(--kritzel-login-dialog-button-text-color, #333333);
-  font-size: 14px;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.provider-button:hover:not(:disabled) {
-  background: var(--kritzel-login-dialog-button-hover-background, #f5f5f5);
-  border-color: var(--kritzel-login-dialog-button-hover-border-color, #cccccc);
-}
-
-.provider-button:active:not(:disabled) {
-  background: var(--kritzel-login-dialog-button-active-background, #ebebeb);
-}
-
-.provider-button:focus-visible {
-  outline: revert;
-  outline-offset: revert;
-}
-
-.provider-button.is-disabled {
-  opacity: 0.5;
-  cursor: default;
-  pointer-events: none;
-}
-
-.provider-button.is-loading {
-  cursor: default;
-}
-
-.provider-label {
-  flex-shrink: 0;
-}
-
-/* Loading Spinner */
-.provider-button.is-loading .provider-label {
-  opacity: 0.7;
-}
-
-@keyframes kritzel-login-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spinner {
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  display: block;
-  flex-shrink: 0;
-  border: 2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);
-  border-top-color: var(--kritzel-login-dialog-spinner-active-color, #333333);
-  border-radius: 50%;
-  animation: kritzel-login-spin 0.6s linear infinite;
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.login-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.login-subtitle {
+  font-size: 13px;
+  color: var(--kritzel-login-dialog-subtitle-color, #666666);
+  margin: 0;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.login-providers {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Provider Button */
+.provider-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);
+  border-radius: 8px;
+  background: var(--kritzel-login-dialog-button-background, #ffffff);
+  color: var(--kritzel-login-dialog-button-text-color, #333333);
+  font-size: 14px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.provider-button:hover:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-hover-background, #f5f5f5);
+  border-color: var(--kritzel-login-dialog-button-hover-border-color, #cccccc);
+}
+
+.provider-button:active:not(:disabled) {
+  background: var(--kritzel-login-dialog-button-active-background, #ebebeb);
+}
+
+.provider-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.provider-button.is-disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+.provider-button.is-loading {
+  cursor: default;
+}
+
+.provider-label {
+  flex-shrink: 0;
+}
+
+/* Loading Spinner */
+.provider-button.is-loading .provider-label {
+  opacity: 0.7;
+}
+
+@keyframes kritzel-login-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-login-dialog-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: kritzel-login-spin 0.6s linear infinite;
+}

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'd805664c63cf0d21c827cd8c4f4e52aeeab55773' }, h("kritzel-dialog", { key: '00be052688de8289cc7940fad83200c4d961d765', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '0dcc0c3e8ae4c058ee76e06d988bd120759f52e1', class: "login-content" }, this.subtitle && (h("p", { key: 'e9a53ce3a50c01426b834cce85438ac676f26ca2', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'dead2054cf268e00e5c4be29a0a953d4dd28db71', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '97532a2eeb125a2692117228ec3c77907c90d021' }, h("kritzel-dialog", { key: '60597c3d75f532a3c73aab983bed683bea243eac', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'cb086e90c5981f8c3d5fc65e7b94675884a255dc', class: "login-content" }, this.subtitle && (h("p", { key: '0ac0e31a5bf8d8a3e24b7df1d388f1cdc6951bd7', class: "login-subtitle" }, this.subtitle)), h("div", { key: '6057615670a1758581d0c518bb2809b88af0672e', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.css

@@ -1,58 +1,58 @@
-:host {
-  display: inline-flex;
-  z-index: 1;
-}
-
-.more-menu-wrapper {
-  display: inline-flex;
-  padding: var(--kritzel-more-menu-padding, 4px);
-  background-color: var(--kritzel-more-menu-background-color, #ffffff);
-  border-radius: var(--kritzel-more-menu-border-radius, 12px);
-  box-shadow: var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-more-menu-border, 1px solid #ebebeb);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out;
-}
-
-.more-menu-wrapper.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-:host(.mobile) {
-  --kritzel-more-menu-button-hover-background-color: transparent;
-  --kritzel-more-menu-button-active-background-color: transparent;
-}
-
-.more-menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kritzel-more-menu-button-width, 40px);
-  height: var(--kritzel-more-menu-button-height, 40px);
-  padding: 0;
-  border: none;
-  border-radius: var(--kritzel-more-menu-inner-border-radius, 12px);
-  background-color: transparent;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: none;
-  transition: background-color 150ms ease;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  color: var(--kritzel-more-menu-button-color, currentColor);
-}
-
-.more-menu-button:hover {
-  background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.more-menu-button:focus-visible {
-  background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.more-menu-button:active {
-  background-color: var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%));
-}
+:host {
+  display: inline-flex;
+  z-index: 1;
+}
+
+.more-menu-wrapper {
+  display: inline-flex;
+  padding: var(--kritzel-more-menu-padding, 4px);
+  background-color: var(--kritzel-more-menu-background-color, #ffffff);
+  border-radius: var(--kritzel-more-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-more-menu-border, 1px solid #ebebeb);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.more-menu-wrapper.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:host(.mobile) {
+  --kritzel-more-menu-button-hover-background-color: transparent;
+  --kritzel-more-menu-button-active-background-color: transparent;
+}
+
+.more-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-more-menu-button-width, 40px);
+  height: var(--kritzel-more-menu-button-height, 40px);
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-more-menu-inner-border-radius, 12px);
+  background-color: transparent;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: none;
+  transition: background-color 150ms ease;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  color: var(--kritzel-more-menu-button-color, currentColor);
+}
+
+.more-menu-button:hover {
+  background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.more-menu-button:focus-visible {
+  background-color: var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.more-menu-button:active {
+  background-color: var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%));
+}

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js

@@ -136,7 +136,7 @@ export class KritzelMoreMenu {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '1c7299e83343fee3daedb5abceb3a341071237db', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '1b7f12ee8679d03ef3648cbda4bda16e692a322f', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '71a6270b3b114f1fb030df57075f4adf215914a4', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'c5ef80ec7d512a24cd45762397ca5c6727d260b3', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '9e467825c1c8e81a35403e1d24be0badf1892548', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '6e629208a46247d0f5190c376b3feb5dbc54209a', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: '3eaf5dac0beb1f08100c9f57f63a2bdbef6e592d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '30e4426b7d3a06ec45f0159f6403862bf4106723', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '037b715fadad3b674f07bd9225acc4075b2d41b3', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'b68b306b5b913ff36d220604a70626aa8468215c', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'dc86c2679956f2dfc66d000b183d99865291b6d3', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '9bd661fceea95df4d307e497d64365fcb854e8ce', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
     }
     static get is() { return "kritzel-more-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -191,7 +191,7 @@ export class KritzelMoreMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The menu items to display in the dropdown.\r\nItems with `isVisible` set to `false` will be filtered out.\r\nItems with an `action` will have that action invoked on selection."
+                    "text": "The menu items to display in the dropdown.\nItems with `isVisible` set to `false` will be filtered out.\nItems with an `action` will have that action invoked on selection."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/ui/kritzel-notification-card/kritzel-notification-card.css

@@ -1,101 +1,101 @@
-:host {
-  display: block;
-}
-
-.card {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--kritzel-notification-card-max-width, 360px);
-  margin-inline: auto;
-  font-family: var(--kritzel-font-family, sans-serif);
-  padding: var(--kritzel-notification-card-padding, 12px 14px);
-  border: var(--kritzel-notification-card-border, 1px solid #e5e7eb);
-  border-radius: var(--kritzel-notification-card-border-radius, 12px);
-  background-color: var(--kritzel-notification-card-background-color, #ffffff);
-  color: var(--kritzel-notification-card-color, #111827);
-  box-shadow: var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08));
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--kritzel-notification-card-header-gap, 8px);
-  margin-bottom: var(--kritzel-notification-card-header-margin-bottom, 8px);
-}
-
-.header-right {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--kritzel-notification-card-header-right-gap, 6px);
-}
-
-.type-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--kritzel-notification-card-pill-height, 22px);
-  padding: var(--kritzel-notification-card-pill-padding, 0 8px);
-  border-radius: var(--kritzel-notification-card-pill-border-radius, 999px);
-  background-color: var(--kritzel-notification-card-pill-background-color, #eff6ff);
-  color: var(--kritzel-notification-card-pill-color, #1d4ed8);
-  font-size: var(--kritzel-notification-card-pill-font-size, 12px);
-  font-weight: var(--kritzel-notification-card-pill-font-weight, 600);
-  line-height: 1;
-}
-
-.card.type-info .type-pill {
-  background-color: var(--kritzel-notification-card-info-pill-background-color, #eff6ff);
-  color: var(--kritzel-notification-card-info-pill-color, #1d4ed8);
-}
-
-.card.type-warning .type-pill {
-  background-color: var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);
-  color: var(--kritzel-notification-card-warning-pill-color, #b45309);
-}
-
-.card.type-error .type-pill {
-  background-color: var(--kritzel-notification-card-error-pill-background-color, #fef2f2);
-  color: var(--kritzel-notification-card-error-pill-color, #b91c1c);
-}
-
-.timestamp {
-  color: var(--kritzel-notification-card-timestamp-color, #6b7280);
-  font-size: var(--kritzel-notification-card-timestamp-font-size, 12px);
-  white-space: nowrap;
-}
-
-.dismiss-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kritzel-notification-card-dismiss-button-size, 24px);
-  height: var(--kritzel-notification-card-dismiss-button-size, 24px);
-  padding: 0;
-  border: none;
-  border-radius: var(--kritzel-notification-card-dismiss-button-border-radius, 6px);
-  background: var(--kritzel-notification-card-dismiss-button-background-color, transparent);
-  color: var(--kritzel-notification-card-dismiss-button-color, #4b5563);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.dismiss-button:hover {
-  background: var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6);
-}
-
-.dismiss-button:active {
-  background: var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb);
-}
-
-.dismiss-button:focus-visible {
-  outline: revert;
-}
-
-.message {
-  margin: 0;
-  color: var(--kritzel-notification-card-message-color, inherit);
-  font-size: var(--kritzel-notification-card-message-font-size, 14px);
-  line-height: var(--kritzel-notification-card-message-line-height, 1.45);
-  word-break: break-word;
-}
+:host {
+  display: block;
+}
+
+.card {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--kritzel-notification-card-max-width, 360px);
+  margin-inline: auto;
+  font-family: var(--kritzel-font-family, sans-serif);
+  padding: var(--kritzel-notification-card-padding, 12px 14px);
+  border: var(--kritzel-notification-card-border, 1px solid #e5e7eb);
+  border-radius: var(--kritzel-notification-card-border-radius, 12px);
+  background-color: var(--kritzel-notification-card-background-color, #ffffff);
+  color: var(--kritzel-notification-card-color, #111827);
+  box-shadow: var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08));
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kritzel-notification-card-header-gap, 8px);
+  margin-bottom: var(--kritzel-notification-card-header-margin-bottom, 8px);
+}
+
+.header-right {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kritzel-notification-card-header-right-gap, 6px);
+}
+
+.type-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--kritzel-notification-card-pill-height, 22px);
+  padding: var(--kritzel-notification-card-pill-padding, 0 8px);
+  border-radius: var(--kritzel-notification-card-pill-border-radius, 999px);
+  background-color: var(--kritzel-notification-card-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-pill-color, #1d4ed8);
+  font-size: var(--kritzel-notification-card-pill-font-size, 12px);
+  font-weight: var(--kritzel-notification-card-pill-font-weight, 600);
+  line-height: 1;
+}
+
+.card.type-info .type-pill {
+  background-color: var(--kritzel-notification-card-info-pill-background-color, #eff6ff);
+  color: var(--kritzel-notification-card-info-pill-color, #1d4ed8);
+}
+
+.card.type-warning .type-pill {
+  background-color: var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);
+  color: var(--kritzel-notification-card-warning-pill-color, #b45309);
+}
+
+.card.type-error .type-pill {
+  background-color: var(--kritzel-notification-card-error-pill-background-color, #fef2f2);
+  color: var(--kritzel-notification-card-error-pill-color, #b91c1c);
+}
+
+.timestamp {
+  color: var(--kritzel-notification-card-timestamp-color, #6b7280);
+  font-size: var(--kritzel-notification-card-timestamp-font-size, 12px);
+  white-space: nowrap;
+}
+
+.dismiss-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  height: var(--kritzel-notification-card-dismiss-button-size, 24px);
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-notification-card-dismiss-button-border-radius, 6px);
+  background: var(--kritzel-notification-card-dismiss-button-background-color, transparent);
+  color: var(--kritzel-notification-card-dismiss-button-color, #4b5563);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dismiss-button:hover {
+  background: var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6);
+}
+
+.dismiss-button:active {
+  background: var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb);
+}
+
+.dismiss-button:focus-visible {
+  outline: revert;
+}
+
+.message {
+  margin: 0;
+  color: var(--kritzel-notification-card-message-color, inherit);
+  font-size: var(--kritzel-notification-card-message-font-size, 14px);
+  line-height: var(--kritzel-notification-card-message-line-height, 1.45);
+  word-break: break-word;
+}