banhaten 0.1.0

package/registry/components/expanded/iconExplorer.css

@@ -0,0 +1,764 @@
+.icons-page {
+  --icons-bg: var(--bh-bg-grouped);
+  --icons-surface: var(--bh-bg-raised);
+  --icons-surface-soft: var(--bh-bg-subtle);
+  --icons-text: var(--bh-content-default);
+  --icons-muted: var(--bh-content-muted);
+  --icons-border: var(--bh-border-subtle);
+  --icons-border-strong: var(--bh-border-strong);
+  --icons-brand: var(--bh-interactive-brand-default);
+  --icons-brand-dark: var(--bh-content-brand-strong);
+  --icons-brand-soft: var(--bh-bg-brand-soft);
+  --icons-warm: var(--bh-content-warning-default);
+  --icons-warm-soft: var(--bh-bg-warning-subtle);
+  --icons-danger: var(--bh-content-danger-default);
+  --icons-radius: var(--bh-radius-lg-8);
+  --icons-shadow: var(--shadow-component-default);
+
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: var(--bh-icon-explorer-nav-column) minmax(0, 1fr);
+  background: var(--icons-bg);
+  color: var(--icons-text);
+  font-family: var(--bh-font-family);
+  letter-spacing: 0;
+}
+
+.icons-page *,
+.icons-page *::before,
+.icons-page *::after {
+  box-sizing: border-box;
+}
+
+.icons-page button,
+.icons-page input,
+.icons-page select {
+  font: inherit;
+}
+
+.icons-page button {
+  cursor: pointer;
+}
+
+.icons-page button:disabled {
+  cursor: wait;
+  opacity: var(--bh-opacity-subtle);
+}
+
+.icons-page h1,
+.icons-page h2,
+.icons-page h3,
+.icons-page p {
+  margin: 0;
+}
+
+.icons-page iconify-icon {
+  display: inline-block;
+  color: currentColor;
+  vertical-align: -0.14em;
+}
+
+.icons-sidebar {
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  overflow: auto;
+  border-right: var(--bh-space-xxxs-1) solid var(--icons-border);
+  background: var(--icons-surface);
+  padding: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
+}
+
+.icons-sidebar__header {
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-lg-10);
+  margin-bottom: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-sidebar__header h1 {
+  font-size: var(--bh-text-heading-xs-semibold-font-size);
+  line-height: 1.2;
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-sidebar__header p,
+.icons-topbar p,
+.icons-panel__header span,
+.icons-pack__copy span,
+.icons-compare-card p,
+.icons-compare-card > div:first-child span {
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  line-height: 1.35;
+}
+
+.icons-mark {
+  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
+  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xxs-2));
+  border-radius: var(--icons-radius);
+  display: grid;
+  place-items: center;
+  color: var(--bh-content-on-brand);
+  background: var(--icons-text);
+}
+
+.icons-sidebar__tools {
+  display: grid;
+  gap: var(--bh-space-lg-10);
+  margin: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
+}
+
+.icons-input,
+.icons-select {
+  width: 100%;
+  height: calc(var(--bh-space-6xl-32) + var(--bh-space-sm-6));
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  background: var(--bh-bg-raised);
+  color: var(--icons-text);
+  padding: 0 var(--bh-space-xl-12);
+  outline: none;
+}
+
+.icons-input:focus,
+.icons-select:focus {
+  border-color: var(--icons-brand);
+  box-shadow: var(--shadow-button-focus);
+}
+
+.icons-pack-list {
+  display: grid;
+  gap: var(--bh-space-md-8);
+}
+
+.icons-pack {
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--bh-icon-explorer-pack-column) minmax(0, 1fr);
+  gap: var(--bh-space-lg-10);
+  align-items: center;
+  border: var(--bh-space-xxxs-1) solid transparent;
+  border-radius: var(--icons-radius);
+  background: transparent;
+  color: var(--icons-text);
+  padding: calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
+  text-align: left;
+}
+
+.icons-pack:hover {
+  background: var(--bh-bg-muted);
+}
+
+.icons-pack.is-active {
+  background: var(--icons-brand-soft);
+  border-color: var(--bh-border-brand-subtle);
+}
+
+.icons-pack__glyph {
+  width: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
+  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
+  border-radius: var(--icons-radius);
+  display: grid;
+  place-items: center;
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  background: var(--bh-bg-raised);
+  color: var(--icons-brand-dark);
+}
+
+.icons-pack__copy {
+  min-width: 0;
+  display: grid;
+  gap: calc(var(--bh-space-xxs-2) + var(--bh-space-xxxs-1));
+}
+
+.icons-pack__copy strong {
+  min-width: 0;
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icons-main {
+  min-width: 0;
+}
+
+.icons-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  min-height: var(--bh-icon-explorer-topbar-min-height);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+  align-items: center;
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
+  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
+  background: var(--bh-icon-explorer-topbar-bg);
+  backdrop-filter: blur(var(--bh-space-2xl-14));
+}
+
+.icons-topbar h2 {
+  font-size: var(--bh-text-heading-md-semibold-font-size);
+  line-height: 1.15;
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-topbar code {
+  color: var(--icons-brand-dark);
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+.icons-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+  padding: var(--bh-space-xs-4);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  background: var(--bh-bg-raised);
+}
+
+.icons-tab {
+  min-height: var(--bh-space-6xl-32);
+  border: 0;
+  border-radius: var(--bh-radius-md-6);
+  padding: 0 calc(var(--bh-space-lg-10) + var(--bh-space-xxxs-1));
+  background: transparent;
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-tab.is-active {
+  background: var(--icons-text);
+  color: var(--bh-content-on-brand);
+}
+
+.icons-content {
+  max-width: var(--bh-icon-explorer-canvas-max-width);
+  margin: 0 auto;
+  padding: var(--bh-space-5xl-24) calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2)) var(--bh-space-8xl-48);
+  display: grid;
+  gap: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
+}
+
+.icons-panel,
+.icons-compare-card {
+  background: var(--icons-surface);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  box-shadow: var(--icons-shadow);
+}
+
+.icons-summary-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(var(--bh-icon-explorer-preview-column), 0.75fr);
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-hero-panel {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+  align-items: center;
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-hero-glyph {
+  width: var(--bh-icon-explorer-detail-preview-size);
+  height: var(--bh-icon-explorer-detail-preview-size);
+  border-radius: var(--icons-radius);
+  display: grid;
+  place-items: center;
+  color: var(--icons-brand-dark);
+  background: var(--icons-brand-soft);
+  border: var(--bh-space-xxxs-1) solid var(--bh-border-brand-subtle);
+}
+
+.icons-hero-copy {
+  min-width: 0;
+  display: grid;
+  gap: var(--bh-space-lg-10);
+}
+
+.icons-hero-copy h3 {
+  font-size: var(--bh-text-heading-lg-semibold-font-size);
+  line-height: 1.05;
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-hero-copy p {
+  max-width: var(--bh-icon-explorer-detail-max-width);
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  line-height: 1.55;
+}
+
+.icons-tags,
+.icons-links,
+.icons-variants,
+.icons-button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bh-space-md-8);
+}
+
+.icons-tag {
+  min-height: calc(var(--bh-space-5xl-24) + var(--bh-space-xxs-2));
+  border-radius: var(--bh-radius-full);
+  display: inline-flex;
+  align-items: center;
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  background: var(--bh-bg-subtle);
+  color: var(--icons-text);
+  padding: 0 calc(var(--bh-space-md-8) + var(--bh-space-xxxs-1));
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-tag.is-warm {
+  background: var(--icons-warm-soft);
+  border-color: var(--bh-border-warning-subtle);
+  color: var(--bh-content-warning-strong);
+}
+
+.icons-links a {
+  color: var(--icons-brand-dark);
+  text-decoration: none;
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-links a:hover {
+  text-decoration: underline;
+}
+
+.icons-panel__header {
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) calc(var(--bh-space-xl-12) + var(--bh-space-sm-6)) 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--bh-space-xl-12);
+}
+
+.icons-panel__header h3 {
+  font-size: var(--bh-text-body-md-font-size);
+  line-height: 1.2;
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-score-list,
+.icons-controls {
+  display: grid;
+  gap: var(--bh-space-xl-12);
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-score {
+  display: grid;
+  gap: var(--bh-space-sm-6);
+}
+
+.icons-score span {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--bh-space-xl-12);
+  color: var(--icons-text);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-style: normal;
+}
+
+.icons-score em {
+  color: var(--icons-muted);
+  font-style: normal;
+}
+
+.icons-score div {
+  height: var(--bh-space-md-8);
+  overflow: hidden;
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-bg-muted);
+}
+
+.icons-score i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--icons-brand);
+}
+
+.icons-variants {
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-variant {
+  min-height: var(--bh-space-6xl-32);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--bh-radius-full);
+  background: var(--bh-bg-raised);
+  color: var(--icons-text);
+  padding: 0 var(--bh-space-xl-12);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-variant.is-active {
+  border-color: var(--icons-brand);
+  background: var(--icons-brand);
+  color: var(--bh-content-on-brand);
+}
+
+.icons-sample-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(var(--bh-icon-explorer-grid-column-min), 1fr));
+  gap: var(--bh-space-lg-10);
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-sample {
+  min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  background: var(--icons-surface-soft);
+  color: var(--icons-text);
+  display: grid;
+  place-items: center;
+  gap: var(--bh-space-md-8);
+  padding: var(--bh-space-lg-10) var(--bh-space-sm-6);
+}
+
+.icons-sample span {
+  max-width: 100%;
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-3xs-regular-font-size);
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icons-component-grid {
+  display: grid;
+  grid-template-columns: minmax(var(--bh-icon-explorer-preview-column), 0.9fr) minmax(0, 1.1fr);
+  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-controls label {
+  min-height: var(--bh-space-8xl-48);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bh-space-xl-12);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  background: var(--icons-surface-soft);
+  padding: var(--bh-space-lg-10) var(--bh-space-xl-12);
+}
+
+.icons-controls span {
+  color: var(--icons-text);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-controls input[type="range"] {
+  width: var(--bh-icon-explorer-swatch-width);
+  accent-color: var(--icons-brand);
+}
+
+.icons-preview {
+  display: grid;
+  gap: var(--bh-space-2xl-14);
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.preview-button {
+  min-height: var(--bh-space-7xl-40);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bh-space-md-8);
+  background: var(--bh-bg-raised);
+  color: var(--icons-text);
+  padding: 0 calc(var(--bh-space-xl-12) + var(--bh-space-xxxs-1));
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.preview-button.is-primary {
+  border-color: var(--icons-text);
+  background: var(--icons-text);
+  color: var(--bh-content-on-brand);
+}
+
+.preview-button.is-danger {
+  border-color: var(--bh-border-danger-subtle);
+  background: var(--bh-bg-danger-subtle);
+  color: var(--icons-danger);
+}
+
+.preview-button.is-icon-only {
+  width: var(--bh-space-7xl-40);
+  padding: 0;
+}
+
+.icons-field-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-drawer-column);
+  gap: var(--bh-space-lg-10);
+}
+
+.icons-field {
+  height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  display: flex;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+  background: var(--bh-bg-raised);
+  color: var(--icons-muted);
+  padding: 0 var(--bh-space-xl-12);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+}
+
+.icons-field.is-select {
+  justify-content: space-between;
+}
+
+.icons-field.is-select span {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-md-8);
+  min-width: 0;
+}
+
+.icons-menu-preview,
+.icons-table-preview,
+.icons-empty-preview {
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  background: var(--bh-bg-raised);
+  overflow: hidden;
+}
+
+.icons-menu-row,
+.icons-table-row {
+  display: grid;
+  align-items: center;
+  gap: var(--bh-space-lg-10);
+  min-height: calc(var(--bh-space-7xl-40) + var(--bh-space-xxs-2));
+  border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
+  color: var(--icons-text);
+  padding: 0 var(--bh-space-xl-12);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+}
+
+.icons-menu-row:last-child,
+.icons-table-row:last-child {
+  border-bottom: 0;
+}
+
+.icons-menu-row {
+  grid-template-columns: var(--bh-icon-explorer-row-icon-column) minmax(0, 1fr) auto;
+}
+
+.icons-menu-row em {
+  min-height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));
+  border-radius: var(--bh-radius-full);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bh-space-xs-4);
+  background: var(--bh-bg-success-subtle);
+  color: var(--bh-content-success-strong);
+  padding: 0 var(--bh-space-md-8);
+  font-size: var(--bh-text-body-3xs-regular-font-size);
+  font-style: normal;
+  font-weight: var(--bh-font-weight-bold);
+}
+
+.icons-menu-row small {
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+}
+
+.icons-table-row {
+  grid-template-columns: var(--bh-icon-explorer-list-column) 1.1fr 0.8fr 0.8fr auto;
+}
+
+.icons-empty-preview {
+  min-height: var(--bh-icon-explorer-selected-min-height);
+  display: grid;
+  place-items: center;
+  padding: var(--bh-space-5xl-24);
+  text-align: center;
+}
+
+.icons-empty-preview > div {
+  max-width: var(--bh-icon-explorer-request-max-width);
+  display: grid;
+  place-items: center;
+  gap: var(--bh-space-lg-10);
+}
+
+.icons-empty-preview span {
+  width: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
+  height: calc(var(--bh-space-8xl-48) + var(--bh-space-sm-6));
+  display: grid;
+  place-items: center;
+  border-radius: var(--icons-radius);
+  background: var(--bh-bg-brand-subtle);
+  color: var(--icons-brand-dark);
+}
+
+.icons-empty-preview h3 {
+  font-size: var(--bh-text-body-md-font-size);
+  line-height: 1.2;
+}
+
+.icons-empty-preview p {
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+  line-height: 1.45;
+}
+
+.icons-catalog-tools {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--bh-icon-explorer-group-column) auto;
+  gap: var(--bh-space-lg-10);
+  align-items: center;
+  padding: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
+}
+
+.icons-error {
+  border: var(--bh-space-xxxs-1) solid var(--bh-border-danger-subtle);
+  border-radius: var(--icons-radius);
+  background: var(--bh-bg-danger-subtle);
+  color: var(--icons-danger);
+  padding: var(--bh-space-2xl-14);
+  font-size: var(--bh-text-body-xs-regular-font-size);
+}
+
+.icons-catalog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-grid-card-min), 1fr));
+  gap: var(--bh-space-lg-10);
+}
+
+.icons-catalog-card {
+  min-height: var(--bh-icon-explorer-grid-card-min-height);
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--icons-radius);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  place-items: center;
+  gap: var(--bh-space-md-8);
+  background: var(--bh-bg-raised);
+  color: var(--icons-text);
+  padding: var(--bh-space-xl-12) var(--bh-space-md-8) var(--bh-space-lg-10);
+  text-align: center;
+}
+
+.icons-catalog-card span {
+  max-width: 100%;
+  color: var(--icons-muted);
+  font-size: var(--bh-text-body-3xs-regular-font-size);
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icons-load-more {
+  justify-self: center;
+}
+
+.icons-compare-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-family-card-min), 1fr));
+  gap: var(--bh-space-xl-12);
+}
+
+.icons-compare-card {
+  display: grid;
+  gap: var(--bh-space-xl-12);
+  padding: var(--bh-space-2xl-14);
+}
+
+.icons-compare-card > div:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bh-space-lg-10);
+}
+
+.icons-compare-card strong {
+  font-size: var(--bh-text-body-xs-regular-font-size);
+}
+
+.icons-compare-icons {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--bh-space-md-8);
+}
+
+.icons-compare-icons span {
+  width: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  border: var(--bh-space-xxxs-1) solid var(--icons-border);
+  border-radius: var(--bh-radius-md-6);
+  display: grid;
+  place-items: center;
+  background: var(--icons-surface-soft);
+  color: var(--icons-text);
+}
+
+/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
+@media (max-width: 980px) {
+  .icons-page {
+    grid-template-columns: 1fr;
+  }
+
+  .icons-sidebar {
+    position: relative;
+    height: auto;
+    border-right: 0;
+    border-bottom: var(--bh-space-xxxs-1) solid var(--icons-border);
+  }
+
+  .icons-pack-list {
+    grid-template-columns: repeat(auto-fill, minmax(var(--bh-icon-explorer-mobile-card-min), 1fr));
+  }
+
+  .icons-topbar,
+  .icons-summary-grid,
+  .icons-component-grid,
+  .icons-field-row,
+  .icons-catalog-tools {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 620px) {
+  .icons-topbar,
+  .icons-content,
+  .icons-sidebar {
+    padding-left: var(--bh-space-3xl-16);
+    padding-right: var(--bh-space-3xl-16);
+  }
+
+  .icons-sample-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .icons-table-row {
+    grid-template-columns: var(--bh-icon-explorer-list-column) minmax(0, 1fr) auto;
+  }
+
+  .icons-table-row > span {
+    display: none;
+  }
+}