@will-ui/vue 1.0.0

package/dist/theme/tokens/components/colorPicker.css

@@ -0,0 +1,404 @@
+/* 触发器与 Layer 面板共用：在根上用 --__* 重算全部派生 token
+ * Layer 面板须用 .w-layer-content.w-color-picker-layer（双类）盖过 .w-layer-content
+ * 对 --__size/--__bg/--__text 的写入（Vue 样式里 layer 常在 colorPicker 之后） */
+.w-color-picker,
+.w-layer-content.w-color-picker-layer {
+  --__size: var(
+    --w-prop-color-picker-size,
+    var(--w-color-picker-size, var(--w-size))
+  );
+  --__color: var(
+    --w-prop-color-picker-color,
+    var(--w-color-picker-color, var(--w-color))
+  );
+  --__bg: var(
+    --w-prop-color-picker-bg-color,
+    var(--w-color-picker-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-color-picker-text-color,
+    var(--w-color-picker-text-color, var(--w-text-color))
+  );
+  --__radius: var(--w-color-picker-radius, var(--w-radius));
+  /* 内部控件圆角：相对有效 radius 减 2（与 list / choose 一致） */
+  --__inner-radius: max(0px, calc(var(--__radius) - 2px));
+  --__font: max(var(--w-font-size-min), calc(var(--__size) * var(--w-form-item-font-ratio)));
+  --__color-light-6: color-mix(in srgb, var(--__color) var(--w-color-picker-color-light-6-mix), var(--__bg));
+
+  /* 中性字色 / 描边：按有效表面核重绑（避免读 :root 算死值） */
+  --w-color-font-1: var(--__text);
+  --w-color-font-2: color-mix(in srgb, var(--__text) 72%, var(--__bg));
+  --w-color-font-3: color-mix(in srgb, var(--__text) 48%, var(--__bg));
+  --w-color-font-4: color-mix(in srgb, var(--__text) 32%, var(--__bg));
+  --w-color-font-5: color-mix(in srgb, var(--__text) 8%, var(--__bg));
+  --w-color-border: color-mix(in srgb, var(--__text) 18%, var(--__bg));
+  --w-color-border-2: color-mix(in srgb, var(--__text) 40%, var(--__bg));
+  --w-bg-color-disabled: var(--w-color-font-5);
+  --w-color-picker-checker-color: var(--w-color-font-4);
+
+  /* 输入框：跟本组件表面 / 主色，而非全局 form-item 算死值 */
+  --w-form-item-border-color: var(--w-color-border);
+  --w-form-item-border-color-focus: var(--__color);
+  --w-form-item-background-color: var(--__bg);
+  --w-form-item-color: var(--__text);
+  --w-form-item-box-shadow: var(--__color-light-6);
+  --w-form-item-disabled-background-color: var(--w-bg-color-disabled);
+  --w-form-item-disabled-color: var(--w-color-font-3);
+  --w-form-item-disabled-border-color: var(--w-color-border);
+
+  /* Layer 表面跟本组件有效基：覆写 --_layer-*（与 layer.css 绘制 API 对齐） */
+  --_layer-background-color: var(--__bg);
+  --_layer-color: var(--__text);
+  --_layer-border-color: var(--w-color-border);
+
+  --w-color-picker-panel-width: calc(var(--__size) * var(--w-color-picker-panel-width-ratio));
+  --w-color-picker-panel-padding: calc(var(--__size) * var(--w-color-picker-panel-padding-ratio));
+  --w-color-picker-gap: calc(var(--__size) * var(--w-color-picker-gap-ratio));
+  --w-color-picker-inner-gap: calc(var(--__size) * var(--w-color-picker-inner-gap-ratio));
+  --w-color-picker-saturation-height: calc(var(--__size) * var(--w-color-picker-saturation-height-ratio));
+  --w-color-picker-slider-height: calc(var(--__size) * var(--w-color-picker-slider-height-ratio));
+  --w-color-picker-trigger-size: var(--__size);
+  --w-color-picker-preview-square-size: calc(var(--__size) * var(--w-color-picker-preview-square-ratio));
+  --w-color-picker-value-input-height: var(--__size);
+  --w-color-picker-value-min-width: calc(var(--__size) * var(--w-color-picker-value-min-width-ratio));
+  --w-color-picker-value-label-size: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-ctrl-icon-ratio))
+  );
+  --w-color-picker-value-gap: calc(var(--__size) * var(--w-color-picker-value-gap-ratio));
+  --w-color-picker-handle-size: calc(var(--__size) * var(--w-color-picker-handle-size-ratio));
+  --w-color-picker-slider-handle-width: calc(var(--__size) * var(--w-color-picker-value-gap-ratio));
+  --w-color-picker-slider-handle-height: calc(var(--__size) * var(--w-color-picker-slider-handle-height-ratio));
+  --w-color-picker-checker-size: calc(var(--__size) * var(--w-color-picker-inner-gap-ratio));
+  --w-color-picker-slider-handle-radius: max(0px, calc(var(--__inner-radius) / 4));
+}
+
+/* Layer 面板：圆角跟组件 radius（盖过 Layer 默认 --w-radius） */
+.w-layer-content.w-color-picker-layer {
+  border-radius: var(--__radius);
+}
+
+.w-color-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w-color-picker-inner-gap);
+  height: var(--__size);
+  font-size: var(--__font);
+  color: var(--__text);
+
+  &.w-color-picker-block {
+    width: 100%;
+  }
+}
+
+.w-color-picker-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--w-color-picker-inner-gap);
+  cursor: pointer;
+}
+
+.w-color-picker-preview {
+  width: var(--w-color-picker-trigger-size);
+  height: var(--w-color-picker-trigger-size);
+  border-radius: var(--__inner-radius);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--w-color-border);
+  flex-shrink: 0;
+
+  & .w-color-picker-preview-bg {
+    position: absolute;
+    inset: 0;
+    background-size:
+      calc(var(--w-color-picker-checker-size) * 2)
+      calc(var(--w-color-picker-checker-size) * 2);
+    background-image:
+      linear-gradient(45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--w-color-picker-checker-color) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--w-color-picker-checker-color) 75%);
+    background-position:
+      0 0,
+      0 var(--w-color-picker-checker-size),
+      var(--w-color-picker-checker-size) calc(var(--w-color-picker-checker-size) * -1),
+      calc(var(--w-color-picker-checker-size) * -1) 0;
+  }
+
+  & .w-color-picker-preview-color {
+    position: absolute;
+    inset: 0;
+  }
+}
+
+.w-color-picker-input-wrapper {
+  flex: 1;
+  min-width: 0;
+
+  & .w-color-picker-input {
+    width: 100%;
+    height: var(--__size);
+    padding: 0 calc(var(--__size) * var(--w-form-item-pad-x-ratio));
+    border: 1px solid var(--w-form-item-border-color);
+    border-radius: var(--__inner-radius);
+    background-color: var(--w-form-item-background-color);
+    font-size: var(--__font);
+    color: var(--w-form-item-color);
+    outline: none;
+    transition: var(--w-transition-time);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: var(--w-form-item-border-color-focus);
+      box-shadow: 0 0 6px var(--w-form-item-box-shadow);
+    }
+
+    &:disabled {
+      background-color: var(--w-form-item-disabled-background-color);
+      color: var(--w-form-item-disabled-color);
+      border-color: var(--w-form-item-disabled-border-color);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.w-color-picker-panel {
+  padding: var(--w-color-picker-panel-padding);
+  width: var(--w-color-picker-panel-width);
+  box-sizing: border-box;
+  font-size: var(--__font);
+  color: var(--__text);
+  user-select: none;
+  -webkit-user-select: none;
+
+  & input {
+    user-select: text;
+    -webkit-user-select: text;
+  }
+}
+
+.w-color-picker-saturation {
+  width: 100%;
+  height: var(--w-color-picker-saturation-height);
+  position: relative;
+  border-radius: var(--__inner-radius);
+  overflow: hidden;
+  cursor: crosshair;
+  margin-bottom: var(--w-color-picker-gap);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+
+  & .w-color-picker-saturation-white {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, white, transparent);
+    pointer-events: none;
+  }
+
+  & .w-color-picker-saturation-black {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, black);
+    pointer-events: none;
+  }
+
+  & .w-color-picker-saturation-handle {
+    position: absolute;
+    width: var(--w-color-picker-handle-size);
+    height: var(--w-color-picker-handle-size);
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+}
+
+.w-color-picker-hue,
+.w-color-picker-alpha {
+  width: 100%;
+  height: var(--w-color-picker-slider-height);
+  position: relative;
+  border-radius: calc(var(--w-color-picker-slider-height) / 2);
+  overflow: hidden;
+  cursor: pointer;
+  margin-bottom: var(--w-color-picker-gap);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.w-color-picker-hue {
+  & .w-color-picker-hue-gradient {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(
+      to right,
+      #ff0000 0%,
+      #ffff00 16.67%,
+      #00ff00 33.33%,
+      #00ffff 50%,
+      #0000ff 66.67%,
+      #ff00ff 83.33%,
+      #ff0000 100%
+    );
+  }
+
+  & .w-color-picker-hue-handle {
+    position: absolute;
+    top: 50%;
+    width: var(--w-color-picker-slider-handle-width);
+    height: var(--w-color-picker-slider-handle-height);
+    border-radius: var(--w-color-picker-slider-handle-radius);
+    background-color: white;
+    border: 1px solid var(--w-color-border);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+}
+
+.w-color-picker-alpha {
+  & .w-color-picker-alpha-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-size:
+      var(--w-color-picker-checker-size) var(--w-color-picker-checker-size);
+    background-image:
+      linear-gradient(45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--w-color-picker-checker-color) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--w-color-picker-checker-color) 75%);
+    background-position:
+      0 0,
+      0 calc(var(--w-color-picker-checker-size) / 2),
+      calc(var(--w-color-picker-checker-size) / 2) calc(var(--w-color-picker-checker-size) / -2),
+      calc(var(--w-color-picker-checker-size) / -2) 0;
+  }
+
+  & .w-color-picker-alpha-gradient {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  & .w-color-picker-alpha-handle {
+    position: absolute;
+    top: 50%;
+    width: var(--w-color-picker-slider-handle-width);
+    height: var(--w-color-picker-slider-handle-height);
+    border-radius: var(--w-color-picker-slider-handle-radius);
+    background-color: white;
+    border: 1px solid var(--w-color-border);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+}
+
+.w-color-picker-preview-row {
+  display: flex;
+  gap: var(--w-color-picker-inner-gap);
+  align-items: stretch;
+
+  & .w-color-picker-preview-square {
+    width: var(--w-color-picker-preview-square-size);
+    flex-shrink: 0;
+    align-self: stretch;
+    min-height: calc(
+      var(--w-color-picker-value-label-size) + var(--w-color-picker-value-gap) +
+        var(--w-color-picker-value-input-height)
+    );
+    border-radius: var(--__inner-radius);
+    overflow: hidden;
+    position: relative;
+    border: 1px solid var(--w-color-border);
+
+    & .w-color-picker-preview-square-bg {
+      position: absolute;
+      inset: 0;
+      background-size:
+        calc(var(--w-color-picker-checker-size) * 2)
+        calc(var(--w-color-picker-checker-size) * 2);
+      background-image:
+        linear-gradient(45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--w-color-picker-checker-color) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--w-color-picker-checker-color) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--w-color-picker-checker-color) 75%);
+      background-position:
+        0 0,
+        0 var(--w-color-picker-checker-size),
+        var(--w-color-picker-checker-size) calc(var(--w-color-picker-checker-size) * -1),
+        calc(var(--w-color-picker-checker-size) * -1) 0;
+    }
+
+    & .w-color-picker-preview-square-color {
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  & .w-color-picker-values {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--w-color-picker-value-min-width), 1fr)
+    );
+    gap: var(--w-color-picker-inner-gap);
+
+    & .w-color-picker-value {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--w-color-picker-value-gap);
+      min-width: 0;
+
+      & .w-color-picker-value-label {
+        font-size: var(--w-color-picker-value-label-size);
+        line-height: 1;
+        color: var(--w-color-font-3);
+        text-align: center;
+      }
+
+      & .w-color-picker-value-input {
+        width: 100%;
+        min-width: 0;
+        height: var(--w-color-picker-value-input-height);
+        padding: 0 var(--w-color-picker-value-gap);
+        border: 1px solid var(--w-form-item-border-color);
+        border-radius: var(--__inner-radius);
+        background-color: var(--w-form-item-background-color);
+        font-size: var(--__font);
+        font-variant-numeric: tabular-nums;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        color: var(--w-form-item-color);
+        text-align: center;
+        outline: none;
+        box-sizing: border-box;
+        appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          appearance: none;
+          margin: 0;
+        }
+
+        &:focus {
+          border-color: var(--w-form-item-border-color-focus);
+          box-shadow: 0 0 6px var(--w-form-item-box-shadow);
+        }
+
+        &:disabled {
+          background-color: var(--w-form-item-disabled-background-color);
+          color: var(--w-form-item-disabled-color);
+          border-color: var(--w-form-item-disabled-border-color);
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}

package/dist/theme/tokens/components/confirm.css

@@ -0,0 +1,128 @@
+.w-confirm,
+.w-confirm-mask {
+  --__color: var(--w-prop-confirm-color, var(--w-confirm-color, var(--w-color)));
+  --__bg: var(
+    --w-prop-confirm-bg-color,
+    var(--w-confirm-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-confirm-text-color,
+    var(--w-confirm-text-color, var(--w-text-color))
+  );
+}
+
+/* 面板根：自建尺度/字号/间距；表面盖过 Drawer；主色桥给确定按钮 */
+.w-drawer.w-confirm {
+  --__size: var(
+    --w-prop-confirm-size,
+    var(
+      --w-confirm-size,
+      var(--w-prop-drawer-size, var(--w-drawer-size, var(--w-size)))
+    )
+  );
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-confirm-font-ratio))
+  );
+  --__title-font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-confirm-title-font-ratio))
+  );
+  /* 盖过 Drawer 的表面核，保证 Confirm 三级优先 */
+  --__bg: var(
+    --w-prop-confirm-bg-color,
+    var(--w-confirm-bg-color, var(--w-bg-color))
+  );
+  --__text: var(
+    --w-prop-confirm-text-color,
+    var(--w-confirm-text-color, var(--w-text-color))
+  );
+  --__color: var(--w-prop-confirm-color, var(--w-confirm-color, var(--w-color)));
+
+  --w-color-font-1: var(--__text);
+  --w-color-font-2: color-mix(
+    in srgb,
+    var(--__text) var(--w-confirm-font-2-mix),
+    var(--__bg)
+  );
+  --w-prop-btn-size: var(--__size);
+  --w-prop-btn-color: var(--__color);
+  --w-prop-btn-bg-color: var(--__bg);
+  --w-prop-btn-text-color: var(--__text);
+
+  --w-confirm-title-size: var(--__title-font);
+  --w-confirm-font-size: var(--__font);
+  --w-confirm-header-padding: calc(
+      var(--__size) * var(--w-confirm-header-pad-y-ratio)
+    )
+    calc(var(--__size) * var(--w-confirm-header-pad-x-ratio));
+  --w-confirm-body-padding: calc(
+    var(--__size) * var(--w-confirm-body-pad-ratio)
+  );
+  --w-confirm-footer-padding: calc(
+      var(--__size) * var(--w-confirm-footer-pad-y-ratio)
+    )
+    calc(var(--__size) * var(--w-confirm-footer-pad-x-ratio));
+  --w-confirm-footer-gap: calc(
+    var(--__size) * var(--w-confirm-footer-gap-ratio)
+  );
+
+  color: var(--__text);
+
+  & .w-confirm-close {
+    --__icon: clamp(
+      var(--w-ctrl-icon-size-min),
+      calc(var(--__size) * var(--w-confirm-close-icon-ratio)),
+      var(--w-ctrl-icon-size-max)
+    );
+    --w-close-font-size: var(--__icon);
+    position: absolute;
+    top: var(--w-confirm-close-offset, var(--w-gap));
+    right: var(--w-confirm-close-offset, var(--w-gap));
+    z-index: 1;
+  }
+
+  &:has(.w-confirm-close) .w-confirm-header {
+    padding-right: calc(
+      var(--__size) * var(--w-confirm-header-close-pad-ratio)
+    );
+  }
+}
+
+.w-confirm-header {
+  padding: var(--w-confirm-header-padding);
+  display: flex;
+  align-items: center;
+  background: var(--w-confirm-header-bg, transparent);
+
+  & .w-confirm-title,
+  & > span {
+    font-size: var(--w-confirm-title-size);
+    font-weight: var(--w-confirm-title-weight);
+    color: var(--w-confirm-title-color, var(--w-color-font-1));
+  }
+}
+
+.w-confirm-body {
+  min-width: var(--w-confirm-min-width);
+  max-width: var(--w-confirm-max-width);
+  min-height: var(--w-confirm-min-height);
+  padding: var(--w-confirm-body-padding);
+  color: var(--w-confirm-body-color, var(--w-color-font-1));
+  font-size: var(--w-confirm-font-size);
+  line-height: var(--w-confirm-line-height);
+  background: var(--w-confirm-body-bg, transparent);
+
+  &.w-confirm-body--danger {
+    color: var(--w-confirm-danger-color, var(--w-error));
+  }
+}
+
+.w-confirm-footer {
+  display: flex;
+  padding: var(--w-confirm-footer-padding);
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--w-confirm-footer-gap);
+  background: var(--w-confirm-footer-bg, transparent);
+}

package/dist/theme/tokens/components/copy.css

@@ -0,0 +1,80 @@
+.w-copy {
+  --__size: var(--w-prop-copy-size, var(--w-copy-size, var(--w-size)));
+  --__color: var(--w-prop-copy-color, var(--w-copy-color, var(--w-color)));
+  --__bg: var(--w-prop-copy-bg-color, var(--w-copy-bg-color, var(--w-bg-color)));
+  --__text: var(
+    --w-prop-copy-text-color,
+    var(--w-copy-text-color, var(--w-text-color))
+  );
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-copy-font-ratio))
+  );
+  --__pad-x: calc(var(--__size) * var(--w-copy-pad-x-ratio));
+  --__pad-y: calc(var(--__size) * var(--w-copy-pad-y-ratio));
+  --__radius: var(--w-copy-radius, var(--w-radius));
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--__pad-y) var(--__pad-x);
+  font-size: var(--__font);
+  line-height: 1.2;
+  color: var(--__text);
+  background-color: var(--__bg);
+  border: var(--w-copy-border);
+  border-radius: var(--__radius);
+  cursor: pointer;
+  user-select: none;
+  -webkit-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  transition: var(--w-copy-transition);
+
+  &:hover:not(:disabled) {
+    border-color: var(--w-copy-hover-border-color);
+    color: var(--__color);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--w-copy-active-bg);
+  }
+
+  &:disabled {
+    opacity: var(--w-btn-disabled-opacity, 0.55);
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--__color) 50%, var(--__bg));
+    outline-offset: 1px;
+  }
+}
+
+/* Toast 挂在 body，用 prop 层接收触发器上的三级核（spawn 时写入） */
+.w-copy-toast {
+  --__size: var(--w-prop-copy-size, var(--w-copy-size, var(--w-size)));
+  --__font: max(
+    var(--w-font-size-min),
+    calc(var(--__size) * var(--w-copy-toast-font-ratio))
+  );
+  --__pad-x: calc(var(--__size) * var(--w-copy-toast-pad-x-ratio));
+  --__pad-y: calc(var(--__size) * var(--w-copy-toast-pad-y-ratio));
+
+  position: fixed;
+  pointer-events: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  font-size: var(--__font);
+  padding: var(--__pad-y) var(--__pad-x);
+  border-radius: var(--w-copy-toast-radius);
+  background-color: var(--w-copy-toast-bg);
+  color: var(--w-copy-toast-color);
+  box-shadow: var(--w-copy-toast-shadow);
+  opacity: 0;
+  transition: all var(--w-copy-toast-show-duration)
+    var(--w-copy-toast-show-easing);
+}

package/dist/theme/tokens/components/cornerEars.css

@@ -0,0 +1,102 @@
+a:has(.w-corner-ears) {
+  outline: none;
+}
+
+.w-corner-ears {
+  --__size: var(--w-prop-corner-size, var(--w-corner-size, 20px));
+  --__stroke: var(--w-corner-stroke, transparent);
+  --__sw: var(
+    --w-prop-corner-stroke-width,
+    var(--w-corner-stroke-width, 0px)
+  );
+  position: relative;
+  background-color: var(--w-corner-fill, transparent);
+  box-sizing: border-box;
+}
+
+.w-corner {
+  position: absolute;
+  width: var(--__size);
+  height: var(--__size);
+  overflow: visible;
+  pointer-events: none;
+  display: block;
+  z-index: 0;
+}
+
+.w-corner-fill {
+  fill: var(--w-corner-fill, #ddd);
+}
+
+/* 整轮廓描边：一条 path，避免 CSS 边线与角块拼接 */
+.w-corner-stroke-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.w-corner-stroke-path {
+  fill: none;
+  stroke: var(--__stroke);
+  stroke-width: var(--__sw);
+  stroke-linejoin: round;
+  stroke-linecap: square;
+  vector-effect: non-scaling-stroke;
+  shape-rendering: geometricPrecision;
+}
+
+.w-corner-stroke-path.is-notch {
+  fill: var(--w-corner-fill, #ddd);
+}
+
+.w-corner-top-end {
+  top: 0;
+  right: 0;
+  transform: translateY(calc(-1 * var(--__size)));
+}
+
+.w-corner-bottom-end {
+  bottom: 0;
+  right: 0;
+  transform: translateY(var(--__size));
+}
+
+.w-corner-top-start {
+  top: 0;
+  left: 0;
+  transform: translateY(calc(-1 * var(--__size)));
+}
+
+.w-corner-bottom-start {
+  bottom: 0;
+  left: 0;
+  transform: translateY(var(--__size));
+}
+
+.w-corner-left-start {
+  top: 0;
+  left: 0;
+  transform: translateX(calc(-1 * var(--__size)));
+}
+
+.w-corner-left-end {
+  bottom: 0;
+  left: 0;
+  transform: translateX(calc(-1 * var(--__size)));
+}
+
+.w-corner-right-start {
+  top: 0;
+  right: 0;
+  transform: translateX(var(--__size));
+}
+
+.w-corner-right-end {
+  bottom: 0;
+  right: 0;
+  transform: translateX(var(--__size));
+}