@guildofgleks/ui 21.4.3 → 21.5.0

package/styles/utilities.css

@@ -1,170 +1,212 @@
-.gog-inline-center {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.gog-flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/*
- * Scopes reflow to this subtree. Never put it on an element that has to paint something
- * outside its own box — `contain: layout` creates a stacking context, so a popup inside
- * it can no longer stack above the rest of the page no matter its z-index. That rules it
- * out for gog-select and gog-multiselect.
- */
-.gog-contained-layout {
-  contain: layout style;
-}
-
-.gog-cursor-pointer {
-  cursor: pointer;
-}
-
-.gog-cursor-wait {
-  cursor: wait;
-}
-
-.gog-cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-/*
- * Present to assistive tech, invisible on screen. The clip-path/1px recipe rather than
- * `display: none` or `visibility: hidden`, both of which remove the text from the
- * accessibility tree along with the pixels.
- */
-.gog-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-/*
- * `gogBadge`'s classes, global for the same reason as `gog-collapsible`'s below: the
- * directive appends its badge into a *consumer's* element, which is light DOM belonging to
- * that consumer's view, so a scoped stylesheet could never reach it.
- */
-.gog-badge-host {
-  /* The badge is positioned against this element, so it has to be a containing block.
-     Harmless on an already-relative host; a host that is itself absolutely positioned
-     should set its own position after this class, which ordinary specificity allows. */
-  position: relative;
-}
-
-.gog-badge {
-  position: absolute;
-  z-index: var(--gog-badge-z);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  min-width: var(--gog-badge-size);
-  height: var(--gog-badge-size);
-  padding-inline: var(--gog-badge-padding-inline);
-  border: var(--gog-badge-border-width) var(--gog-badge-border-style) var(--gog-badge-border-color);
-  border-radius: var(--gog-badge-radius);
-  background-color: var(--gog-badge-bg, var(--gog-badge-variant-bg, var(--gog-badge-danger-bg)));
-  color: var(--gog-badge-color, var(--gog-badge-variant-color, var(--gog-badge-danger-color)));
-  font-family: var(--gog-badge-font-family);
-  font-size: var(--gog-badge-font-size);
-  font-weight: var(--gog-badge-font-weight);
-  line-height: var(--gog-badge-line-height);
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-/* A dot carries no text, so it collapses to a circle and drops its padding. */
-.gog-badge--dot {
-  min-width: var(--gog-badge-dot-size);
-  width: var(--gog-badge-dot-size);
-  height: var(--gog-badge-dot-size);
-  padding-inline: 0;
-  border-radius: 50%;
-}
-
-/* Logical insets rather than a translate, so the corners follow the writing direction. */
-.gog-badge--top-end {
-  top: calc(-1 * var(--gog-badge-offset));
-  inset-inline-end: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--top-start {
-  top: calc(-1 * var(--gog-badge-offset));
-  inset-inline-start: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--bottom-end {
-  bottom: calc(-1 * var(--gog-badge-offset));
-  inset-inline-end: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--bottom-start {
-  bottom: calc(-1 * var(--gog-badge-offset));
-  inset-inline-start: calc(-1 * var(--gog-badge-offset));
-}
-
-.gog-badge--success {
-  --gog-badge-variant-bg: var(--gog-badge-success-bg);
-  --gog-badge-variant-color: var(--gog-badge-success-color);
-}
-
-.gog-badge--danger {
-  --gog-badge-variant-bg: var(--gog-badge-danger-bg);
-  --gog-badge-variant-color: var(--gog-badge-danger-color);
-}
-
-.gog-badge--warning {
-  --gog-badge-variant-bg: var(--gog-badge-warning-bg);
-  --gog-badge-variant-color: var(--gog-badge-warning-color);
-}
-
-.gog-badge--info {
-  --gog-badge-variant-bg: var(--gog-badge-info-bg);
-  --gog-badge-variant-color: var(--gog-badge-info-color);
-}
-
-/*
- * `gog-collapsible`'s trigger/content classes, global rather than component-scoped: both
- * are applied via `gogCollapsibleTrigger`/`gogCollapsibleContent` directives to elements a
- * *consumer* projects into `<gog-collapsible>` — light DOM that belongs to the consumer's
- * own view, not `gog-collapsible`'s, so a scoped stylesheet on the component itself would
- * never reach it.
- */
-.gog-collapsible__trigger {
-  cursor: pointer;
-}
-
-.gog-collapsible__trigger[aria-disabled='true'] {
-  cursor: not-allowed;
-  opacity: var(--gog-collapsible-disabled-opacity);
-}
-
-.gog-collapsible__content {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition:
-    max-height var(--gog-collapsible-transition-duration) var(--gog-easing),
-    opacity var(--gog-collapsible-transition-duration) var(--gog-easing);
-}
-
-.gog-collapsible__content--open {
-  max-height: var(--gog-collapsible-max-height);
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .gog-collapsible__content {
-    transition: none;
-  }
-}
+/*
+ * Direction primitives, for the handful of properties CSS gives no logical form of:
+ * `transform-origin`, `translate`, `transform`. Everything else uses real logical
+ * properties (`inset-inline-start`, `padding-inline-end`, `text-align: start`, …) and needs
+ * none of this.
+ *
+ *   --gog-inline-start-side / --gog-inline-end-side  `left`/`right` keywords, swapped in RTL.
+ *                                                    For `transform-origin`.
+ *   --gog-direction-sign                             `1` / `-1`. Multiply the X part of a
+ *                                                    translate by it when the element is
+ *                                                    placed with `inset-inline-start`.
+ *
+ * Declared on `:root` and flipped by `[dir='rtl']`, so a subtree can be RTL on its own — an
+ * RTL panel inside an LTR page follows the nearest `dir`, like every other RTL behaviour.
+ */
+:root {
+  --gog-inline-start-side: left;
+  --gog-inline-end-side: right;
+  --gog-direction-sign: 1;
+}
+
+[dir='rtl'] {
+  --gog-inline-start-side: right;
+  --gog-inline-end-side: left;
+  --gog-direction-sign: -1;
+}
+
+.gog-inline-center {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gog-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ * Scopes reflow to this subtree. Never put it on an element that has to paint something
+ * outside its own box — `contain: layout` creates a stacking context, so a popup inside
+ * it can no longer stack above the rest of the page no matter its z-index. That rules it
+ * out for gog-select and gog-multiselect.
+ */
+.gog-contained-layout {
+  contain: layout style;
+}
+
+.gog-cursor-pointer {
+  cursor: pointer;
+}
+
+.gog-cursor-wait {
+  cursor: wait;
+}
+
+.gog-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+/*
+ * Present to assistive tech, invisible on screen. The clip-path/1px recipe rather than
+ * `display: none` or `visibility: hidden`, both of which remove the text from the
+ * accessibility tree along with the pixels.
+ */
+.gog-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/*
+ * `gogBadge`'s classes, global for the same reason as `gog-collapsible`'s below: the
+ * directive appends its badge into a *consumer's* element, which is light DOM belonging to
+ * that consumer's view, so a scoped stylesheet could never reach it.
+ */
+.gog-badge-host {
+  /* The badge is positioned against this element, so it has to be a containing block.
+     Harmless on an already-relative host; a host that is itself absolutely positioned
+     should set its own position after this class, which ordinary specificity allows. */
+  position: relative;
+}
+
+.gog-badge {
+  position: absolute;
+  z-index: var(--gog-badge-z);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--gog-badge-size);
+  height: var(--gog-badge-size);
+  padding-inline: var(--gog-badge-padding-inline);
+  border: var(--gog-badge-border-width) var(--gog-badge-border-style) var(--gog-badge-border-color);
+  border-radius: var(--gog-badge-radius);
+  background-color: var(--gog-badge-bg, var(--gog-badge-variant-bg, var(--gog-badge-danger-bg)));
+  color: var(--gog-badge-color, var(--gog-badge-variant-color, var(--gog-badge-danger-color)));
+  font-family: var(--gog-badge-font-family);
+  font-size: var(--gog-badge-font-size);
+  font-weight: var(--gog-badge-font-weight);
+  line-height: var(--gog-badge-line-height);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* A dot carries no text, so it collapses to a circle and drops its padding. */
+.gog-badge--dot {
+  min-width: var(--gog-badge-dot-size);
+  width: var(--gog-badge-dot-size);
+  height: var(--gog-badge-dot-size);
+  padding-inline: 0;
+  border-radius: 50%;
+}
+
+/* Logical insets rather than a translate, so the corners follow the writing direction. */
+.gog-badge--top-end {
+  top: calc(-1 * var(--gog-badge-offset));
+  inset-inline-end: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--top-start {
+  top: calc(-1 * var(--gog-badge-offset));
+  inset-inline-start: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--bottom-end {
+  bottom: calc(-1 * var(--gog-badge-offset));
+  inset-inline-end: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--bottom-start {
+  bottom: calc(-1 * var(--gog-badge-offset));
+  inset-inline-start: calc(-1 * var(--gog-badge-offset));
+}
+
+.gog-badge--success {
+  --gog-badge-variant-bg: var(--gog-badge-success-bg);
+  --gog-badge-variant-color: var(--gog-badge-success-color);
+}
+
+.gog-badge--danger {
+  --gog-badge-variant-bg: var(--gog-badge-danger-bg);
+  --gog-badge-variant-color: var(--gog-badge-danger-color);
+}
+
+.gog-badge--warning {
+  --gog-badge-variant-bg: var(--gog-badge-warning-bg);
+  --gog-badge-variant-color: var(--gog-badge-warning-color);
+}
+
+.gog-badge--info {
+  --gog-badge-variant-bg: var(--gog-badge-info-bg);
+  --gog-badge-variant-color: var(--gog-badge-info-color);
+}
+
+/*
+ * `gog-collapsible`'s trigger/content classes, global rather than component-scoped: both
+ * are applied via `gogCollapsibleTrigger`/`gogCollapsibleContent` directives to elements a
+ * *consumer* projects into `<gog-collapsible>` — light DOM that belongs to the consumer's
+ * own view, not `gog-collapsible`'s, so a scoped stylesheet on the component itself would
+ * never reach it.
+ */
+.gog-collapsible__trigger {
+  cursor: pointer;
+}
+
+.gog-collapsible__trigger[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--gog-collapsible-disabled-opacity);
+}
+
+.gog-collapsible__content {
+  /*
+   * Lets the `max-height` transition below run to `max-content` — the default of
+   * `--gog-collapsible-max-height` — instead of refusing to animate to an intrinsic keyword.
+   * That default is what keeps an open panel from clipping its content at an arbitrary
+   * number; this property is only what makes the same value animate.
+   *
+   * Declared here rather than on `:root`: the property is inherited, and a component library
+   * has no business switching keyword interpolation on for a consumer's whole document. It
+   * does inherit into this panel's own descendants, which is harmless — it changes nothing
+   * for an element that is not animating to or from an intrinsic size.
+   *
+   * Unsupported browsers ignore it and the panel snaps open, exactly as it does when a
+   * consumer sets `--gog-collapsible-max-height: none`.
+   */
+  interpolate-size: allow-keywords;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition:
+    max-height var(--gog-collapsible-transition-duration) var(--gog-easing),
+    opacity var(--gog-collapsible-transition-duration) var(--gog-easing);
+}
+
+.gog-collapsible__content--open {
+  max-height: var(--gog-collapsible-max-height);
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gog-collapsible__content {
+    transition: none;
+  }
+}