aeico-components 0.1.1

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

@@ -0,0 +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;
+}

package/src/styles/components/dropdown.css

@@ -0,0 +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;
+}

package/src/styles/components/icon-button.css

@@ -0,0 +1,116 @@
+/* @deprecated – Use <ae-button> with <ae-icon> slot instead. */
+
+:host {
+  display: inline-flex;
+  font-size: var(--size-m);
+  --btn-solid-bg:          var(--color-solid);
+  --btn-solid-bg-hover:    var(--color-solid-hover);
+  --btn-solid-bg-active:   var(--color-solid-active);
+  --btn-solid-color:       var(--color-on-solid);
+  --btn-solid-color-hover: var(--color-on-solid-hover);
+  --btn-border:            var(--color-border);
+  --btn-border-hover:      var(--color-border-hover);
+  --btn-accent:            var(--color-accent);
+  --btn-accent-hover:      var(--color-accent-hover);
+  --btn-subtle-bg:         var(--color-subtle);
+  --btn-subtle-bg-hover:   var(--color-subtle-hover);
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  user-select: none;
+  flex-shrink: 0;
+  width:  2.286em;
+  height: 2.286em;
+  --ib-icon-size: 1.286em;
+  background:  var(--btn-solid-bg);
+  border: 1px solid var(--btn-border);
+  color:       var(--btn-solid-color);
+}
+
+button:focus  { outline: none; }
+button:active { transform: translateY(1px); }
+
+button:hover:not(:disabled) {
+  background:   var(--btn-solid-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+
+button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([size="xs"]) button,
+:host([size="sm"]) button { border-radius: 3px; }
+
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="subtle"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+:host([variant="text"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+.icon-svg {
+  display: block;
+  width:  var(--ib-icon-size);
+  height: var(--ib-icon-size);
+  fill: var(--icon-fill, currentColor);
+  stroke: var(--icon-stroke, none);
+  stroke-width: var(--icon-stroke-width, 2);
+  stroke-linecap: var(--icon-stroke-linecap, round);
+  stroke-linejoin: var(--icon-stroke-linejoin, round);
+  pointer-events: none;
+  overflow: visible;
+  flex-shrink: 0;
+}

package/src/styles/components/icon.css

@@ -0,0 +1,29 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  width:  1em;
+  height: 1em;
+  color: inherit;
+  flex-shrink: 0;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+:host([color]) {
+  color: var(--color-solid);
+}
+
+.icon-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--icon-fill, currentColor);
+  stroke: var(--icon-stroke, none);
+  stroke-width: var(--icon-stroke-width, 2);
+  stroke-linecap: var(--icon-stroke-linecap, round);
+  stroke-linejoin: var(--icon-stroke-linejoin, round);
+  pointer-events: none;
+  overflow: visible;
+}

package/src/styles/components/navbar.css

@@ -0,0 +1,250 @@
+:host {
+  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */
+  display: block;
+  position: static;
+  top: auto;
+  z-index: var(--ae-navbar-z-index, 100);
+  box-sizing: border-box;
+  height: var(--ae-navbar-height, 3.25rem);
+  border-radius: var(--ae-navbar-radius, 0);
+
+  /* color */
+  background: var(--ae-navbar-bg, var(--surface-base));
+  color: var(--ae-navbar-color, var(--color-text-main));
+  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));
+  box-shadow: var(--ae-navbar-shadow, none);
+
+  /* layout tokens — declared here so they are clearly part of the public API */
+  --ae-navbar-radius: 0;
+  /* Default padding-x references the global layout token so ae-navbar content
+     automatically aligns with .container / .container-fluid in light DOM.
+     Override with --ae-navbar-padding-x to decouple if needed. */
+  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);
+  --ae-navbar-gap: 0.5rem;
+
+  /* link style tokens — text mode defaults.
+     CSS custom properties inherit into slotted content, so
+     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */
+  --ae-navbar-link-color: inherit;
+  --ae-navbar-link-font-size: inherit;
+  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */
+  --ae-navbar-link-radius: 0;
+  --ae-navbar-link-hover-color: var(--color-text-link-hover);
+  --ae-navbar-link-hover-bg: transparent;
+  --ae-navbar-link-active-color: var(--color-text-link);
+  --ae-navbar-link-active-font-weight: 600;
+}
+
+:host([sticky]) {
+  position: sticky;
+  top: 0;
+}
+
+:host([color]) {
+  --ae-navbar-bg: var(--color-solid);
+  --ae-navbar-color: var(--color-on-solid);
+  --ae-navbar-border-color: transparent;
+  --ae-navbar-link-hover-color: var(--color-on-solid);
+  --ae-navbar-link-active-color: var(--color-on-solid);
+}
+
+/* block preset: hover shows a subtle filled block */
+:host([appearance="block"]) {
+  --ae-navbar-link-hover-bg: var(--color-bg-subtle);
+  --ae-navbar-link-hover-color: inherit;
+}
+
+/* block preset on colored navbar: use semi-transparent white */
+:host([color][appearance="block"]) {
+  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);
+  --ae-navbar-link-hover-color: var(--color-on-solid);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--ae-navbar-padding-x);
+  gap: var(--ae-navbar-gap);
+  box-sizing: border-box;
+}
+
+[part="brand"] {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+}
+
+/* nav wraps start + end; takes all remaining space */
+[part="nav"] {
+  flex: 1 1 auto;
+  display: flex;
+  align-self: stretch;   /* stretch to host height so children can fill it */
+  align-items: stretch;
+  min-width: 0;
+}
+
+[part="start"],
+[part="end"] {
+  flex: 0 0 auto;
+  display: flex;
+  align-self: stretch;
+}
+
+[part="start"] {
+  align-items: stretch;  /* slotted <a> will stretch to full height */
+  gap: var(--ae-navbar-start-gap, 0);
+}
+
+[part="end"] {
+  align-items: center;   /* buttons / avatars stay vertically centred */
+  gap: var(--ae-navbar-end-gap, 0.5rem);
+  margin-left: auto;
+}
+
+/* hamburger — hidden on desktop */
+[part="hamburger"] {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  width: var(--ae-navbar-hamburger-size, 2rem);
+  height: var(--ae-navbar-hamburger-size, 2rem);
+  margin-left: auto;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--ae-navbar-hamburger-color, inherit);
+}
+
+[part="hamburger"]:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+[part="hamburger"] span {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+/* Brand link — sensible defaults, no full-height stretch */
+::slotted(a[slot="brand"]) {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  font-weight: 700;
+  font-size: 1.05rem;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* Nav links (start / end slots) — fill full navbar height for block hover effect */
+::slotted(a[slot="start"]),
+::slotted(a[slot="end"]) {
+  display: inline-flex;
+  align-items: center;
+  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */
+  /* !important overrides document-level * { padding: 0 } reset */
+  padding: 0 var(--ae-navbar-link-padding-x) !important;
+  border-radius: var(--ae-navbar-link-radius);
+  color: var(--ae-navbar-link-color);
+  font-size: var(--ae-navbar-link-font-size);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  outline-offset: 2px;
+}
+
+::slotted(a[slot="start"]:hover),
+::slotted(a[slot="end"]:hover) {
+  color: var(--ae-navbar-link-hover-color);
+  background-color: var(--ae-navbar-link-hover-bg);
+}
+
+::slotted(a[slot="start"][aria-current="page"]),
+::slotted(a[slot="end"][aria-current="page"]) {
+  color: var(--ae-navbar-link-active-color);
+  font-weight: var(--ae-navbar-link-active-font-weight);
+}
+
+/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */
+::slotted(ae-dropdown) {
+  align-self: stretch;
+  --dropdown-trigger-height: 100%;
+  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);
+  --dropdown-trigger-color: var(--ae-navbar-link-color);
+  --dropdown-trigger-bg: none;
+  --dropdown-trigger-radius: var(--ae-navbar-link-radius);
+  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);
+  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);
+  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);
+}
+
+@media (max-width: 768px) {
+  /* collapse the nav container */
+  [part="nav"] {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    padding: 0.5rem 0;
+    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));
+    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));
+    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
+    z-index: 1;
+  }
+
+  :host([open]) [part="nav"] {
+    display: flex;
+  }
+
+  /* stack start/end vertically inside the panel */
+  [part="start"],
+  [part="end"] {
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: auto;
+    gap: 0;
+    margin-left: 0;
+    width: 100%;
+  }
+
+  /* Mobile: links revert to auto height and add vertical padding */
+  ::slotted(a[slot="start"]),
+  ::slotted(a[slot="end"]) {
+    height: auto;
+    width: 100%;
+    padding: 0.75rem var(--ae-navbar-link-padding-x);
+    border-radius: 0;
+  }
+
+  /* show hamburger */
+  [part="hamburger"] {
+    display: flex;
+  }
+
+  /* hamburger → × animation */
+  :host([open]) [part="hamburger"] span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+
+  :host([open]) [part="hamburger"] span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+
+  :host([open]) [part="hamburger"] span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+}