@threadlabs/looma 0.17.3 → 0.18.0

package/components/ui-avatar/ui-avatar.html

@@ -18,8 +18,8 @@
     <prop name="shape" type="circle | square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
     <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
-    >Marks the person as active now, such as editing the same page: a ring in the success colour around the avatar. The ring is not announced, so say what it
-      means in alt ("Ada Lovelace, editing").</prop>
+    >Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt
+      ("Ada Lovelace, editing").</prop>
     <state name="hasImage" :value="false"></state>
     <state name="hasAuthoredImage" :value="false"></state>
     <state name="initials" :value="'?'"></state>
@@ -64,7 +64,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-      border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
       font: inherit;
@@ -80,6 +80,10 @@
       font-size: var(--ui-font-size-xs);
     }
 
+    :host-state([hasImage]) {
+      border-color: var(--ui-avatar-border, var(--ui-border-strong));
+    }
+
     :host-state([shape="square"]) {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }
@@ -87,7 +91,7 @@
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
     :host-state([active]) {
-      outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+      outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
       outline-offset: 1px;
     }
 

package/components/ui-badge/ui-badge.html

@@ -59,7 +59,7 @@
     }
 
     :host {
-      --_badge-surface: var(--ui-surface-subtle);
+      --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
       --_badge-text: var(--ui-text-secondary);
       /* Sit between the soft fill and its stronger theme ink. */
       --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
@@ -67,7 +67,7 @@
          surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
          mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
       --_ui-badge-color: var(--ui-badge-color);
-      --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+      --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
       --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
       --_badge-color-surface: var(--_badge-color-wash);
       --_badge-color-border: color-mix(in srgb, var(--_badge-color-wash) 75%, var(--_badge-color-ink) 25%);
@@ -135,32 +135,32 @@
     }
 
     :host-state([variant="subtle"][tone="accent"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :host-state([variant="subtle"][tone="danger"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :host-state([variant="subtle"][tone="success"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :host-state([variant="subtle"][tone="warning"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :host-state([variant="subtle"][tone="info"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
@@ -206,54 +206,48 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
-    /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
-       outline to follow: the edge is the fill. The end padding grows by the point's depth so the
-       label never runs into it. */
+    /* The clipped point needs an inset surface over an outer border-colour shape: a native border
+       has no diagonal edge to follow. Keep this edge for every tag variant. */
     :host-state([shape="tag"]) {
       --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
+      position: relative;
+      isolation: isolate;
       border-color: transparent;
       border-radius: 0;
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
-    :host-state([shape="tag"]):dir(rtl) {
-      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
-      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
-      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
-    }
-
-    /* The tag clips its point, including the native border. Draw the outer shape in the border
-       colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-    :host-state([variant="outline"][shape="tag"]) {
-      position: relative;
-      isolation: isolate;
-      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-    }
-
-    :host-state([variant="outline"][shape="tag"])::before {
+    :host-state([shape="tag"])::before {
       content: "";
       position: absolute;
-      inset: 1px;
+      inset: 0;
       z-index: -1;
       background: var(--_badge-outline-surface);
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
       pointer-events: none;
     }
 
-    :host-state([variant="outline"][shape="tag"]):dir(rtl)::before {
+    :host-state([shape="tag"]):dir(rtl) {
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+    }
+
+    :host-state([shape="tag"]):dir(rtl)::before {
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
     @media (forced-colors: active) {
-      :host-state([variant="outline"][shape="tag"]) {
+      :host-state([shape="tag"]) {
         forced-color-adjust: none;
         background: CanvasText;
         color: CanvasText;
       }
 
-      :host-state([variant="outline"][shape="tag"])::before {
+      :host-state([shape="tag"])::before {
         background: Canvas;
       }
     }

package/components/ui-button/ui-button.html

@@ -188,6 +188,11 @@
       margin: 0;
     }
 
+    /* An anchor keeps the boxed button look even when an app styles ordinary links. */
+    :host:is(a) {
+      text-decoration: none;
+    }
+
     .spinner-wrap {
       display: inline-flex;
       flex: none;

package/components/ui-checkbox/ui-checkbox.html

@@ -123,7 +123,7 @@
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+    /* Centre the tick's box and lift it slightly for the rotated check shape. */
     input:checked::after {
       inset: 0;
       margin: auto;
@@ -135,7 +135,7 @@
       border-color: var(--ui-text-on-accent);
       border-width: 0 0.125rem 0.125rem 0;
       opacity: 1;
-      transform: translate(0.07rem, -0.09rem) rotate(45deg);
+      transform: translateY(-0.09rem) rotate(45deg);
       animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
@@ -151,15 +151,15 @@
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(0.55);
+        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
       }
       65% {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1.12);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
       }
       to {
         opacity: 1;
-        transform: translate(0.07rem, -0.09rem) rotate(45deg) scale(1);
+        transform: translateY(-0.09rem) rotate(45deg) scale(1);
       }
     }
 

package/components/ui-combobox/ui-combobox.html

@@ -244,6 +244,8 @@
             class="option"
             class:active="row.index = active"
             role="option"
+            data-ui-choice-option
+            :data-multiple="multiple"
             :id="format('%s-option-%s', uid, row.index)"
             :aria-selected="row.selected"
             :aria-disabled="row.disabled"
@@ -271,6 +273,8 @@
           class="option"
           class:active="createIndex = active"
           role="option"
+          data-ui-choice-option
+          :data-multiple="multiple"
           aria-selected="false"
           :id="format('%s-option-%s', uid, createIndex)"
           :data-index="createIndex"
@@ -543,21 +547,6 @@
     [hidden] {
       display: none;
     }
-    .option {
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-sm);
-      cursor: pointer;
-      overflow-wrap: anywhere;
-    }
-    .option:hover, .option.active {
-      background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring);
-      outline-offset: -1px;
-    }
-    .option[aria-disabled="true"] {
-      color: var(--ui-disabled-text);
-      cursor: not-allowed;
-    }
     .option[aria-disabled="true"] .primary,
     .option[aria-disabled="true"] .secondary {
       color: var(--ui-disabled-text);
@@ -625,39 +614,6 @@
       }
     }
 
-    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
-       before anything is picked. aria-selected is the state; this draws it.
-       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-    :host-state([multiple]) .option {
-      display: flex;
-      gap: var(--ui-space-2);
-      align-items: center;
-    }
-
-    :host-state([multiple]) .option::before {
-      content: "";
-      flex: none;
-      inline-size: 1.125rem;
-      block-size: 1.125rem;
-      border-style: solid;
-      border-width: 1px;
-      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: var(--ui-radius-sm);
-      background-color: var(--ui-control-surface, var(--ui-surface-default));
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: 0.7rem;
-    }
-
-    :host-state([multiple]) .option[aria-selected="true"]::before {
-      border-color: var(--ui-accent-solid);
-      background-color: var(--ui-accent-solid);
-      background-image: var(
-        --_ui-combobox-option-check,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
-      );
-    }
-
     /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
        while the clear and disclosure controls remain fixed at the end of the field. */
     :host-state([multiple]) .field {

package/components/ui-icon-button/ui-icon-button.html

@@ -147,7 +147,7 @@
     @media (hover: hover) and (pointer: fine) {
       :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
-        background: transparent;
+        background-color: transparent;
         box-shadow: none;
       }
 
@@ -175,7 +175,7 @@
       margin: 0;
       border: 1px solid transparent;
       border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-      background: var(--ui-icon-button-surface, transparent);
+      background-color: var(--ui-icon-button-surface, transparent);
       color: inherit;
       display: inline-flex;
       align-items: center;
@@ -247,14 +247,14 @@
 
     :host-state([variant="outline"]) {
       border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
-      background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
+      background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
       box-shadow: var(--ui-raised);
     }
 
     :host-state([variant="solid"]) {
-      background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
+      background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
       box-shadow: var(
@@ -265,7 +265,7 @@
 
     :host:hover:enabled:not([aria-disabled="true"]) {
       /* Derived from the text colour so the ghost hover shows on any background. */
-      background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
+      background-color: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
@@ -274,7 +274,7 @@
     }
 
     :host-state([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
-      background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
+      background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
     :host:active:enabled:not([aria-disabled="true"]) {
@@ -309,7 +309,7 @@
     /* Disabled is a flat neutral control, independent of the active variant's tone. */
     :host:disabled {
       border-color: var(--ui-disabled-border);
-      background: var(--ui-disabled-surface);
+      background-color: var(--ui-disabled-surface);
       color: var(--ui-disabled-text);
       filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
       opacity: var(--ui-icon-button-disabled-opacity, 1);

package/components/ui-input/ui-input.html

@@ -127,7 +127,7 @@
       opacity: 1;
     }
 
-    :host:hover:not(:focus):not(:disabled) {
+    :host:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 

package/components/ui-input-group/ui-input-group.html

@@ -77,7 +77,7 @@
       }
     }
 
-    :host:hover:not(:has(input:focus, input:disabled)) {
+    :host:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :user-invalid)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
 
@@ -128,7 +128,7 @@
       flex: none;
       align-items: center;
       padding-inline: var(--ui-space-2);
-      color: var(--ui-text-secondary);
+      color: var(--ui-text-muted);
       font-family: var(--ui-font-family-mono);
       font-size: var(--ui-font-size-sm);
       white-space: nowrap;

package/components/ui-listbox/ui-listbox.html

@@ -1,14 +1,65 @@
+<link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
 <template component="ui-listbox" controller="./ui-listbox.js">
   <defs>
-    <prop name="rows" type="number" default="5">The number of option rows visible at once. Use at least two.</prop>
-    <prop name="multiple" type="boolean" default="false">Allows several options to be selected with native keyboard and pointer behavior.</prop>
+    <prop name="rows" type="number" default="5">The maximum number of choices visible before the list scrolls. Use at least two.</prop>
+    <prop name="multiple" type="boolean" default="false">Allows several choices, each shown with a checkmark when selected.</prop>
+    <prop name="name" type="string" default="">The form field name used for each selected value.</prop>
     <prop name="value" type="string">The initial or externally set single selection. Authored selected options work when it is omitted.</prop>
     <prop name="values" type="list(string)">The initial or externally set selections in multiple mode. Authored selected options work when it is omitted.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
-    <prop name="required" type="boolean" default="false">Requires at least one selection for form validation.</prop>
+    <prop name="required" type="boolean" default="false">Requires at least one choice before form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+    <state name="choices" type="list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))" :value="[]"></state>
+    <state name="selection" type="list(string)" :value="[]"></state>
+    <state name="hasSelection" type="boolean" :value="false"></state>
+    <state name="active" type="integer" :value="-1"></state>
+    <state name="uid" type="string" :value="''"></state>
+    <state name="validationError" type="boolean" :value="false"></state>
+    <event name="change" type="object({ value: string | null, values: list(string), trigger: keyboard | pointer })"></event>
   </defs>
-  <select :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
+  <div
+    role="listbox"
+    :tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
+    :aria-multiselectable="multiple"
+    :aria-disabled="disabled"
+    :aria-required="required"
+    :aria-invalid="invalid or validationError"
+    style:--_rows="rows"
+  >
+    <ui-scroll-area class="choices" $ref="choices">
+      <div
+        $each="choice of choices"
+        $key="choice.index"
+        class="option"
+        class:active="choice.index = active"
+        role="option"
+        data-ui-choice-option
+        :data-multiple="multiple"
+        :id="format('%s-option-%s', uid, choice.index)"
+        :data-index="choice.index"
+        :aria-selected="choice.selected"
+        :aria-disabled="choice.disabled"
+      >
+        <span $value="choice.label"></span>
+      </div>
+    </ui-scroll-area>
+    <select class="fallback" $ref="options" :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :name="name" aria-label="Choices">
+      <slot></slot>
+    </select>
+    <template $if="name and not disabled">
+      <input $each="selected of selection" type="hidden" :name="name" :value="selected">
+    </template>
+    <input
+      class="validity"
+      $ref="validity"
+      type="checkbox"
+      :required="required and not hasSelection and not disabled"
+      :checked="hasSelection"
+      :disabled="disabled"
+      aria-hidden="true"
+      tabindex="-1"
+    >
+  </div>
   <style>
     @property --ui-listbox-radius {
       syntax: "*";
@@ -32,29 +83,55 @@
     }
 
     :host {
+      position: relative;
       box-sizing: border-box;
       display: block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-min-block-size);
       margin: 0;
       padding: var(--ui-space-1);
       border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
       border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-listbox-surface, var(--ui-control-surface));
       color: var(--ui-text-primary);
-      color-scheme: light dark;
       font: inherit;
       line-height: var(--ui-line-height-md);
       box-shadow: var(--ui-control-inset);
+      outline: none;
     }
 
-    :host option,
-    :host optgroup {
-      padding: var(--ui-space-2);
+    .choices {
+      max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+    }
+
+    :host:not([data-enhanced]) {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :host:not([data-enhanced]) .choices,
+    :host[data-enhanced] .fallback {
+      display: none;
+    }
+
+    .fallback {
+      box-sizing: border-box;
+      inline-size: 100%;
       font: inherit;
     }
 
+    .validity {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      opacity: 0;
+      pointer-events: none;
+    }
+
     :host:focus-visible {
       border-color: var(--ui-control-focus);
       outline: 2px solid var(--ui-focus-ring);
@@ -62,12 +139,11 @@
       box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
     }
 
-    :host[aria-invalid="true"],
-    :host:user-invalid {
+    :host[aria-invalid="true"] {
       border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
     }
 
-    :host:disabled {
+    :host[aria-disabled="true"] {
       background: var(--ui-control-surface-disabled);
       color: var(--ui-disabled-text);
       box-shadow: none;