@anyblades/blades 3.1.0-beta.7 → 3.1.0

package/css/layered/components/_dropdown-popover.css

@@ -0,0 +1,89 @@
+:is(ul, menu)[popover] {
+  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-dropdown-background-color);
+  min-width: fit-content;
+  box-shadow: var(--pico-dropdown-box-shadow);
+  color: var(--pico-dropdown-color);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--pico-transition),
+    overlay var(--pico-transition) allow-discrete,
+    display var(--pico-transition) allow-discrete;
+  margin: auto;
+  padding: 0;
+
+  &:not(:popover-open) {
+    display: none;
+  }
+
+  &:popover-open {
+    opacity: 1;
+    display: block;
+  }
+
+  & li {
+    padding: calc(var(--pico-form-element-spacing-vertical) * .5)
+      var(--pico-form-element-spacing-horizontal);
+    margin-bottom: 0;
+    list-style: none;
+    display: block;
+
+    &:first-of-type {
+      margin-top: calc(var(--pico-form-element-spacing-vertical) * .5);
+    }
+
+    &:last-of-type {
+      margin-bottom: calc(var(--pico-form-element-spacing-vertical) * .5);
+    }
+
+    &:has(label):hover {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+  }
+
+  & li a {
+    margin: calc(var(--pico-form-element-spacing-vertical) * -.5)
+      calc(var(--pico-form-element-spacing-horizontal) * -1);
+    padding: calc(var(--pico-form-element-spacing-vertical) * .5)
+      var(--pico-form-element-spacing-horizontal);
+    color: var(--pico-dropdown-color);
+    text-overflow: ellipsis;
+    border-radius: 0;
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+
+    &:is(:hover, :focus, :active, :focus-visible, [aria-current]:not([aria-current="false"])) {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+  }
+
+  & li label {
+    width: 100%;
+  }
+}
+
+nav :is(ul, menu)[popover]:not(.does-not-exist) {
+  margin: auto;
+}
+
+@starting-style {
+  :is(ul, menu)[popover]:popover-open {
+    opacity: 0;
+  }
+}
+
+@supports (position-area: bottom) {
+  :is(ul, menu)[popover], nav :is(ul, menu)[popover]:not(.does-not-exist) {
+    margin: 0;
+    margin-top: var(--pico-outline-width);
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block, flip-inline;
+    inset: auto;
+
+    &:dir(rtl) {
+      position-area: bottom span-left;
+    }
+  }
+}

package/css/layered/components/_dropdown.css

@@ -0,0 +1,188 @@
+:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
+  --pico-dropdown-background-color: light-dark(#fff, #181c25);
+  --pico-dropdown-border-color: light-dark(#eff1f4, #202632);
+  --pico-dropdown-box-shadow: var(--pico-box-shadow);
+  --pico-dropdown-color: var(--pico-color);
+  --pico-dropdown-hover-background-color: light-dark(#eff1f4, #202632);
+}
+
+details.dropdown {
+  border-bottom: none;
+  position: relative;
+}
+
+details.dropdown > summary:after, details.dropdown > button:after, details.dropdown > a:after {
+  width: 1rem;
+  height: calc(1rem * var(--pico-line-height, 1.5));
+  float: right;
+  background-image: var(--pico-icon-chevron);
+  content: "";
+  background-position: 100%;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  margin-inline-start: .25rem;
+  display: block;
+  transform: rotate(0) translateX(.2rem);
+}
+
+nav details.dropdown {
+  margin-bottom: 0;
+}
+
+details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
+      var(--pico-border-width) * 2);
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+  border: var(--pico-border-width) solid var(--pico-form-element-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-form-element-background-color);
+  color: var(--pico-form-element-placeholder-color);
+  line-height: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  transition: background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
+  border-color: var(--pico-form-element-active-border-color);
+  background-color: var(--pico-form-element-active-background-color);
+}
+
+details.dropdown > summary:not([role]):focus {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
+}
+
+details.dropdown > summary:not([role]):focus-visible {
+  outline: none;
+}
+
+details.dropdown > summary:not([role])[aria-invalid="false"] {
+  --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
+  --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
+  --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
+}
+
+details.dropdown > summary:not([role])[aria-invalid="true"] {
+  --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
+  --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
+  --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
+}
+
+nav details.dropdown {
+  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
+  display: inline-block;
+}
+
+nav details.dropdown > summary:after {
+  transform: rotate(0) translateX(0);
+}
+
+nav details.dropdown > summary:not([role]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
+    var(--pico-nav-link-spacing-horizontal);
+}
+
+nav details.dropdown > summary:not([role]):focus-visible {
+  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+}
+
+details.dropdown > summary + ul {
+  z-index: 99;
+  width: 100%;
+  min-width: fit-content;
+  margin: 0;
+  margin-top: var(--pico-outline-width);
+  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-dropdown-background-color);
+  box-shadow: var(--pico-dropdown-box-shadow);
+  color: var(--pico-dropdown-color);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--pico-transition),
+    transform 0s ease-in-out 1s;
+  flex-direction: column;
+  padding: 0;
+  display: flex;
+  position: absolute;
+  left: 0;
+}
+
+details.dropdown > summary + ul[dir="rtl"] {
+  left: auto;
+  right: 0;
+}
+
+details.dropdown > summary + ul li {
+  width: 100%;
+  padding: calc(var(--pico-form-element-spacing-vertical) * .5)
+    var(--pico-form-element-spacing-horizontal);
+  margin-bottom: 0;
+  list-style: none;
+}
+
+details.dropdown > summary + ul li:first-of-type {
+  margin-top: calc(var(--pico-form-element-spacing-vertical) * .5);
+}
+
+details.dropdown > summary + ul li:last-of-type {
+  margin-bottom: calc(var(--pico-form-element-spacing-vertical) * .5);
+}
+
+details.dropdown > summary + ul li a {
+  margin: calc(var(--pico-form-element-spacing-vertical) * -.5)
+    calc(var(--pico-form-element-spacing-horizontal) * -1);
+  padding: calc(var(--pico-form-element-spacing-vertical) * .5)
+    var(--pico-form-element-spacing-horizontal);
+  color: var(--pico-dropdown-color);
+  text-overflow: ellipsis;
+  border-radius: 0;
+  text-decoration: none;
+  display: block;
+  overflow: hidden;
+}
+
+details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
+  background-color: var(--pico-dropdown-hover-background-color);
+}
+
+details.dropdown > summary + ul li label {
+  width: 100%;
+}
+
+details.dropdown > summary + ul li:has(label):hover {
+  background-color: var(--pico-dropdown-hover-background-color);
+}
+
+details.dropdown[open] > summary {
+  margin-bottom: 0;
+}
+
+details.dropdown[open] > summary + ul {
+  opacity: 1;
+  transition: opacity var(--pico-transition),
+    transform 0s ease-in-out 0s;
+  transform: scaleY(1);
+}
+
+details.dropdown[open] > summary:before {
+  z-index: 1;
+  content: "";
+  cursor: default;
+  background: none;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  position: fixed;
+  inset: 0;
+}
+
+label > details.dropdown {
+  margin-top: calc(var(--pico-spacing) * .25);
+}

package/css/layered/components/_group.css

@@ -0,0 +1,89 @@
+:where(:scope), :host {
+  --pico-group-box-shadow: 0 0 0 #0000;
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
+    var(--pico-primary-focus);
+  --pico-group-box-shadow-focus-with-input: 0 0 0 .0625rem var(--pico-form-element-border-color);
+}
+
+[role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
+    var(--pico-secondary-focus);
+}
+
+[role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
+  --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
+    var(--pico-contrast-focus);
+}
+
+[role="search"], [role="group"] {
+  width: 100%;
+  margin-bottom: var(--pico-spacing);
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-group-box-shadow, 0 0 0 #0000);
+  vertical-align: middle;
+  transition: box-shadow var(--pico-transition);
+  display: inline-flex;
+  position: relative;
+}
+
+[role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"] > *, [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select {
+  flex: auto;
+  margin-bottom: 0;
+  position: relative;
+}
+
+[role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+}
+
+[role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+[role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] input:not([type="checkbox"], [type="radio"]):focus, [role="group"] select:focus {
+  z-index: 2;
+}
+
+[role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [type="submit"]:not(:first-child), [role="group"] [type="reset"]:not(:first-child), [role="group"] [type="button"]:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
+  margin-left: calc(var(--pico-border-width) * -1);
+}
+
+[role="search"] button, [role="search"] [type="submit"], [role="search"] [type="reset"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="reset"], [role="group"] [type="button"], [role="group"] [role="button"] {
+  width: auto;
+}
+
+@supports selector(:has(*)) {
+  [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
+  }
+
+  [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
+    border-color: #0000;
+  }
+
+  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
+  }
+
+  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
+    --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
+    --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
+  }
+
+  [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [type="submit"]:focus, [role="group"] [type="reset"]:focus, [role="group"] [type="button"]:focus, [role="group"] [role="button"]:focus {
+    box-shadow: none;
+  }
+}
+
+[role="search"] > :first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+
+[role="search"] > :last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}