kritzel-stencil 0.4.19 → 0.4.21

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css

@@ -1,209 +1,209 @@
-:host {
-  display: contents;
-}
-
-.dialog-content {
-  text-align: start;
-  line-height: normal;
-}
-
-.backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10002;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));
-  opacity: 1;
-  transition: opacity 150ms ease-out;
-}
-
-.backdrop.is-animating {
-  opacity: 0;
-}
-
-.dialog-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--kritzel-dialog-background-color, #ffffff);
-  border-radius: var(--kritzel-dialog-border-radius, 12px);
-  box-shadow: var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));
-  border: var(--kritzel-dialog-border, 1px solid #ebebeb);
-  max-height: var(--kritzel-dialog-max-height, 90vh);
-  max-width: var(--kritzel-dialog-max-width, 90vw);
-  overflow: hidden;
-  transform: scale(1);
-  opacity: 1;
-  transition:
-    transform 200ms ease-out,
-    opacity 200ms ease-out;
-  font-family: var(--kritzel-dialog-font-family, sans-serif);
-}
-
-.dialog-content.is-animating {
-  transform: scale(0.95);
-  opacity: 0;
-}
-
-/* Size variants */
-.dialog-content.size-small {
-  width: var(--kritzel-dialog-width-small, 320px);
-  height: var(--kritzel-dialog-height-small, auto);
-}
-
-.dialog-content.size-medium {
-  width: var(--kritzel-dialog-width-medium, 480px);
-  height: var(--kritzel-dialog-height-medium, auto);
-}
-
-.dialog-content.size-large {
-  width: var(--kritzel-dialog-width-large, 640px);
-  height: var(--kritzel-dialog-height-large, auto);
-}
-
-.dialog-content.size-fullscreen {
-  width: 100vw;
-  height: 100vh;
-  height: 100dvh;
-  max-width: 100vw;
-  max-height: 100vh;
-  max-height: 100dvh;
-  border-radius: 0;
-}
-
-/*
- * Contained-mobile: when the wrapping container itself is mobile-sized, the
- * dialog fills the container fully (mirrors the viewport fullscreen-on-mobile
- * behavior). The actual sizing is set inline by JS based on the container
- * rect; here we just remove decorations and ensure body flex layout.
- */
-.backdrop.contained-fullscreen {
-  background-color: transparent;
-}
-
-.dialog-content.contained-fullscreen {
-  border-radius: 0;
-}
-
-.dialog-content.contained-fullscreen .dialog-body {
-  display: flex;
-  flex-direction: column;
-}
-
-.dialog-content.contained-fullscreen .dialog-body ::slotted(*) {
-  flex: 1;
-  min-height: 0;
-}
-
-/* Responsive: auto fullscreen on mobile when enabled (portrait) */
-@media (max-width: 576px),
-  (max-height: 576px) and (orientation: landscape) {
-  .backdrop:has(.fullscreen-on-mobile) {
-    background-color: transparent;
-  }
-
-  .dialog-content.fullscreen-on-mobile {
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
-    max-width: 100vw;
-    max-height: 100vh;
-    max-height: 100dvh;
-    border-radius: 0;
-  }
-
-  .dialog-content.fullscreen-on-mobile .dialog-body {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*) {
-    flex: 1;
-    min-height: 0;
-  }
-}
-
-.dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kritzel-dialog-header-padding, 16px 20px);
-  border-bottom: var(--kritzel-dialog-header-border, 1px solid #ebebeb);
-  gap: 12px;
-}
-
-.dialog-title {
-  margin: 0;
-  font-size: var(--kritzel-dialog-title-font-size, 18px);
-  font-weight: var(--kritzel-dialog-title-font-weight, 600);
-  color: var(--kritzel-dialog-title-color, #1a1a1a);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.close-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--kritzel-dialog-close-button-border-radius, 6px);
-  background-color: var(--kritzel-dialog-close-button-background, transparent);
-  color: var(--kritzel-dialog-close-button-color, #666666);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  transition:
-    background-color 150ms ease,
-    color 150ms ease;
-  flex-shrink: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.close-button:hover {
-  background-color: var(--kritzel-dialog-close-button-hover-background, #f5f5f5);
-  color: var(--kritzel-dialog-close-button-hover-color, #1a1a1a);
-}
-
-.close-button:active {
-  background-color: var(--kritzel-dialog-close-button-active-background, #ebebeb);
-}
-
-.close-button:focus-visible {
-  outline: revert;
-  outline-offset: revert;
-}
-
-.dialog-body {
-  padding: var(--kritzel-dialog-body-padding, 20px);
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
-  scrollbar-width: thin;
-}
-
-.dialog-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--kritzel-dialog-footer-gap, 8px);
-  padding: var(--kritzel-dialog-footer-padding, 16px 20px);
-  border-top: var(--kritzel-dialog-footer-border, 1px solid #ebebeb);
-}
-
-/* Slotted content styling hints */
-::slotted([slot='header']) {
-  flex: 1;
-}
-
-::slotted([slot='footer']) {
-  display: contents;
-}
+:host {
+  display: contents;
+}
+
+.dialog-content {
+  text-align: start;
+  line-height: normal;
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10002;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--kritzel-dialog-backdrop-color, rgba(0, 0, 0, 0.5));
+  opacity: 1;
+  transition: opacity 150ms ease-out;
+}
+
+.backdrop.is-animating {
+  opacity: 0;
+}
+
+.dialog-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--kritzel-dialog-background-color, #ffffff);
+  border-radius: var(--kritzel-dialog-border-radius, 12px);
+  box-shadow: var(--kritzel-dialog-box-shadow, 0 4px 20px rgba(0, 0, 0, 0.15));
+  border: var(--kritzel-dialog-border, 1px solid #ebebeb);
+  max-height: var(--kritzel-dialog-max-height, 90vh);
+  max-width: var(--kritzel-dialog-max-width, 90vw);
+  overflow: hidden;
+  transform: scale(1);
+  opacity: 1;
+  transition:
+    transform 200ms ease-out,
+    opacity 200ms ease-out;
+  font-family: var(--kritzel-dialog-font-family, sans-serif);
+}
+
+.dialog-content.is-animating {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+/* Size variants */
+.dialog-content.size-small {
+  width: var(--kritzel-dialog-width-small, 320px);
+  height: var(--kritzel-dialog-height-small, auto);
+}
+
+.dialog-content.size-medium {
+  width: var(--kritzel-dialog-width-medium, 480px);
+  height: var(--kritzel-dialog-height-medium, auto);
+}
+
+.dialog-content.size-large {
+  width: var(--kritzel-dialog-width-large, 640px);
+  height: var(--kritzel-dialog-height-large, auto);
+}
+
+.dialog-content.size-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100vh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+
+/*
+ * Contained-mobile: when the wrapping container itself is mobile-sized, the
+ * dialog fills the container fully (mirrors the viewport fullscreen-on-mobile
+ * behavior). The actual sizing is set inline by JS based on the container
+ * rect; here we just remove decorations and ensure body flex layout.
+ */
+.backdrop.contained-fullscreen {
+  background-color: transparent;
+}
+
+.dialog-content.contained-fullscreen {
+  border-radius: 0;
+}
+
+.dialog-content.contained-fullscreen .dialog-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-content.contained-fullscreen .dialog-body ::slotted(*) {
+  flex: 1;
+  min-height: 0;
+}
+
+/* Responsive: auto fullscreen on mobile when enabled (portrait) */
+@media (max-width: 576px),
+  (max-height: 576px) and (orientation: landscape) {
+  .backdrop:has(.fullscreen-on-mobile) {
+    background-color: transparent;
+  }
+
+  .dialog-content.fullscreen-on-mobile {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    max-width: 100vw;
+    max-height: 100vh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+
+  .dialog-content.fullscreen-on-mobile .dialog-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dialog-content.fullscreen-on-mobile .dialog-body ::slotted(*) {
+    flex: 1;
+    min-height: 0;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kritzel-dialog-header-padding, 16px 20px);
+  border-bottom: var(--kritzel-dialog-header-border, 1px solid #ebebeb);
+  gap: 12px;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: var(--kritzel-dialog-title-font-size, 18px);
+  font-weight: var(--kritzel-dialog-title-font-weight, 600);
+  color: var(--kritzel-dialog-title-color, #1a1a1a);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kritzel-dialog-close-button-border-radius, 6px);
+  background-color: var(--kritzel-dialog-close-button-background, transparent);
+  color: var(--kritzel-dialog-close-button-color, #666666);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.close-button:hover {
+  background-color: var(--kritzel-dialog-close-button-hover-background, #f5f5f5);
+  color: var(--kritzel-dialog-close-button-hover-color, #1a1a1a);
+}
+
+.close-button:active {
+  background-color: var(--kritzel-dialog-close-button-active-background, #ebebeb);
+}
+
+.close-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.dialog-body {
+  padding: var(--kritzel-dialog-body-padding, 20px);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kritzel-dialog-footer-gap, 8px);
+  padding: var(--kritzel-dialog-footer-padding, 16px 20px);
+  border-top: var(--kritzel-dialog-footer-border, 1px solid #ebebeb);
+}
+
+/* Slotted content styling hints */
+::slotted([slot='header']) {
+  flex: 1;
+}
+
+::slotted([slot='footer']) {
+  display: contents;
+}