aeico-components 0.1.2 → 0.1.4

package/src/styles/components/dropdown-item.css

@@ -1,91 +1,91 @@
-:host {
-  display: block;
-
-  --dropdown-item-padding: 0.5rem 0.875rem;
-  --dropdown-item-bg: transparent;
-  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
-  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
-  --dropdown-item-color: var(--color-text-main, inherit);
-  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
-  --dropdown-item-font-size: 0.9375rem;
-  --dropdown-item-gap: 0.5rem;
-  --dropdown-item-transition: background 0.1s;
-  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: var(--dropdown-item-gap);
-  width: 100%;
-  padding: var(--dropdown-item-padding);
-  font-size: var(--dropdown-item-font-size);
-  font-family: inherit;
-  color: var(--dropdown-item-color);
-  background: var(--dropdown-item-bg);
-  border: none;
-  border-radius: var(--dropdown-item-border-radius);
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  box-sizing: border-box;
-  transition: var(--dropdown-item-transition);
-  outline: none;
-}
-
-.item:hover:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--dropdown-item-bg-hover);
-}
-
-.item:active:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--dropdown-item-bg-active);
-}
-
-.item:focus-visible {
-  background: var(--dropdown-item-bg-hover);
-  outline: 2px solid var(--color-primary, #0e639c);
-  outline-offset: -2px;
-}
-
-/* disabled */
-:host([disabled]) .item,
-.item:disabled {
-  color: var(--dropdown-item-color-disabled);
-  cursor: default;
-  pointer-events: none;
-}
-
-/* Active item — current selection, current route, etc. */
-:host([active]) .item {
-  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
-  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
-  font-weight: 500;
-}
-
-/* Checkbox mode — fixed-width indicator column */
-.check-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  flex-shrink: 0;
-}
-
-/* CSS-drawn checkmark (border trick) */
-.check-indicator::after {
-  content: '';
-  display: block;
-  width: 0.3em;
-  height: 0.55em;
-  border-right: 0.125em solid currentColor;
-  border-bottom: 0.125em solid currentColor;
-  transform: rotate(45deg) translateY(-0.1em);
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-
-:host([checked]) .check-indicator::after {
-  opacity: 1;
-}
+:host {
+  display: block;
+
+  --dropdown-item-padding: 0.5rem 0.875rem;
+  --dropdown-item-bg: transparent;
+  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
+  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
+  --dropdown-item-color: var(--color-text-main, inherit);
+  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
+  --dropdown-item-font-size: 0.9375rem;
+  --dropdown-item-gap: 0.5rem;
+  --dropdown-item-transition: background 0.1s;
+  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-item-gap);
+  width: 100%;
+  padding: var(--dropdown-item-padding);
+  font-size: var(--dropdown-item-font-size);
+  font-family: inherit;
+  color: var(--dropdown-item-color);
+  background: var(--dropdown-item-bg);
+  border: none;
+  border-radius: var(--dropdown-item-border-radius);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: var(--dropdown-item-transition);
+  outline: none;
+}
+
+.item:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-hover);
+}
+
+.item:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-active);
+}
+
+.item:focus-visible {
+  background: var(--dropdown-item-bg-hover);
+  outline: 2px solid var(--color-primary, #0e639c);
+  outline-offset: -2px;
+}
+
+/* disabled */
+:host([disabled]) .item,
+.item:disabled {
+  color: var(--dropdown-item-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Active item — current selection, current route, etc. */
+:host([active]) .item {
+  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
+  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
+  font-weight: 500;
+}
+
+/* Checkbox mode — fixed-width indicator column */
+.check-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  flex-shrink: 0;
+}
+
+/* CSS-drawn checkmark (border trick) */
+.check-indicator::after {
+  content: '';
+  display: block;
+  width: 0.3em;
+  height: 0.55em;
+  border-right: 0.125em solid currentColor;
+  border-bottom: 0.125em solid currentColor;
+  transform: rotate(45deg) translateY(-0.1em);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+:host([checked]) .check-indicator::after {
+  opacity: 1;
+}

package/src/styles/components/dropdown.css

@@ -1,179 +1,179 @@
-:host {
-  display: inline-block;
-  position: relative;
-
-  --dropdown-z-index: 1000;
-  --dropdown-bg: var(--surface-overlay, #fff);
-  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-  --dropdown-border-radius: var(--ae-radius-md, 6px);
-  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  --dropdown-min-width: 10rem;
-  --dropdown-padding: 0.25rem 0;
-}
-
-.trigger-wrapper {
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-}
-
-/* Internal trigger rendered when `label` prop is set.
-   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)
-   map their own tokens to these variables via ::slotted(ae-dropdown). */
-.trigger-label {
-  display: inline-flex;
-  align-items: center;
-  height: var(--dropdown-trigger-height, auto);
-  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);
-  color: var(--dropdown-trigger-color, inherit);
-  background: var(--dropdown-trigger-bg, none);
-  border: none;
-  border-radius: var(--dropdown-trigger-radius, 0);
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--dropdown-trigger-font-size, inherit);
-  white-space: nowrap;
-  transition: color 0.15s ease, background-color 0.15s ease;
-  outline-offset: 2px;
-}
-
-.trigger-label:hover {
-  color: var(--dropdown-trigger-hover-color, inherit);
-  background-color: var(--dropdown-trigger-hover-bg, transparent);
-}
-
-:host([disabled]) .trigger-label {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */
-.ae-dropdown-arrow {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 0.3em;
-  vertical-align: 0.2em;
-  flex-shrink: 0;
-}
-.ae-dropdown-arrow--bottom {
-  border-top: 0.35em solid;
-  border-right: 0.35em solid transparent;
-  border-left: 0.35em solid transparent;
-}
-.ae-dropdown-arrow--top {
-  border-bottom: 0.35em solid;
-  border-right: 0.35em solid transparent;
-  border-left: 0.35em solid transparent;
-}
-.ae-dropdown-arrow--right {
-  border-left: 0.35em solid;
-  border-top: 0.35em solid transparent;
-  border-bottom: 0.35em solid transparent;
-}
-.ae-dropdown-arrow--left {
-  border-right: 0.35em solid;
-  border-top: 0.35em solid transparent;
-  border-bottom: 0.35em solid transparent;
-}
-
-.panel {
-  display: none;
-  position: absolute;
-  z-index: var(--dropdown-z-index);
-  background: var(--dropdown-bg);
-  border: var(--dropdown-border);
-  border-radius: var(--dropdown-border-radius);
-  box-shadow: var(--dropdown-shadow);
-  min-width: var(--dropdown-min-width);
-  padding: var(--dropdown-padding);
-  box-sizing: border-box;
-  /* Prevent panel from being wider than viewport */
-  max-width: calc(100vw - 16px);
-}
-
-.panel.open {
-  display: block;
-}
-
-/* placement variants */
-.panel.placement-bottom-start {
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-}
-
-.panel.placement-bottom-end {
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-}
-
-.panel.placement-bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 4px;
-}
-
-.panel.placement-top-start {
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-}
-
-.panel.placement-top-end {
-  bottom: 100%;
-  right: 0;
-  margin-bottom: 4px;
-}
-
-.panel.placement-top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 4px;
-}
-
-/* right placements */
-.panel.placement-right-start {
-  top: 0;
-  left: 100%;
-  margin-left: 4px;
-}
-
-.panel.placement-right-end {
-  bottom: 0;
-  left: 100%;
-  margin-left: 4px;
-}
-
-.panel.placement-right {
-  top: 50%;
-  left: 100%;
-  transform: translateY(-50%);
-  margin-left: 4px;
-}
-
-/* left placements */
-.panel.placement-left-start {
-  top: 0;
-  right: 100%;
-  margin-right: 4px;
-}
-
-.panel.placement-left-end {
-  bottom: 0;
-  right: 100%;
-  margin-right: 4px;
-}
-
-.panel.placement-left {
-  top: 50%;
-  right: 100%;
-  transform: translateY(-50%);
-  margin-right: 4px;
-}
+:host {
+  display: inline-block;
+  position: relative;
+
+  --dropdown-z-index: 1000;
+  --dropdown-bg: var(--surface-overlay, #fff);
+  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
+  --dropdown-border-radius: var(--ae-radius-md, 6px);
+  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --dropdown-min-width: 10rem;
+  --dropdown-padding: 0.25rem 0;
+}
+
+.trigger-wrapper {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+/* Internal trigger rendered when `label` prop is set.
+   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)
+   map their own tokens to these variables via ::slotted(ae-dropdown). */
+.trigger-label {
+  display: inline-flex;
+  align-items: center;
+  height: var(--dropdown-trigger-height, auto);
+  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);
+  color: var(--dropdown-trigger-color, inherit);
+  background: var(--dropdown-trigger-bg, none);
+  border: none;
+  border-radius: var(--dropdown-trigger-radius, 0);
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--dropdown-trigger-font-size, inherit);
+  white-space: nowrap;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  outline-offset: 2px;
+}
+
+.trigger-label:hover {
+  color: var(--dropdown-trigger-hover-color, inherit);
+  background-color: var(--dropdown-trigger-hover-bg, transparent);
+}
+
+:host([disabled]) .trigger-label {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */
+.ae-dropdown-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 0.3em;
+  vertical-align: 0.2em;
+  flex-shrink: 0;
+}
+.ae-dropdown-arrow--bottom {
+  border-top: 0.35em solid;
+  border-right: 0.35em solid transparent;
+  border-left: 0.35em solid transparent;
+}
+.ae-dropdown-arrow--top {
+  border-bottom: 0.35em solid;
+  border-right: 0.35em solid transparent;
+  border-left: 0.35em solid transparent;
+}
+.ae-dropdown-arrow--right {
+  border-left: 0.35em solid;
+  border-top: 0.35em solid transparent;
+  border-bottom: 0.35em solid transparent;
+}
+.ae-dropdown-arrow--left {
+  border-right: 0.35em solid;
+  border-top: 0.35em solid transparent;
+  border-bottom: 0.35em solid transparent;
+}
+
+.panel {
+  display: none;
+  position: absolute;
+  z-index: var(--dropdown-z-index);
+  background: var(--dropdown-bg);
+  border: var(--dropdown-border);
+  border-radius: var(--dropdown-border-radius);
+  box-shadow: var(--dropdown-shadow);
+  min-width: var(--dropdown-min-width);
+  padding: var(--dropdown-padding);
+  box-sizing: border-box;
+  /* Prevent panel from being wider than viewport */
+  max-width: calc(100vw - 16px);
+}
+
+.panel.open {
+  display: block;
+}
+
+/* placement variants */
+.panel.placement-bottom-start {
+  top: 100%;
+  left: 0;
+  margin-top: 4px;
+}
+
+.panel.placement-bottom-end {
+  top: 100%;
+  right: 0;
+  margin-top: 4px;
+}
+
+.panel.placement-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+}
+
+.panel.placement-top-start {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+}
+
+.panel.placement-top-end {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 4px;
+}
+
+.panel.placement-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 4px;
+}
+
+/* right placements */
+.panel.placement-right-start {
+  top: 0;
+  left: 100%;
+  margin-left: 4px;
+}
+
+.panel.placement-right-end {
+  bottom: 0;
+  left: 100%;
+  margin-left: 4px;
+}
+
+.panel.placement-right {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+  margin-left: 4px;
+}
+
+/* left placements */
+.panel.placement-left-start {
+  top: 0;
+  right: 100%;
+  margin-right: 4px;
+}
+
+.panel.placement-left-end {
+  bottom: 0;
+  right: 100%;
+  margin-right: 4px;
+}
+
+.panel.placement-left {
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  margin-right: 4px;
+}