kritzel-stencil 0.4.19 → 0.4.21

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -1,332 +1,332 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  user-select: none;
-  max-width: 100%;
-  z-index: 1;
-}
-
-:host(.mobile) {
-  --kritzel-controls-control-hover-background-color: transparent;
-  --kritzel-controls-control-active-background-color: transparent;
-}
-
-.kritzel-controls {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--kritzel-controls-gap, 8px);
-  height: 100%;
-  padding: var(--kritzel-controls-padding, 8px);
-  background-color: var(--kritzel-controls-background-color, #ffffff);
-  border-radius: var(--kritzel-controls-border-radius, 16px);
-  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-controls-border, 1px solid #ebebeb);
-  z-index: 1;
-  position: relative;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.kritzel-tools-scroll {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--kritzel-controls-gap, 8px);
-  overflow-x: auto;
-  overflow-y: hidden;
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 4px;
-  margin: -4px;
-
-  /* Hide scrollbar for all browsers */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.kritzel-tools-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-/* Scroll indicator gradients */
-.scroll-indicator-left,
-.scroll-indicator-right {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 32px;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease-out;
-  z-index: 1;
-}
-
-.scroll-indicator-left {
-  left: 0;
-  background: linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);
-  border-radius: var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px);
-}
-
-.scroll-indicator-right {
-  right: 0;
-  background: linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);
-  border-radius: 0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0;
-}
-
-.scroll-indicator-left.visible,
-.scroll-indicator-right.visible {
-  opacity: 1;
-}
-
-.kritzel-control {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--kritzel-controls-control-color, #000000);
-  border-radius: var(--kritzel-controls-control-border-radius, 12px);
-  padding: var(--kritzel-controls-control-padding, 8px);
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-  font-weight: bold;
-}
-
-.kritzel-control:focus,
-.kritzel-control:hover {
-  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.kritzel-control:active {
-  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.kritzel-control.selected,
-.kritzel-control.selected:hover,
-.kritzel-control.selected:active {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
-  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
-}
-
-.kritzel-control.selected:focus {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;
-
-}
-
-.kritzel-control-separator {
-  width: 1px;
-  height: 24px;
-  background-color: var(--kritzel-controls-separator-color, #ebebeb);
-  margin: 0 4px;
-}
-
-
-/* Split-button control styles */
-.kritzel-control-split {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: var(--kritzel-controls-control-border-radius, 12px);
-  color: var(--kritzel-controls-control-color, #000000);
-}
-
-.kritzel-control-split .kritzel-control-main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--kritzel-controls-control-padding, 8px);
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--kritzel-controls-control-border-radius, 12px);
-  color: inherit;
-}
-
-/* When selected, main button only has left-rounded corners (dropdown appears on right) */
-.kritzel-control-split.selected .kritzel-control-main {
-  border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);
-}
-
-.kritzel-control-split .kritzel-control-dropdown {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-  border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;
-  color: inherit;
-
-  /* Hidden state - collapsed with no visibility */
-  width: 0;
-  padding: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-
-  /* Smooth transition */
-  transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;
-}
-
-.kritzel-control-split .kritzel-control-dropdown.visible {
-  width: auto;
-  padding: 0 6px;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.kritzel-control-split .kritzel-control-main:focus,
-.kritzel-control-split .kritzel-control-main:hover,
-.kritzel-control-split .kritzel-control-dropdown:focus,
-.kritzel-control-split .kritzel-control-dropdown:hover {
-  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.kritzel-control-split .kritzel-control-main:active,
-.kritzel-control-split .kritzel-control-dropdown:active {
-  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.kritzel-control-split.selected {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
-  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
-}
-
-.kritzel-control-split.selected .kritzel-control-main:hover,
-.kritzel-control-split.selected .kritzel-control-dropdown:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
-/* Submenu content styles (positioned by kritzel-tooltip) */
-.kritzel-submenu-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--kritzel-submenu-gap, 4px);
-  min-width: 140px;
-}
-
-.kritzel-submenu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border-radius: 8px;
-  color: var(--kritzel-controls-control-color, #000000);
-  font-size: 14px;
-  text-align: left;
-  white-space: nowrap;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.kritzel-submenu-item:hover {
-  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.kritzel-submenu-item.active {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);
-  color: var(--kritzel-controls-control-selected-color, #ffffff);
-}
-
-.kritzel-submenu-item.active:hover {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);
-}
-
-.kritzel-config-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  flex-shrink: 0;
-
-  /* Hidden state - collapsed */
-  width: 0;
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  margin-left: calc(-1 * var(--kritzel-controls-gap, 8px));
-
-  /* Smooth transition */
-  transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;
-}
-
-.kritzel-config-container.visible {
-  width: 40px;
-  opacity: 1;
-  pointer-events: auto;
-  margin-left: 0;
-  overflow: visible;
-}
-
-/* Left gradient on config container */
-.config-gradient-left {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -32px;
-  width: 32px;
-  background: linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.2s ease-out;
-}
-
-.config-gradient-left.visible {
-  opacity: 1;
-}
-
-.kritzel-config {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border-radius: 50%;
-}
-
-.color-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
-}
-
-.font-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
-}
-
-.no-config {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-  border: 1px dashed gray;
-}
-
-kritzel-tooltip {
-  z-index: 10001;
+:host {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  max-width: 100%;
+  z-index: 1;
+}
+
+:host(.mobile) {
+  --kritzel-controls-control-hover-background-color: transparent;
+  --kritzel-controls-control-active-background-color: transparent;
+}
+
+.kritzel-controls {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kritzel-controls-gap, 8px);
+  height: 100%;
+  padding: var(--kritzel-controls-padding, 8px);
+  background-color: var(--kritzel-controls-background-color, #ffffff);
+  border-radius: var(--kritzel-controls-border-radius, 16px);
+  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-controls-border, 1px solid #ebebeb);
+  z-index: 1;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kritzel-tools-scroll {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kritzel-controls-gap, 8px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px;
+  margin: -4px;
+
+  /* Hide scrollbar for all browsers */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.kritzel-tools-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Scroll indicator gradients */
+.scroll-indicator-left,
+.scroll-indicator-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 32px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+  z-index: 1;
+}
+
+.scroll-indicator-left {
+  left: 0;
+  background: linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);
+  border-radius: var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px);
+}
+
+.scroll-indicator-right {
+  right: 0;
+  background: linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);
+  border-radius: 0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0;
+}
+
+.scroll-indicator-left.visible,
+.scroll-indicator-right.visible {
+  opacity: 1;
+}
+
+.kritzel-control {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--kritzel-controls-control-color, #000000);
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  padding: var(--kritzel-controls-control-padding, 8px);
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  font-weight: bold;
+}
+
+.kritzel-control:focus,
+.kritzel-control:hover {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-control:active {
+  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.kritzel-control.selected,
+.kritzel-control.selected:hover,
+.kritzel-control.selected:active {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-control.selected:focus {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007bffe3) !important;
+
+}
+
+.kritzel-control-separator {
+  width: 1px;
+  height: 24px;
+  background-color: var(--kritzel-controls-separator-color, #ebebeb);
+  margin: 0 4px;
+}
+
+
+/* Split-button control styles */
+.kritzel-control-split {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  color: var(--kritzel-controls-control-color, #000000);
+}
+
+.kritzel-control-split .kritzel-control-main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--kritzel-controls-control-padding, 8px);
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-controls-control-border-radius, 12px);
+  color: inherit;
+}
+
+/* When selected, main button only has left-rounded corners (dropdown appears on right) */
+.kritzel-control-split.selected .kritzel-control-main {
+  border-radius: var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px);
+}
+
+.kritzel-control-split .kritzel-control-dropdown {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;
+  color: inherit;
+
+  /* Hidden state - collapsed with no visibility */
+  width: 0;
+  padding: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+
+  /* Smooth transition */
+  transition: width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out;
+}
+
+.kritzel-control-split .kritzel-control-dropdown.visible {
+  width: auto;
+  padding: 0 6px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.kritzel-control-split .kritzel-control-main:focus,
+.kritzel-control-split .kritzel-control-main:hover,
+.kritzel-control-split .kritzel-control-dropdown:focus,
+.kritzel-control-split .kritzel-control-dropdown:hover {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-control-split .kritzel-control-main:active,
+.kritzel-control-split .kritzel-control-dropdown:active {
+  background-color: var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.kritzel-control-split.selected {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF) !important;
+  color: var(--kritzel-controls-control-selected-color, #ffffff) !important;
+}
+
+.kritzel-control-split.selected .kritzel-control-main:hover,
+.kritzel-control-split.selected .kritzel-control-dropdown:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Submenu content styles (positioned by kritzel-tooltip) */
+.kritzel-submenu-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kritzel-submenu-gap, 4px);
+  min-width: 140px;
+}
+
+.kritzel-submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 8px;
+  color: var(--kritzel-controls-control-color, #000000);
+  font-size: 14px;
+  text-align: left;
+  white-space: nowrap;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.kritzel-submenu-item:hover {
+  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.kritzel-submenu-item.active {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);
+  color: var(--kritzel-controls-control-selected-color, #ffffff);
+}
+
+.kritzel-submenu-item.active:hover {
+  background-color: var(--kritzel-controls-control-selected-background-color, #007AFF);
+}
+
+.kritzel-config-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
+
+  /* Hidden state - collapsed */
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  margin-left: calc(-1 * var(--kritzel-controls-gap, 8px));
+
+  /* Smooth transition */
+  transition: width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out;
+}
+
+.kritzel-config-container.visible {
+  width: 40px;
+  opacity: 1;
+  pointer-events: auto;
+  margin-left: 0;
+  overflow: visible;
+}
+
+/* Left gradient on config container */
+.config-gradient-left {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -32px;
+  width: 32px;
+  background: linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+.config-gradient-left.visible {
+  opacity: 1;
+}
+
+.kritzel-config {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 50%;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.font-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.no-config {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  border: 1px dashed gray;
+}
+
+kritzel-tooltip {
+  z-index: 10001;
 }